純javascript響應式樹形菜單效果，javascript響應樹形

純javascript響應式樹形菜單效果，javascript響應樹形

簡要教程
aimaraJS是一款非常實用的純javascript響應式多級分類樹結構外掛程式。該分類樹可以動態添加和刪除樹節點，可以製作多級樹結構，每個節點上可以都帶有右鍵操作功能表，並且每個節點上都可以配置不同的表徵圖。它的特點有：

• 可以建立一個基本的樹結構並渲染它。
• 可以即時添加和刪除樹節點。
• 可以顯示不同的樹節點表徵圖。
• 在樹節點開啟和關閉的時候可以自訂事件。
• 每個樹節點上都可以製作右鍵操作功能表。

 

使用方法
使用該投影片外掛程式需要在頁面中引入Aimara.css和Aimara.js檔案。

<link rel="stylesheet" href="css/Aimara.css" /><script src="js/Aimara.js"></script>       

 HTML結構

可以使用一個空的<div>來作為這個分類樹的容器。

<div id="div_tree"></div>       

JAVASCRIPT

然後你可以通過下面的方法來初始化該分類樹外掛程式。你可以建立一些樹節點和子節點，然後渲染它們。節點可以在樹被渲染之前或之後添加到樹結構中。

<script type="text/javascript">  window.onload = function() {    //建立樹結構    var tree = createTree('div_tree','white');    //建立樹節點node1    var node1 = tree.createNode('First node',false,'images/star.png',null,null,null);    //node1添加到樹結構中    node1.createChildNode('First child node', false, 'images/blue_key.png',null,null);    //渲染樹結構    tree.drawTree();    //建立第二個樹節點    node1 = tree.createNode('Second node',false,'images/star.png',null,null,null);    node1.createChildNode('Second child node', false, 'images/blue_key.png',null,null);  };</script>        

為樹節點建立操作功能表

可以通過下面的方法來建立一個右鍵操作功能表。

var contex_menu = { 'context1' : {  elements : [   {    text : 'Node Actions',    icon: 'images/blue_key.png',    action : function(node) {     },    submenu: {     elements : [      {       text : 'Toggle Node',       icon: 'images/leaf.png',       action : function(node) {        node.toggleNode();       }      },      {       text : 'Expand Node',       icon: 'images/leaf.png',       action : function(node) {        node.expandNode();       }      },      {       text : 'Collapse Node',       icon: 'images/leaf.png',       action : function(node) {        node.collapseNode();       }      },      {       text : 'Expand Subtree',       icon: 'images/tree.png',       action : function(node) {        node.expandSubtree();       }      },      {       text : 'Collapse Subtree',       icon: 'images/tree.png',       action : function(node) {        node.collapseSubtree();       }      },      {       text : 'Delete Node',       icon: 'images/delete.png',       action : function(node) {        node.removeNode();       }      },     ]    }   },   {    text : 'Child Actions',    icon: 'images/blue_key.png',    action : function(node) {     },    submenu: {     elements : [      {       text : 'Create Child Node',       icon: 'images/add1.png',       action : function(node) {        node.createChildNode('Created',false,'images/folder.png',null,'context1');       }      },      {       text : 'Create 1000 Child Nodes',       icon: 'images/add1.png',       action : function(node) {        for (var i=0; i<1000; i++)         node.createChildNode('Created -' + i,false,'images/folder.png',null,'context1');       }      },      {       text : 'Delete Child Nodes',       icon: 'images/delete.png',       action : function(node) {        node.removeChildNodes();       }      }     ]    }   }  ] }};        

然後通過下面的方法來初始化樹結構：

tree = createTree('div_tree','white',contex_menu);tree.drawTree();   

在樹結構渲染之後即時添加一個樹節點：

tree.createNode('Real Time',false,'images/leaf.png',null,null,'context1'); 

 以上就是本文的全部內容，為大家介紹了一款純js響應式實現樹結構功能表列的特效，希望大家喜歡。