JS組件dtree實(shí)現(xiàn)樹型菜單的實(shí)例分享

2011/6/21 11:17:06  出處：本站   人氣：459次    字號：小  中  大

本文跟大家一起分享到的是關(guān)于JS組件dtree輕松實(shí)現(xiàn)樹型菜單的實(shí)例，希望能給大家?guī)�來幫助或啟發(fā)。

首先說我用的這個Js樹型菜單，不是我做的是一個老外寫的---dtree。  

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

使用實(shí)例大家可參照 www.amyou.cn 的樹型菜單  

附 rlog翻譯： 

屬性菜單使用說明   

函數(shù)   

add()   
向樹里添加一個節(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)時使用默認(rèn)值   
iconOpen    String    用做節(jié)點(diǎn)打開的圖標(biāo),節(jié)點(diǎn)沒有指定圖標(biāo)時使用默認(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    只有一個有父級的節(jié)點(diǎn)可以被展開,當(dāng)這個函數(shù)可用時openAll() 和 closeAll() 函數(shù)將不可用   
inOrder    Boolean    false    如果父級節(jié)點(diǎn)總是添加在子級節(jié)點(diǎn)之前,使用這個參數(shù)可以加速菜單顯示.   
例子   
mytree.config.target = "mytarget";  
  

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