?? javascript樹型菜單 dtree.txt
字號:
摘要:詳細介紹應用dtree構建一個JavaScript樹型菜單及其中參數(shù)配置說明
這幾天寫了個網站www.aatii.cn,用了一個JavaScript寫的樹型菜單,有網友問我要這個代碼,很奇怪,了解一下,原來網上很多文章都在討論Js樹型菜單,看了幾個實例,發(fā)現(xiàn)確實沒有我用的這個好,因此baidu了一下,略作整理,希望大家不要浪費無用功。
(網上很多人都將dtree改頭換面加以演繹,造成了海量垃圾,這里希望大家尊重他人勞動成果,保留版權信息,再進行完善的話,還一個潔凈環(huán)境,人人如此,我們就不會在學習中走很多彎路了,當你能這樣做了 我們就慢慢成為一個真正的程序員了)。
首先說我用的這個Js樹型菜單,不是我做的是一個老外寫的---dtree。
這個無限級可刷新Js樹型菜單 dTree
1、可設置無限級菜單
2、不必使用框架
3、可刷新,多頁面內跳轉不會影響菜單
4、可限級創(chuàng)造子樹
5、支持目前主流瀏覽器:IE5,6,7
6、節(jié)點圖片可設置切換圖片效果
下載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)建之前調用.
必須 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)建以前或以后調用.
例子
mytree.openAll();
closeAll()
關閉所有節(jié)點
可在樹被創(chuàng)建以前或以后調用.
例子
mytree.closeAll();
openTo()
Opens the tree to a certain node and can also select the node.
只能在樹被創(chuàng)建以后調用..
參數(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里邊的樹型菜單,功能非常強大,但如果構建一個簡單的網頁上的樹型菜單還是dtree方便多了。
作者:呂海鵬
來自:www.DeepTeach.com
該文章轉載自:http://www.deepteach.com/www1/ArticleContent.asp?ID=133
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -