快捷導(dǎo)航

用dtree實(shí)現(xiàn)樹(shù)形菜單 dtree使用說(shuō)明

更新時(shí)間：2011年10月17日 14:59:33 作者：

本節(jié)主要介紹用dtree來(lái)實(shí)現(xiàn)樹(shù)形的菜單，需要的朋友可以參考下。

準(zhǔn)備工作：
請(qǐng)從腳本之家http://www.dbjr.com.cn/jiaoben/31974.html下載dtree.zip文件
dtree.zip壓縮包介紹：
dtree是一個(gè)由JavaScript編寫(xiě)成的簡(jiǎn)單的樹(shù)形菜單組件，目前免費(fèi)并且開(kāi)源。
目前有很多的樹(shù)形菜單組件(比如ext)，dtree是一種簡(jiǎn)單易懂的js組件，
不需要復(fù)雜的操作即可生產(chǎn)，同時(shí)支持動(dòng)態(tài)從數(shù)據(jù)庫(kù)引入數(shù)據(jù)
解壓后有以下幾部分：
img文件夾：包含樹(shù)形菜單顯示需要的圖標(biāo)
api.html ：作者寫(xiě)的dtree幫助文檔　　
dtree.css：樹(shù)形菜單的樣式
dtree.js ： js核心文件，代碼都在其中
example01.html：樹(shù)形菜單實(shí)例 dtree主要方法介紹：
dtree主要方法介紹：
add(parameters)：添加一個(gè)樹(shù)節(jié)點(diǎn)，實(shí)際參數(shù)有9個(gè)add(id,pid,name,url,title,target,icon,iconOpen,open);
位置參數(shù)別名類(lèi)型功能
1 id int 節(jié)點(diǎn)自身的id(唯一)
2 pid int 節(jié)點(diǎn)的父節(jié)點(diǎn)id
3 name string 節(jié)點(diǎn)顯示在頁(yè)面上的名稱(chēng)
4 url string 節(jié)點(diǎn)的鏈接地址
5 title string 鼠標(biāo)放在節(jié)點(diǎn)上顯示的提示信息
6 target string 節(jié)點(diǎn)鏈接所打開(kāi)的目標(biāo)frame
7 icon string 節(jié)點(diǎn)關(guān)閉狀態(tài)時(shí)顯示的圖標(biāo)
8 iconOpen string 節(jié)點(diǎn)打開(kāi)狀態(tài)時(shí)顯示的圖標(biāo)
9 open bool 節(jié)點(diǎn)第一次加載是否打開(kāi)
注：dtree.js文件中是一些默認(rèn)圖片的路徑，可以自己配置圖片和路徑，我下載的在44~57行
openAll()打開(kāi)全部節(jié)點(diǎn)，可在樹(shù)對(duì)象創(chuàng)建前或創(chuàng)建后調(diào)用
closeAll()關(guān)閉全部節(jié)點(diǎn)，可在樹(shù)對(duì)象創(chuàng)建前或創(chuàng)建后調(diào)用
openTo(id,select)打開(kāi)指定id的節(jié)點(diǎn)，可以傳兩個(gè)參數(shù)：
id 指定需要打開(kāi)的節(jié)點(diǎn)的唯一id
　　select 是否讓該節(jié)點(diǎn)處于選中狀態(tài)
config配置
變量類(lèi)型默認(rèn)值描述
target string 所有節(jié)點(diǎn)的target
folderLinks bool true 文件夾可被鏈接
useSelection bool true 節(jié)點(diǎn)可被選擇高亮
useCookies bool true 樹(shù)可以使用cookie記住狀態(tài)
useLines bool true 創(chuàng)建帶結(jié)構(gòu)連接線的樹(shù)
useIcons bool true 創(chuàng)建帶有圖表的樹(shù)
useStatusText bool false 用節(jié)點(diǎn)名替代顯示在狀態(tài)欄的節(jié)點(diǎn)url
closeSameLevel bool false 同級(jí)節(jié)點(diǎn)只允許一個(gè)節(jié)點(diǎn)處于打開(kāi)狀態(tài)
inOrder bool false 加速父節(jié)點(diǎn)樹(shù)的顯示
例如：tree.config.closeSameLevel=true;表示打開(kāi)某級(jí)節(jié)點(diǎn)時(shí)，該級(jí)其他處于打開(kāi)狀態(tài)的同級(jí)節(jié)點(diǎn)會(huì)被關(guān)閉
示例代碼：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
<title>Tree</title> 
<link rel="StyleSheet" href="dtree.css" type="text/css" /><!-- 引入css樣式表 --> 
<script type="text/javascript" src="dtree.js"></script><!-- 引入js腳本 --> 
</head> 
<body> 
<div class="dtree"><!--創(chuàng)建一個(gè)div層，指定class為“dtree”，此時(shí)該層就引用了dtree的樣式 --> 
<script type="text/javascript"> 
d = new dTree('d');//new一個(gè)樹(shù)對(duì)象 
//設(shè)置樹(shù)的節(jié)點(diǎn)及其相關(guān)屬性 
d.add(0,-1,'My example tree'); 
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'); 
//config配置，設(shè)置文件夾不能被鏈接，即有子節(jié)點(diǎn)的不能被鏈接。 
d.config.folderLinks=false; 
document.write(d); 
</script> 
</div> 
</body> 
</html> 