Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
易企天创
zui
提交
34036d77
Z
zui
项目概览
易企天创
/
zui
10 个月 前同步成功
通知
6
Star
0
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
37
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Z
zui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
37
Issue
37
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
34036d77
编写于
3月 15, 2017
作者:
C
Catouse
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
* fix UI error of menu and add .tree-menu style to tree view.
上级
64a06167
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
227 addition
and
31 deletion
+227
-31
docs/part/component-menu.md
docs/part/component-menu.md
+43
-25
docs/part/view-tree.md
docs/part/view-tree.md
+87
-1
src/js/menu.js
src/js/menu.js
+6
-5
src/less/views/tree.less
src/less/views/tree.less
+91
-0
未找到文件。
docs/part/component-menu.md
浏览文件 @
34036d77
...
...
@@ -7,19 +7,24 @@ filter: chuizhicaidan czcd
# 垂直菜单
<div
class=
"alert alert-primary"
>
<h4>
重要提示
</h4>
<p>
现已不推荐在树形菜单中使用导航
`.nav`
(此用法将在 1.7 中移除)。现在可以使用树形菜单
`.tree.tree-menu`
来代替。具体用法参见:
<strong>
[
视图 → 树形菜单 → 树形导航菜单
](
#view/tree/1
)
</strong>
。
</p>
</div>
垂直菜单可以方便的为您的应用创建可折叠的菜单。
## 实例
<div
class=
"example"
contenteditable=
"false"
>
<nav
class=
"menu"
data-
toggl
e=
"menu"
style=
"width: 200px"
>
<button
class=
"btn btn-primary"
><i
class=
"icon-edit"
></i>
CREATE
</button>
<button
class=
"btn"
><i
class=
"icon-cloud-upload"
></i>
UPLOAD
</button>
<nav
class=
"menu"
data-
rid
e=
"menu"
style=
"width: 200px"
>
<button
class=
"btn btn-primary"
><i
class=
"icon
icon
-edit"
></i>
CREATE
</button>
<button
class=
"btn"
><i
class=
"icon
icon
-cloud-upload"
></i>
UPLOAD
</button>
<ul
class=
"nav nav-primary"
>
<li><a
href=
"javascript:;"
><i
class=
"icon-th"
></i>
Dashboard
</a></li>
<li><a
href=
"javascript:;"
><i
class=
"icon-user"
></i>
Me
</a></li>
<li><a
href=
"javascript:;"
><i
class=
"icon
icon
-th"
></i>
Dashboard
</a></li>
<li><a
href=
"javascript:;"
><i
class=
"icon
icon
-user"
></i>
Me
</a></li>
<li
class=
"nav-parent"
>
<a
href=
"javascript:;"
><i
class=
"icon-time"
></i>
Time
</a>
<a
href=
"javascript:;"
><i
class=
"icon
icon
-time"
></i>
Time
</a>
<ul
class=
"nav"
>
<li><a
href=
"javascript:;"
>
Today
</a></li>
<li><a
href=
"javascript:;"
>
Tomarrow
</a></li>
...
...
@@ -27,14 +32,14 @@ filter: chuizhicaidan czcd
<li><a
href=
"javascript:;"
>
This Week
</a></li>
</ul>
</li>
<li><a
href=
"javascript:;"
><i
class=
"icon-trash"
></i>
Trash
</a></li>
<li><a
href=
"javascript:;"
><i
class=
"icon-list-ul"
></i>
All
</a></li>
<li
class=
"
active
show nav-parent"
>
<a
href=
"javascript:;"
><i
class=
"icon-tasks"
></i>
Status
</a>
<li><a
href=
"javascript:;"
><i
class=
"icon
icon
-trash"
></i>
Trash
</a></li>
<li><a
href=
"javascript:;"
><i
class=
"icon
icon
-list-ul"
></i>
All
</a></li>
<li
class=
"show nav-parent"
>
<a
href=
"javascript:;"
><i
class=
"icon
icon
-tasks"
></i>
Status
</a>
<ul
class=
"nav"
>
<li><a
href=
"javascript:;"
><i
class=
"icon-circle-blank"
></i>
Ready
</a></li>
<li
class=
"active"
><a
href=
"javascript:;"
><i
class=
"icon-play-sign"
></i>
Ongoing
</a></li>
<li><a
href=
"javascript:;"
><i
class=
"icon-ok-sign"
></i>
Completed
</a></li>
<li><a
href=
"javascript:;"
><i
class=
"icon
icon
-circle-blank"
></i>
Ready
</a></li>
<li
class=
"active"
><a
href=
"javascript:;"
><i
class=
"icon
icon
-play-sign"
></i>
Ongoing
</a></li>
<li><a
href=
"javascript:;"
><i
class=
"icon
icon
-ok-sign"
></i>
Completed
</a></li>
</ul>
</li>
</ul>
...
...
@@ -42,14 +47,14 @@ filter: chuizhicaidan czcd
</div>
```
html
<nav
class=
"menu"
data-
toggl
e=
"menu"
style=
"width: 200px"
>
<button
class=
"btn btn-primary"
><i
class=
"icon-edit"
></i>
CREATE
</button>
<button
class=
"btn"
><i
class=
"icon-cloud-upload"
></i>
UPLOAD
</button>
<nav
class=
"menu"
data-
rid
e=
"menu"
style=
"width: 200px"
>
<button
class=
"btn btn-primary"
><i
class=
"icon
icon
-edit"
></i>
CREATE
</button>
<button
class=
"btn"
><i
class=
"icon
icon
-cloud-upload"
></i>
UPLOAD
</button>
<ul
class=
"nav nav-primary"
>
<li><a
href=
"javascript:;"
><i
class=
"icon-th"
></i>
Dashboard
</a></li>
<li><a
href=
"javascript:;"
><i
class=
"icon-user"
></i>
Me
</a></li>
<li><a
href=
"javascript:;"
><i
class=
"icon
icon
-th"
></i>
Dashboard
</a></li>
<li><a
href=
"javascript:;"
><i
class=
"icon
icon
-user"
></i>
Me
</a></li>
<li
class=
"nav-parent"
>
<a
href=
"javascript:;"
><i
class=
"icon-time"
></i>
Time
</a>
<a
href=
"javascript:;"
><i
class=
"icon
icon
-time"
></i>
Time
</a>
<ul
class=
"nav"
>
<li><a
href=
"javascript:;"
>
Today
</a></li>
<li><a
href=
"javascript:;"
>
Tomarrow
</a></li>
...
...
@@ -57,20 +62,33 @@ filter: chuizhicaidan czcd
<li><a
href=
"javascript:;"
>
This Week
</a></li>
</ul>
</li>
<li><a
href=
"javascript:;"
><i
class=
"icon-trash"
></i>
Trash
</a></li>
<li><a
href=
"javascript:;"
><i
class=
"icon-list-ul"
></i>
All
</a></li>
<li><a
href=
"javascript:;"
><i
class=
"icon
icon
-trash"
></i>
Trash
</a></li>
<li><a
href=
"javascript:;"
><i
class=
"icon
icon
-list-ul"
></i>
All
</a></li>
<li
class=
"active show nav-parent"
>
<a
href=
"javascript:;"
><i
class=
"icon-tasks"
></i>
Status
</a>
<a
href=
"javascript:;"
><i
class=
"icon
icon
-tasks"
></i>
Status
</a>
<ul
class=
"nav"
>
<li><a
href=
"javascript:;"
><i
class=
"icon-circle-blank"
></i>
Ready
</a></li>
<li
class=
"active"
><a
href=
"javascript:;"
><i
class=
"icon-play-sign"
></i>
Ongoing
</a></li>
<li><a
href=
"javascript:;"
><i
class=
"icon-ok-sign"
></i>
Completed
</a></li>
<li><a
href=
"javascript:;"
><i
class=
"icon
icon
-circle-blank"
></i>
Ready
</a></li>
<li
class=
"active"
><a
href=
"javascript:;"
><i
class=
"icon
icon
-play-sign"
></i>
Ongoing
</a></li>
<li><a
href=
"javascript:;"
><i
class=
"icon
icon
-ok-sign"
></i>
Completed
</a></li>
</ul>
</li>
</ul>
</nav>
```
## 激活选中项
你需要手动为
`.menu .nav`
内的菜单项
`<li>`
元素动态增加
`.active`
类来应用激活时的外观。下面以点击即激活为例:
```
js
$
(
'
.menu .nav
'
).
on
(
'
click
'
,
'
li:not(.nav-parent) > a
'
,
function
()
{
var
$this
=
$
(
this
);
$
(
'
.menu .nav .active
'
).
removeClass
(
'
active
'
);
$this
.
closest
(
'
li
'
).
addClass
(
'
active
'
);
$this
.
closest
(
'
.nav-parent
'
).
addClass
(
'
active
'
);
});
```
<div
class=
"alert"
>
示例中当点击菜单条目并应用高亮样式的效果是为演示方便有意添加的,并非垂直菜单自身交互功能。你仍然可以手动为
<code>
.nav
</code>
中的
<code>
li
</code>
添加
<code>
.active
</code>
CLASS 来启用或移除高亮样式效果。
</div>
<script>
...
...
docs/part/view-tree.md
浏览文件 @
34036d77
...
...
@@ -116,6 +116,93 @@ filter: shuxingcaidan sxcd shuxcd
</ul>
```
## 树形导航菜单
为
`.tree`
元素增加
`.tree-menu`
类可以获得树形导航外观。
<example>
<nav
class=
"menu"
data-ride=
"menu"
style=
"width: 200px"
>
<ul
id=
"treeMenu"
class=
"tree tree-menu"
data-ride=
"tree"
>
<li><a
href=
"#"
><i
class=
"icon icon-th"
></i>
首页
</a></li>
<li><a
href=
"#"
><i
class=
"icon icon-user"
></i>
个人资料
</a></li>
<li>
<a
href=
"#"
><i
class=
"icon icon-time"
></i>
更新时间
</a>
<ul>
<li><a
href=
"#"
>
今天
</a></li>
<li><a
href=
"#"
>
明天
</a></li>
<li><a
href=
"#"
>
昨天
</a></li>
<li><a
href=
"#"
>
本周
</a></li>
</ul>
</li>
<li><a
href=
"#"
><i
class=
"icon icon-trash"
></i>
垃圾篓
</a></li>
<li><a
href=
"#"
><i
class=
"icon icon-list-ul"
></i>
全部
</a></li>
<li
class=
"open"
>
<a
href=
"#"
><i
class=
"icon icon-tasks"
></i>
状态
</a>
<ul>
<li>
<a
href=
"#"
><i
class=
"icon icon-circle-blank"
></i>
已就绪
</a>
<ul>
<li><a
href=
"#"
>
已取消
</a></li>
<li><a
href=
"#"
>
已关闭
</a></li>
</ul>
</li>
<li
class=
"active"
><a
href=
"#"
><i
class=
"icon icon-play-sign"
></i>
进行中
</a></li>
<li><a
href=
"#"
><i
class=
"icon icon-ok-sign"
></i>
已完成
</a></li>
</ul>
</li>
</ul>
</nav>
</example>
```
html
<nav
class=
"menu"
data-ride=
"menu"
style=
"width: 200px"
>
<ul
id=
"treeMenu"
class=
"tree tree-menu"
data-ride=
"tree"
>
<li><a
href=
"#"
><i
class=
"icon icon-th"
></i>
首页
</a></li>
<li><a
href=
"#"
><i
class=
"icon icon-user"
></i>
个人资料
</a></li>
<li>
<a
href=
"#"
><i
class=
"icon icon-time"
></i>
更新时间
</a>
<ul>
<li><a
href=
"#"
>
今天
</a></li>
<li><a
href=
"#"
>
明天
</a></li>
<li><a
href=
"#"
>
昨天
</a></li>
<li><a
href=
"#"
>
本周
</a></li>
</ul>
</li>
<li><a
href=
"#"
><i
class=
"icon icon-trash"
></i>
垃圾篓
</a></li>
<li><a
href=
"#"
><i
class=
"icon icon-list-ul"
></i>
全部
</a></li>
<li
class=
"open"
>
<a
href=
"#"
><i
class=
"icon icon-tasks"
></i>
状态
</a>
<ul>
<li>
<a
href=
"#"
><i
class=
"icon icon-circle-blank"
></i>
已就绪
</a>
<ul>
<li><a
href=
"#"
>
已取消
</a></li>
<li><a
href=
"#"
>
已关闭
</a></li>
</ul>
</li>
<li
class=
"active"
><a
href=
"#"
><i
class=
"icon icon-play-sign"
></i>
进行中
</a></li>
<li><a
href=
"#"
><i
class=
"icon icon-ok-sign"
></i>
已完成
</a></li>
</ul>
</li>
</ul>
</nav>
```
```
js
// 手动通过点击模拟高亮菜单项
$
(
'
#treeMenu
'
).
on
(
'
click
'
,
'
a
'
,
function
()
{
$
(
'
#treeMenu li.active
'
).
removeClass
(
'
active
'
);
$
(
this
).
closest
(
'
li
'
).
addClass
(
'
active
'
);
});
```
<script>
$('#treeMenu').on('click', 'a', function() {
$('#treeMenu li.active').removeClass('active');
$(this).closest('li').addClass('active');
});
</script>
## 外观选项
### 在层级菜单之间显示连接线
...
...
@@ -189,7 +276,6 @@ filter: shuxingcaidan sxcd shuxcd
#### 内置图标类型
<div
class=
"example"
>
<ul
class=
"nav nav-tabs"
id=
"treeIconsExampleNav"
style=
"margin: -21px -21px 10px -21px; background-color: #fafafa"
>
<li
class=
"active"
><a
href=
"###"
>
默认
</a></li>
...
...
src/js/menu.js
浏览文件 @
34036d77
...
...
@@ -27,10 +27,11 @@
};
Menu
.
prototype
.
init
=
function
()
{
var
children
=
this
.
$
.
children
(
'
.nav
'
);
children
.
find
(
'
.nav
'
).
closest
(
'
li
'
).
addClass
(
'
nav-parent
'
);
children
.
find
(
'
.nav > li.active
'
).
closest
(
'
li
'
).
addClass
(
'
active
'
);
children
.
find
(
'
.nav-parent > a
'
).
append
(
'
<i class="
'
+
this
.
options
.
foldicon
+
'
nav-parent-fold-icon"></i>
'
);
var
$children
=
this
.
$
.
children
(
'
.nav
'
);
$children
.
find
(
'
.nav
'
).
closest
(
'
li
'
).
addClass
(
'
nav-parent
'
);
$children
.
find
(
'
.nav > li.active
'
).
parent
().
closest
(
'
li
'
).
addClass
(
'
active
'
);
$children
.
find
(
'
.nav-parent > a
'
).
append
(
'
<i class="
'
+
this
.
options
.
foldicon
+
'
nav-parent-fold-icon"></i>
'
);
$children
.
find
(
'
.nav-parent.show
'
).
find
(
'
.nav-parent-fold-icon
'
).
addClass
(
'
icon-rotate-90
'
);
this
.
handleFold
();
};
...
...
@@ -79,7 +80,7 @@
$
.
fn
.
menu
.
Constructor
=
Menu
;
$
(
function
()
{
$
(
'
[data-toggle="menu"]
'
).
menu
();
$
(
'
[data-toggle="menu"]
,[data-ride="menu"]
'
).
menu
();
});
}(
jQuery
));
src/less/views/tree.less
浏览文件 @
34036d77
...
...
@@ -186,3 +186,94 @@
ul > li.has-list:after {width: 15px}
}
// Tree menu
.tree-menu {
border: 1px solid @nav-primary-border-color;
border-radius: @border-radius-base;
overflow: hidden;
li {
padding: 0;
&:before {display: none;}
> a {
margin-bottom: -1px;
color: @color-fore;
padding: 8px;
display: block;
> .icon {
color: inherit;
opacity: .6;
display: inline-block;
width: 20px;
text-align: left;
}
&:hover,
&:active,
&:focus {
> .icon {
opacity: .9;
}
text-decoration: none;
background-color: rgba(0,0,0,.04);
color: @link-hover-color;
}
}
.list-toggle {
left: auto;
right: 4px;
top: 6px;
width: 24px;
height: 24px;
transition: all 0.3s;
.opacity(0.45);
&:before {
content: @icon-chevron-right;
}
}
&.open > .list-toggle {
transform: rotate(90deg);
.opacity(0.75);
&:before {
content: @icon-chevron-right;
}
}
> ul {
background-color: rgba(0,0,0,.04);
}
li a {
padding-left: 28px;
border-top-color: transparent;
border-bottom-color: transparent;
}
li li a {padding-left: 48px;}
li li li a {padding-left: 68px;}
&.active > a {
background-color: @component-active-bg;
border-color: @component-active-bg;
color: @component-active-color;
}
&.active .list-toggle {
color: @component-active-color;
}
}
> li > a {
border: 1px solid transparent;
border-bottom-color: @nav-primary-border-color;
}
> li.open + li > a {
border-top-color: @nav-primary-border-color;
}
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录