純javascript響應(yīng)式樹形菜單效果
更新時間：2015年11月10日 09:46:43 投稿：lijiao
這篇文章主要為大家分享了純javascript響應(yīng)式樹形菜單效果的簡單教程，對多級目錄樹形菜單感興趣的小伙伴們可以參考一下
簡要教程
aimaraJS是一款非常實用的純javascript響應(yīng)式多級目錄樹結(jié)構(gòu)插件。該目錄樹可以動態(tài)添加和刪除樹節(jié)點，可以制作多級樹結(jié)構(gòu)，每個節(jié)點上可以都帶有右鍵上下文菜單，并且每個節(jié)點上都可以配置不同的圖標(biāo)。它的特點有：
- 可以創(chuàng)建一個基本的樹結(jié)構(gòu)并渲染它。
- 可以實時添加和刪除樹節(jié)點。
- 可以顯示不同的樹節(jié)點圖標(biāo)。
- 在樹節(jié)點打開和關(guān)閉的時候可以自定義事件。
- 每個樹節(jié)點上都可以制作右鍵上下文菜單。
使用方法
使用該幻燈片插件需要在頁面中引入Aimara.css和Aimara.js文件。
<link rel="stylesheet" href="css/Aimara.css" /> <script src="js/Aimara.js"></script>
HTML結(jié)構(gòu)
可以使用一個空的<div>來作為這個目錄樹的容器。
<div id="div_tree"></div>
JAVASCRIPT
然后你可以通過下面的方法來初始化該目錄樹插件。你可以創(chuàng)建一些樹節(jié)點和子節(jié)點，然后渲染它們。節(jié)點可以在樹被渲染之前或之后添加到樹結(jié)構(gòu)中。
<script type="text/javascript">
window.onload = function() {
//創(chuàng)建樹結(jié)構(gòu)
var tree = createTree('div_tree','white');
//創(chuàng)建樹節(jié)點node1
var node1 = tree.createNode('First node',false,'images/star.png',null,null,null);
//node1添加到樹結(jié)構(gòu)中
node1.createChildNode('First child node', false, 'images/blue_key.png',null,null);
//渲染樹結(jié)構(gòu)
tree.drawTree();
//創(chuàng)建第二個樹節(jié)點
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>
為樹節(jié)點創(chuàng)建上下文菜單
可以通過下面的方法來創(chuàng)建一個右鍵上下文菜單。
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();
}
}
]
}
}
]
}
};
然后通過下面的方法來初始化樹結(jié)構(gòu)：
tree = createTree('div_tree','white',contex_menu);
tree.drawTree();
在樹結(jié)構(gòu)渲染之后實時添加一個樹節(jié)點：
tree.createNode('Real Time',false,'images/leaf.png',null,null,'context1');
以上就是本文的全部內(nèi)容，為大家介紹了一款純js響應(yīng)式實現(xiàn)樹結(jié)構(gòu)菜單欄的特效，希望大家喜歡。
相關(guān)文章
（兼容ff/ie）td點擊背景變色特效...2007-08-08
JavaScript talbe表中指定位置插入一行的實現(xiàn)代碼 腳本之家修正版
用js實現(xiàn)的在table中指定的位置插入一行，先點一下表中你想插入的位置，點擊即可。2009-06-06
在開發(fā)中我們想要給一個組件的顯示和消失添加某種過渡動畫,可以很好的增加用戶體驗,下面這篇文章主要給大家介紹了關(guān)于React中過渡動畫的編寫方式,需要的朋友可以參考下2022-10-10
TypeScript環(huán)境搭建的實現(xiàn)步驟
本文主要介紹了TypeScript環(huán)境搭建的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了JavaScript內(nèi)存管理介紹,本文講解了內(nèi)存生命周期、JavaScript的內(nèi)存分配、通過函數(shù)調(diào)用的內(nèi)存分配、當(dāng)內(nèi)存不再需要使用時釋放等內(nèi)容,需要的朋友可以參考下2015-03-03
JavaScript實現(xiàn)簡單獲取本地圖片主色調(diào)
想象一個場景，就是如何根據(jù)一張圖片大概提取出它的主色調(diào)呢？獲取主色調(diào)后，可能會用來設(shè)置某些背景顏色，這里，利用?JS?簡單獲取本地圖片主色調(diào)，希望對大家有所幫助2023-03-03
這篇文章主要為大家詳細介紹了JavaScript原型封裝輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了JS實現(xiàn)帶提示的星級評分效果,以完整實例形式較為詳細的分析了JavaScript響應(yīng)鼠標(biāo)事件動態(tài)變換頁面元素樣式的相關(guān)技巧,非常簡單實用的代碼,需要的朋友可以參考下2015-10-10
本文主要介紹了JavaScript函數(shù)返回值,包括基本返回值、多返回值、異步函數(shù)的返回值等,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
JavaScript如何將偽數(shù)組轉(zhuǎn)換成數(shù)組?
這篇文章主要介紹了JavaScript如何將偽數(shù)組轉(zhuǎn)換成數(shù)組，?偽數(shù)組的主要特征是一個對象，并且該對象有l(wèi)ength屬性，更多參考內(nèi)容，需要的小伙伴可以參考一下2022-07-07