簡要教程
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響應式實現樹結構菜單欄的特效，希望大家喜歡。
新聞熱點
疑難解答
