+ add tree view.

src/js/tree.js

+/* ========================================================================
+ * 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

+.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

@@ -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",