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