From 34036d778ac2eb08e4cc75e14c5e6813956313c5 Mon Sep 17 00:00:00 2001
From: Catouse <catouse@gmail.com>
Date: Wed, 15 Mar 2017 18:04:02 +0800
Subject: [PATCH]  * fix UI error of menu and add .tree-menu style to tree
 view.

---
 docs/part/component-menu.md | 68 +++++++++++++++++----------
 docs/part/view-tree.md      | 88 ++++++++++++++++++++++++++++++++++-
 src/js/menu.js              | 11 +++--
 src/less/views/tree.less    | 91 +++++++++++++++++++++++++++++++++++++
 4 files changed, 227 insertions(+), 31 deletions(-)

diff --git a/docs/part/component-menu.md b/docs/part/component-menu.md
index 987c797e7..6cb87d8e1 100644
--- a/docs/part/component-menu.md
+++ b/docs/part/component-menu.md
@@ -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-toggle="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-ride="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-toggle="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-ride="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>
diff --git a/docs/part/view-tree.md b/docs/part/view-tree.md
index bcea29c71..08ae57c8b 100644
--- a/docs/part/view-tree.md
+++ b/docs/part/view-tree.md
@@ -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>
diff --git a/src/js/menu.js b/src/js/menu.js
index 537213c52..ab99214d7 100644
--- a/src/js/menu.js
+++ b/src/js/menu.js
@@ -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));
 
diff --git a/src/less/views/tree.less b/src/less/views/tree.less
index d83b7c157..0008e27e6 100644
--- a/src/less/views/tree.less
+++ b/src/less/views/tree.less
@@ -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;
+  }
+}
-- 
GitLab