2019獨角獸企業(yè)重金招聘Python工程師標準>>>

JS組件dtree輕松實現(xiàn)樹型菜單：詳細介紹應(yīng)用dtree構(gòu)建一個JavaScript樹型菜單及其中參數(shù)配置說明

這幾天寫個網(wǎng)站，用了一個JavaScript寫的樹型菜單，有網(wǎng)友問我要這個代碼，很奇怪，了解一下，原來網(wǎng)上很多文章都在討論Js樹型菜單，看了幾個實例，發(fā)現(xiàn)確實沒有我用的這個好，因此baidu了一下，略作整理，希望大家不要浪費無用功。
（網(wǎng)上很多人都將dtree改頭換面加以演繹，造成了海量垃圾，這里希望大家尊重他人勞動成果，保留版權(quán)信息，再進行完善的話，還一個潔凈環(huán)境，人人如此，我們就不會在學習中走很多彎路了，當你能這樣做了我們就慢慢成為一個真正的程序員了）。??
首先說我用的這個Js樹型菜單，不是我做的是一個老外寫的---dtree。??
http://www.itstudy.cn/www/ArticleContent.asp?ID=5
這個無限級可刷新Js樹型菜單 dTree??
1、可設(shè)置無限級菜單??
2、不必使用框架??
3、可刷新，多頁面內(nèi)跳轉(zhuǎn)不會影響菜單??
4、可限級創(chuàng)造子樹??
5、支持目前主流瀏覽器：IE5，6，7??
6、節(jié)點圖片可設(shè)置切換圖片效果??

下載url：http://www.destroydrop.com/javascripts/tree/??
看看最下邊的時間，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>???

必須引用的兩個文件。??

生成樹 節(jié)點的代碼：??
????? <script type="text/javascript">???
???????? <!--???

???????? d = new dTree(’d’);//創(chuàng)建一個樹對象???

???????? d.add(0,-1,’My example tree’); //創(chuàng)建一個樹對象???
???????? 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’);??
????? 這一句為樹添加了一個根節(jié)點，顯示名稱為’My example tree’???? d.add(1,0,’Node 1’,’example01.html’);??
???? 這一句在樹的根節(jié)點下面添加了一個子節(jié)點。（d.add（）方法的參數(shù)具體含義可參見api.html文件）???????
常用的：???????
第一個參數(shù)，表示當前節(jié)點的ID???????
第二個參數(shù)，表示當前節(jié)點的父節(jié)點的ID,根節(jié)點的值為 -1??????
第三個參數(shù)，節(jié)點要顯示的文字???????
第四個參數(shù)，節(jié)點的Url???????
第五個參數(shù)，鼠標移至該節(jié)點時節(jié)點的Title???????
第六個參數(shù)，節(jié)點的target??
第七個參數(shù)，用做節(jié)點的圖標,節(jié)點沒有指定圖標時使用默認值??
第八個參數(shù)，用做節(jié)點打開的圖標,節(jié)點沒有指定圖標時使用默認值??
第九個參數(shù)，判斷節(jié)點是否打開??

使用實例大家可參照 www.amyou.cn 的樹型菜單??

附 rlog翻譯：

屬性菜單使用說明???

函數(shù)???

add()???
向樹里添加一個節(jié)點???
只能在樹被創(chuàng)建之前調(diào)用.???
必須 id, pid, name???
參數(shù)???
名字???? 類型???? 描述???
id???? Number???? 唯一的ID號???
pid???? Number???? 判定父節(jié)點的數(shù)字,根節(jié)點的值為 -1???
name???? String???? 節(jié)點的文本標簽???
url???? String???? 節(jié)點的Url???
title???? String???? 節(jié)點的Title???
target???? String???? 節(jié)點的target???
icon???? String???? 用做節(jié)點的圖標,節(jié)點沒有指定圖標時使用默認值???
iconOpen???? String???? 用做節(jié)點打開的圖標,節(jié)點沒有指定圖標時使用默認值???
open???? Boolean???? 判斷節(jié)點是否打開???
例子???
mytree.add(1, 0, ’My node’, ’node.html’, ’node title’, ’mainframe’, ’img/musicfolder.gif’);???

openAll()???
打開所有節(jié)點???
可在樹被創(chuàng)建以前或以后調(diào)用.???
例子???
mytree.openAll();???

closeAll()???
關(guān)閉所有節(jié)點???
可在樹被創(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é)點唯一的ID號???
select???? Boolean???? 判斷節(jié)點是否被選擇???
例子???
mytree.openTo(4, true);???

配置???
變量???? 類型???? 默認值???? 描述???
target???? String???? true???? 所有節(jié)點的target???
folderLinks???? Boolean???? true???? 文件夾可鏈接???
useSelection???? Boolean???? true???? 節(jié)點可被選擇(高亮)???
useCookies???? Boolean???? true???? 樹可以使用cookies記住狀態(tài)???
useLines???? Boolean???? true???? 創(chuàng)建帶線的樹???
useIcons???? Boolean???? true???? 創(chuàng)建帶有圖標的樹???
useStatusText???? Boolean???? false???? 用節(jié)點名替代顯示在狀態(tài)欄的節(jié)點url???
closeSameLevel???? Boolean???? false???? 只有一個有父級的節(jié)點可以被展開,當這個函數(shù)可用時openAll() 和 closeAll() 函數(shù)將不可用???
inOrder???? Boolean???? false???? 如果父級節(jié)點總是添加在子級節(jié)點之前,使用這個參數(shù)可以加速菜單顯示.???
例子???
mytree.config.target = "mytarget";??
??

寫到這里捎帶說一下，這幾天我研究了一下 extjs里邊的樹型菜單，功能非常強大，但如果構(gòu)建一個簡單的網(wǎng)頁上的樹型菜單還是dtree方便多了。

轉(zhuǎn)載于:https://my.oschina.net/u/225677/blog/88914

總結(jié)

以上是生活随笔為你收集整理的dtree.js树的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。