Tutorial Ringkas
aimaraJS ialah pemalam struktur pokok direktori berbilang peringkat responsif javascript tulen yang sangat praktikal. Pepohon direktori boleh menambah dan memadam nod pokok secara dinamik, mencipta struktur pepohon berbilang peringkat, setiap nod boleh mempunyai menu konteks klik kanan, dan ikon berbeza boleh dikonfigurasikan pada setiap nod. Ciri-cirinya ialah:
Cara menggunakan
Untuk menggunakan pemalam tayangan slaid ini, anda perlu memperkenalkan fail Aimara.css dan Aimara.js ke dalam halaman.
<link rel="stylesheet" href="css/Aimara.css" /> <script src="js/Aimara.js"></script>
Struktur HTML
Anda boleh menggunakan
<div id="div_tree"></div>
JAVASCRIPT
Kemudian anda boleh memulakan pemalam pokok direktori melalui kaedah berikut. Anda boleh mencipta beberapa nod pokok dan nod anak dan kemudian menjadikannya. Nod boleh ditambah pada struktur pokok sebelum atau selepas pokok itu diberikan.
<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>
Buat menu konteks untuk nod pokok
Anda boleh mencipta menu konteks klik kanan melalui kaedah berikut.
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(); } } ] } } ] } };
Kemudian mulakan struktur pokok melalui kaedah berikut:
tree = createTree('div_tree','white',contex_menu); tree.drawTree();
Tambahkan nod pokok dalam masa nyata selepas struktur pokok itu dipaparkan:
tree.createNode('Real Time',false,'images/leaf.png',null,null,'context1');
Di atas adalah keseluruhan kandungan artikel ini, saya perkenalkan kepada anda pelaksanaan js responsif tulen untuk bar menu struktur pokok saya harap anda menyukainya.