JS代碼很簡潔，但是實(shí)現(xiàn)了所有樹形菜單應(yīng)有的功能，安裝和使用都很簡單，特別是從數(shù)據(jù)庫恢復(fù)成一棵樹變得非常容易。下載包里自帶一些常用圖標(biāo)，只需簡單的操作，就可以實(shí)現(xiàn)看起來相當(dāng)專業(yè)的樹形菜單。
- 官方網(wǎng)站：http://www.destroydrop.com/javascripts/tree/
- 這里下載JS腳本文件包：http://www.destroydrop.com/javascripts/tree/dtree.zip
- 這兒是演示(Demo)：http://www.destroydrop.com/javascripts/tree/example/
詳細(xì)介紹應(yīng)用dtree構(gòu)建一個(gè)JavaScript樹型菜單及其中參數(shù)配置說明
這幾天寫了個(gè)網(wǎng)站www.aatii.cn，用了一個(gè)JavaScript寫的樹型菜單，有網(wǎng)友問我要這個(gè)代碼，很奇怪，了解一下，原來網(wǎng)上很多文章都在討論Js樹型菜單，看了幾個(gè)實(shí)例，發(fā)現(xiàn)確實(shí)沒有我用的這個(gè)好，因此baidu了一下，略作整理，希望大家不要浪費(fèi)無用功。
（網(wǎng)上很多人都將dtree改頭換面加以演繹，造成了海量垃圾，這里希望大家尊重他人勞動成果，保留版權(quán)信息，再進(jìn)行完善的話，還一個(gè)潔凈環(huán)境，人人如此，我們就不會在學(xué)習(xí)中走很多彎路了，當(dāng)你能這樣做了 我們就慢慢成為一個(gè)真正的程序員了）。
首先說我用的這個(gè)Js樹型菜單，不是我做的是一個(gè)老外寫的---dtree。
這個(gè)無限級可刷新Js樹型菜單 dTree
1、可設(shè)置無限級菜單
2、不必使用框架
3、可刷新，多頁面內(nèi)跳轉(zhuǎn)不會影響菜單
4、可限級創(chuàng)造子樹
5、支持目前主流瀏覽器：IE5，6，7
6、節(jié)點(diǎn)圖片可設(shè)置切換圖片效果
下載url：http://www.destroydrop.com/javascripts/tree/
看看最下邊的時(shí)間，2003 Geir Landro人家就寫出來了，俺現(xiàn)在才用（佩服）
解壓縮dtree.zip 包。
dtree目錄下包括這些文件：example01.html 、 dtree.js 、 api.html 、 dtree.css 和img目錄
注意：除了api.html之外，其它的文件都是必須拷貝的。api.html是dtree的函數(shù)介紹。
打開example01.html文件
<link rel="StyleSheet" href="css/dtree.css" type="text/css" />
<script type="text/javascript" src="js/dtree.js"></script>
必須引用的兩個(gè)文件。
生成樹 節(jié)點(diǎn)的代碼：
<script type="text/javascript">
<!--
d = new dTree(’d’);//創(chuàng)建一個(gè)樹對象
d.add(0,-1,’My example tree’); //創(chuàng)建一個(gè)樹對象
d.add(1,0,’Node 1’,’example01.html’);
d.add(2,0,’Node 2’,’example01.html’);
d.add(3,1,’Node 1.1’,’example01.html’);
d.add(4,0,’Node 3’,’example01.html’);
d.add(5,3,’Node 1.1.1’,’example01.html’);
d.add(6,5,’Node 1.1.1.1’,’example01.html’);
d.add(7,0,’Node 4’,’example01.html’);
d.add(8,1,’Node 1.2’,’example01.html’);
d.add(9,0,’My Pictures’,’example01.html’,’Pictures I\’ve taken over the years’,’’,’’,’img/imgfolder.gif’);
d.add(10,9,’The trip to Iceland’,’example01.html’,’Pictures of Gullfoss and Geysir’);
d.add(11,9,’Mom\’s birthday’,’example01.html’);
d.add(12,0,’Recycle Bin’,’example01.html’,’’,’’,’img/trash.gif’);
document.write(d);
//-->
</script>
d.add(0,-1,’My example tree’);
這一句為樹添加了一個(gè)根節(jié)點(diǎn)，顯示名稱為’My example tree’ d.add(1,0,’Node 1’,’example01.html’);
這一句在樹的根節(jié)點(diǎn)下面添加了一個(gè)子節(jié)點(diǎn)。（d.add（）方法的參數(shù)具體含義可參見api.html文件）
常用的：
第一個(gè)參數(shù)，表示當(dāng)前節(jié)點(diǎn)的ID
第二個(gè)參數(shù)，表示當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)的ID,根節(jié)點(diǎn)的值為 -1
第三個(gè)參數(shù)，節(jié)點(diǎn)要顯示的文字
第四個(gè)參數(shù)，節(jié)點(diǎn)的Url
第五個(gè)參數(shù)，鼠標(biāo)移至該節(jié)點(diǎn)時(shí)節(jié)點(diǎn)的Title
第六個(gè)參數(shù)，節(jié)點(diǎn)的target
第七個(gè)參數(shù)，用做節(jié)點(diǎn)的圖標(biāo),節(jié)點(diǎn)沒有指定圖標(biāo)時(shí)使用默認(rèn)值
第八個(gè)參數(shù)，用做節(jié)點(diǎn)打開的圖標(biāo),節(jié)點(diǎn)沒有指定圖標(biāo)時(shí)使用默認(rèn)值
第九個(gè)參數(shù)，判斷節(jié)點(diǎn)是否打開
使用實(shí)例大家可參照 www.amyou.cn 的樹型菜單
附 rlog翻譯：
屬性菜單使用說明
函數(shù)
add()
向樹里添加一個(gè)節(jié)點(diǎn)
只能在樹被創(chuàng)建之前調(diào)用.
必須 id, pid, name
參數(shù)
名字 類型 描述
id Number 唯一的ID號
pid Number 判定父節(jié)點(diǎn)的數(shù)字,根節(jié)點(diǎn)的值為 -1
name String 節(jié)點(diǎn)的文本標(biāo)簽
url String 節(jié)點(diǎn)的Url
title String 節(jié)點(diǎn)的Title
target String 節(jié)點(diǎn)的target
icon String 用做節(jié)點(diǎn)的圖標(biāo),節(jié)點(diǎn)沒有指定圖標(biāo)時(shí)使用默認(rèn)值
iconOpen String 用做節(jié)點(diǎn)打開的圖標(biāo),節(jié)點(diǎn)沒有指定圖標(biāo)時(shí)使用默認(rèn)值
open Boolean 判斷節(jié)點(diǎn)是否打開
例子
mytree.add(1, 0, ’My node’, ’node.html’, ’node title’, ’mainframe’, ’img/musicfolder.gif’);
openAll()
打開所有節(jié)點(diǎn)
可在樹被創(chuàng)建以前或以后調(diào)用.
例子
mytree.openAll();
closeAll()
關(guān)閉所有節(jié)點(diǎn)
可在樹被創(chuàng)建以前或以后調(diào)用.
例子
mytree.closeAll();
openTo()
Opens the tree to a certain node and can also select the node.
只能在樹被創(chuàng)建以后調(diào)用..
參數(shù)
名字 類型 描述
id Number 節(jié)點(diǎn)唯一的ID號
select Boolean 判斷節(jié)點(diǎn)是否被選擇
例子
mytree.openTo(4, true);
配置
變量 類型 默認(rèn)值 描述
target String true 所有節(jié)點(diǎn)的target
folderLinks Boolean true 文件夾可鏈接
useSelection Boolean true 節(jié)點(diǎn)可被選擇(高亮)
useCookies Boolean true 樹可以使用cookies記住狀態(tài)
useLines Boolean true 創(chuàng)建帶線的樹
useIcons Boolean true 創(chuàng)建帶有圖標(biāo)的樹
useStatusText Boolean false 用節(jié)點(diǎn)名替代顯示在狀態(tài)欄的節(jié)點(diǎn)url
closeSameLevel Boolean false 只有一個(gè)有父級的節(jié)點(diǎn)可以被展開,當(dāng)這個(gè)函數(shù)可用時(shí)openAll() 和 closeAll() 函數(shù)將不可用
inOrder Boolean false 如果父級節(jié)點(diǎn)總是添加在子級節(jié)點(diǎn)之前,使用這個(gè)參數(shù)可以加速菜單顯示.
例子
mytree.config.target = "mytarget";
寫到這里捎帶說一下，這幾天我研究了一下 extjs里邊的樹型菜單，功能非常強(qiáng)大，但如果構(gòu)建一個(gè)簡單的網(wǎng)頁上的樹型菜單還是dtree方便多了。
作者：呂海鵬
來自：www.DeepTeach.com
更新日志:
2007-10-22 v0.1 初稿完成；
參考文檔:
相關(guān)文檔:
致謝：
dowhatyouwant ：無限級可刷新Js樹型菜單dTree（http://5key.net/blog/article.asp?id=315）
rlog ：翻譯資料 http://www.box.net/shared/26afylzzcb (網(wǎng)絡(luò)文件夾,無毒)
討論網(wǎng)址：bbs.DeepTeach.com
該文章轉(zhuǎn)載自：http://www.deepteac
