快捷導(dǎo)航

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

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

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

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