* Example Modify the interface document module tree.

module/dev/js/api.js

@@ -1,5 +1,6 @@
 $(function()
 {
+    initModule();
     setHeight();
     $(window).resize(setHeight);
 });
@@ -12,6 +13,33 @@ $(function()
  */
 function setHeight()
 {
-    var paneHeight = $(window).height() - 100;
+    var paneHeight = $(window).height() - 90;
     $('#sidebar .module-tree,#mainContent .module-content').css('height', paneHeight);
 }
+/**
+ * Init module tree by zui.
+ *
+ * @access public
+ * @return void
+ */
+function initModule()
+{
+    $('#moduleTree').tree(
+    {
+        data: moduleTree,
+        initialState: 'active',
+        itemCreator: function($li, item)
+        {
+            console.log(item);
+            $li.append('<a data-module="' + item.key + '" data-has-children="' + (item.children ? !!item.children.length : false) + '" href=# title="' + item.title + '">' + item.title + '</a>');
+            if (item.active) $li.addClass('active open in');
+        }
+    });
+
+    $('#moduleTree').on('click', 'a', function(e)
+    {
+        var target = $(e.target);
+        if (target.attr('data-has-children') === 'true') return;
+        self.location.href = createLink('dev', 'api', 'module=' + target.attr('data-module'));
+    })
+}

module/dev/js/db.js

@@ -12,6 +12,6 @@ $(function()
  */
 function setHeight()
 {
-    var paneHeight = $(window).height() - 100;
+    var paneHeight = $(window).height() - 90;
     $('#sidebar .module-tree,#mainContent .module-content').css('height', paneHeight);
 }