Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
zzx_123123
zui
提交
23e3cc73
Z
zui
项目概览
zzx_123123
/
zui
与 Fork 源项目一致
Fork自
易企天创 / zui
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Z
zui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
23e3cc73
编写于
1月 06, 2016
作者:
C
Catouse
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
+ add tree view.
上级
c57fe8e8
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
263 addition
and
2 deletion
+263
-2
src/js/tree.js
src/js/tree.js
+119
-0
src/less/views/tree.less
src/less/views/tree.less
+133
-0
zui.json
zui.json
+11
-2
未找到文件。
src/js/tree.js
0 → 100644
浏览文件 @
23e3cc73
/* ========================================================================
* ZUI: tree.js
* http://zui.sexy
* ========================================================================
* Copyright (c) 2014 cnezsoft.com; Licensed MIT
* ======================================================================== */
(
function
(
$
)
{
'
use strict
'
;
var
name
=
'
zui.tree
'
;
// modal name
// The tree modal class
var
Tree
=
function
(
element
,
options
)
{
this
.
name
=
name
;
this
.
$
=
$
(
element
);
this
.
getOptions
(
options
);
this
.
init
();
};
// default options
Tree
.
DEFAULTS
=
{
animate
:
false
,
initialState
:
'
normal
'
};
Tree
.
prototype
.
init
=
function
()
{
if
(
this
.
options
.
animate
)
this
.
$
.
addClass
(
'
tree-animate
'
);
this
.
$lists
=
this
.
$
.
find
(
'
ul
'
);
this
.
$lists
.
parent
(
'
li
'
).
addClass
(
'
has-list
'
).
prepend
(
'
<i class="list-toggle icon"></i>
'
);
var
that
=
this
;
this
.
$
.
on
(
'
click
'
,
'
.list-toggle, a[href=#]
'
,
function
()
{
that
.
toggle
(
$
(
this
).
parent
(
'
li
'
));
});
if
(
this
.
options
.
initialState
===
'
expand
'
)
{
this
.
expand
();
}
else
if
(
this
.
options
.
initialState
===
'
collapse
'
)
{
this
.
collapse
();
}
};
Tree
.
prototype
.
expand
=
function
(
$li
,
disabledAnimate
)
{
if
(
$li
)
{
$li
.
addClass
(
'
open
'
);
if
(
!
disabledAnimate
&&
this
.
options
.
animate
)
{
setTimeout
(
function
()
{
$li
.
addClass
(
'
in
'
);
},
10
);
}
else
{
$li
.
addClass
(
'
in
'
);
}
}
else
{
this
.
$
.
find
(
'
li.has-list
'
).
addClass
(
'
open in
'
);
}
this
.
callEvent
(
'
expand
'
,
$li
,
this
);
};
Tree
.
prototype
.
collapse
=
function
(
$li
,
disabledAnimate
)
{
if
(
$li
)
{
if
(
!
disabledAnimate
&&
this
.
options
.
animate
)
{
$li
.
removeClass
(
'
in
'
);
setTimeout
(
function
()
{
$li
.
removeClass
(
'
open
'
);
},
300
);
}
else
{
$li
.
removeClass
(
'
open in
'
);
}
}
else
{
this
.
$
.
find
(
'
li.has-list
'
).
removeClass
(
'
open in
'
);
}
this
.
callEvent
(
'
collapse
'
,
$li
,
this
);
};
Tree
.
prototype
.
toggle
=
function
(
$li
)
{
var
collapse
=
(
$li
&&
$li
.
hasClass
(
'
open
'
))
||
$li
===
false
||
(
$li
===
undefined
&&
this
.
$
.
find
(
'
li.has-list.open
'
).
length
);
this
[
collapse
?
'
collapse
'
:
'
expand
'
](
$li
);
};
// Get and init options
Tree
.
prototype
.
getOptions
=
function
(
options
)
{
this
.
options
=
$
.
extend
(
{},
Tree
.
DEFAULTS
,
this
.
$
.
data
(),
options
);
};
// Call event helper
Tree
.
prototype
.
callEvent
=
function
(
name
,
params
)
{
var
result
=
this
.
$
.
callEvent
(
name
+
'
.
'
+
this
.
name
,
params
,
this
);
return
!
(
result
.
result
!==
undefined
&&
(
!
result
.
result
));
};
// Extense jquery element
$
.
fn
.
tree
=
function
(
option
,
params
)
{
return
this
.
each
(
function
()
{
var
$this
=
$
(
this
);
var
data
=
$this
.
data
(
name
);
var
options
=
typeof
option
==
'
object
'
&&
option
;
if
(
!
data
)
$this
.
data
(
name
,
(
data
=
new
Tree
(
this
,
options
)));
if
(
typeof
option
==
'
string
'
)
data
[
option
](
params
);
});
};
$
.
fn
.
tree
.
Constructor
=
Tree
;
// Auto call tree after document load complete
$
(
function
()
{
$
(
'
[data-ride="tree"]
'
).
tree
();
});
}(
jQuery
));
src/less/views/tree.less
0 → 100644
浏览文件 @
23e3cc73
.tree {
padding-left: 0;
ul {
display: none;
padding-left: 0;
}
li {
list-style: none;
position: relative;
padding: 2px 0 2px 20px;
&:before {
display: block;
content: ' ';
width: 3px;
height: 3px;
background-color: #999;
position: absolute;
left: 8px;
top: 10px;
}
&.has-list:before {
display: none;
}
> .list-toggle {
position: absolute;
left: 0;
top: -1px;
width: 20px;
line-height: 24px;
text-align: center;
color: @color-gray;
cursor: pointer;
z-index: 10;
&:before {
content: '\e6f1';
}
&:hover, &:active {
color: @link-hover-color;
}
}
&.open {
> ul {
display: block;
}
> .list-toggle:before {
content: '\e6f2';
}
}
}
}
.tree-animate {
ul {
opacity: 0;
transform: scale(1, .5);
.transition-fast(opacity, transform);
}
li {
&.open.in {
> ul {
transform: scale(1, 1);
opacity: 1;
}
}
}
}
.tree-lines {
li {
&.has-list {
&.open > ul:after {
display: block;
position: absolute;
content: ' ';
border-left: 1px dotted #999;
top: 16px;
left: 9px;
bottom: 16px;
z-index: 1;
}
}
}
ul > li {
&:after {
display: block;
position: absolute;
content: ' ';
border-top: 1px dotted #999;
top: 11px;
left: -10px;
z-index: 1;
width: 18px;
}
}
}
.tree-folders {
li > .list-toggle:before {content: '\e6ef'}
li.open > .list-toggle:before {content: '\e6f0'}
li:before {border: 1px solid #999; background-color: #fff; width: 4px; height: 4px; border-radius: 2px; left: 7px; top: 9px;}
&.tree-lines li.has-list.open > ul:after {top: 16px}
ul > li.has-list:after {width: 13px}
ul > li.has-list.open:after {width: 15px}
}
.tree-chevrons {
li > .list-toggle:before {content: '\e710'}
li.open > .list-toggle:before {content: '\e712'}
li:before {background-color: @color-gray-light; width: 10px; height: 10px; border-radius: 5px; left: 4px; top: 6px;}
ul > li:after {width: 13px}
}
.tree-angles {
li > .list-toggle:before {content: '\e6e1'}
li.open > .list-toggle:before {content: '\e6e3'}
ul > li.has-list:after {width: 15px}
}
zui.json
浏览文件 @
23e3cc73
...
...
@@ -1032,6 +1032,15 @@
"ver"
:
"1.1.0"
,
"deprecated"
:
"Use jquery way instead."
},
"tree"
:
{
"name"
:
"树形菜单"
,
"src"
:
{
"js"
:
[
"~/tree.js"
],
"less"
:
[
"~/views/tree.less"
]
},
"ver"
:
"1.4.0"
,
"dpds"
:
[
"icons"
]
},
"zeroclipboard"
:
{
"name"
:
"ZeroClipboard"
,
"src"
:
{
...
...
@@ -1094,7 +1103,7 @@
"filename"
:
"zui"
,
"subdirectories"
:
true
,
"bootstrapStatement"
:
true
,
"includes"
:
[
"jqueryex"
,
"basic"
,
"utilities"
,
"scaffolding"
,
"grid"
,
"typography"
,
"header"
,
"button"
,
"progressbar"
,
"image"
,
"divider"
,
"labels"
,
"breadcrumbs"
,
"icons"
,
"close"
,
"scrollbars"
,
"table"
,
"listgroup"
,
"panels"
,
"alerts"
,
"inputgroups"
,
"forms"
,
"code"
,
"pager"
,
"navs"
,
"navbars"
,
"animations"
,
"collapse"
,
"device"
,
"browser"
,
"date"
,
"string"
,
"resize"
,
"scrollspy"
,
"store"
,
"draggable"
,
"droppable"
,
"sortable"
,
"tab"
,
"modals"
,
"modaltrigger"
,
"tooltip"
,
"popovers"
,
"dropdowns"
,
"carousel"
,
"lightbox"
,
"messager"
,
"menu"
,
"bootbox"
,
"article"
,
"comment"
,
"list"
,
"card"
,
"dashboard"
,
"board"
,
"color"
]
"includes"
:
[
"jqueryex"
,
"basic"
,
"utilities"
,
"scaffolding"
,
"grid"
,
"typography"
,
"header"
,
"button"
,
"progressbar"
,
"image"
,
"divider"
,
"labels"
,
"breadcrumbs"
,
"icons"
,
"close"
,
"scrollbars"
,
"table"
,
"listgroup"
,
"panels"
,
"alerts"
,
"inputgroups"
,
"forms"
,
"code"
,
"pager"
,
"navs"
,
"navbars"
,
"animations"
,
"collapse"
,
"device"
,
"browser"
,
"date"
,
"string"
,
"resize"
,
"scrollspy"
,
"store"
,
"draggable"
,
"droppable"
,
"sortable"
,
"tab"
,
"modals"
,
"modaltrigger"
,
"tooltip"
,
"popovers"
,
"dropdowns"
,
"carousel"
,
"lightbox"
,
"messager"
,
"menu"
,
"bootbox"
,
"article"
,
"comment"
,
"list"
,
"card"
,
"dashboard"
,
"board"
,
"color"
,
"tree"
]
},
"lite"
:
{
"title"
:
"Lite edition"
,
...
...
@@ -1239,7 +1248,7 @@
"filename"
:
"zui"
,
"subdirectories"
:
true
,
"bootstrapStatement"
:
true
,
"includes"
:
[
"jqueryex"
,
"basic"
,
"utilities"
,
"array"
,
"scaffolding"
,
"grid"
,
"typography"
,
"header"
,
"button"
,
"progressbar"
,
"image"
,
"divider"
,
"labels"
,
"breadcrumbs"
,
"icons"
,
"close"
,
"scrollbars"
,
"table"
,
"listgroup"
,
"panels"
,
"alerts"
,
"inputgroups"
,
"forms"
,
"code"
,
"pager"
,
"navs"
,
"navbars"
,
"animations"
,
"collapse"
,
"device"
,
"browser"
,
"date"
,
"string"
,
"resize"
,
"scrollspy"
,
"store"
,
"draggable"
,
"droppable"
,
"sortable"
,
"tab"
,
"modals"
,
"modaltrigger"
,
"tooltip"
,
"popovers"
,
"dropdowns"
,
"carousel"
,
"lightbox"
,
"messager"
,
"menu"
,
"bootbox"
,
"article"
,
"comment"
,
"list"
,
"card"
,
"dashboard"
,
"board"
,
"datatable"
,
"calendar"
,
"colorset.test"
,
"hotkey"
,
"autotrigger"
,
"chosenicons"
,
"colorset.js"
,
"chart"
]
"includes"
:
[
"jqueryex"
,
"basic"
,
"utilities"
,
"array"
,
"scaffolding"
,
"grid"
,
"typography"
,
"header"
,
"button"
,
"progressbar"
,
"image"
,
"divider"
,
"labels"
,
"breadcrumbs"
,
"icons"
,
"close"
,
"scrollbars"
,
"table"
,
"listgroup"
,
"panels"
,
"alerts"
,
"inputgroups"
,
"forms"
,
"code"
,
"pager"
,
"navs"
,
"navbars"
,
"animations"
,
"collapse"
,
"device"
,
"browser"
,
"date"
,
"string"
,
"resize"
,
"scrollspy"
,
"store"
,
"draggable"
,
"droppable"
,
"sortable"
,
"tab"
,
"modals"
,
"modaltrigger"
,
"tooltip"
,
"popovers"
,
"dropdowns"
,
"carousel"
,
"lightbox"
,
"messager"
,
"menu"
,
"bootbox"
,
"article"
,
"comment"
,
"list"
,
"card"
,
"dashboard"
,
"board"
,
"datatable"
,
"calendar"
,
"colorset.test"
,
"hotkey"
,
"autotrigger"
,
"chosenicons"
,
"colorset.js"
,
"chart"
,
"tree"
]
},
"doc"
:
{
"title"
:
"Document"
,
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录