今天在做通訊錄的功能模塊，因?yàn)橐脭?shù)展現(xiàn)，在網(wǎng)上搜了一下有關(guān)于這方面的資料，現(xiàn)轉(zhuǎn)貼來(lái)看看。
dtree動(dòng)態(tài)樹(shù)+Javascript右鍵菜單（一）
1、從網(wǎng)上下載dtree控件。（好多地方都有的哦：P）
2、在Jbuilder中新建Web應(yīng)用，命名為T(mén)reeLearing
3、解壓縮dtree.rar包。
把dtree目錄拷貝至TreeLearing應(yīng)用中。
dtree目錄下包括這些文件：example01.html 、 dtree.js 、 api.html 、 dtree.css 和img目錄
注意：除了api.html之外，其它的文件都是必須拷貝的。只有這個(gè)api.html是對(duì)dtree控件的函數(shù)介紹。
4、復(fù)制example01.html，并把粘貼后的文件重命名為T(mén)ree.jsp
：） （保留原來(lái)的文件，以備參考是個(gè)好習(xí)慣哦~~）
注意dtree目錄下的文件結(jié)構(gòu)不要改變，否則樹(shù)就不會(huì)正常顯示
5、在Web應(yīng)用中指定首頁(yè)為T(mén)ree.jsp頁(yè)面。
6、Tree.jsp中的代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<html>
<head>
<title>Destroydrop » Javascripts » Tree</title>
<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>
</head>
<body>
<h1><a href="/">Destroydrop</a> » <a href="/javascripts/">Javascripts</a> » <a href="/javascripts/tree/">Tree</a></h1>
<h2>Example</h2>
<div class="dtree">
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
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');
document.write(d);
//-->
</script>
</div>
<p><a href="mailto:drop@destroydrop.com">©2002-2003 Geir Landrö</a></p>
</body>
</html>
7、刪除紫紅色部分的代碼，因?yàn)椴恍枰丁?br>8、注意看綠色和藍(lán)色部分的代碼，這才是真正為樹(shù)添加節(jié)點(diǎn)的部分。
d.add(0,-1,'My example tree');
這一句為樹(shù)添加了一個(gè)根節(jié)點(diǎn)，顯示名稱為'My example tree'
d.add(1,0,'Node 1','example01.html');
這一句在樹(shù)的根節(jié)點(diǎn)下面添加了一個(gè)子節(jié)點(diǎn)。（d.add（）方法的參數(shù)具體含義可參見(jiàn)api.html文件）
常用的：
第一個(gè)參數(shù)，表示當(dāng)前節(jié)點(diǎn)的ID
第二個(gè)參數(shù)，表示當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)的ID
第三個(gè)參數(shù)，節(jié)點(diǎn)要顯示的文字
第四個(gè)參數(shù)，點(diǎn)擊該節(jié)點(diǎn)的超鏈接（注意也可以是某個(gè)servlet或是struts應(yīng)用中的某個(gè).do請(qǐng)求）
第五個(gè)參數(shù)，鼠標(biāo)移至該節(jié)點(diǎn)時(shí)顯示的文字
第六個(gè)參數(shù)，指定點(diǎn)擊該節(jié)點(diǎn)時(shí)在哪個(gè)楨中打開(kāi)超鏈接
……
9、運(yùn)行應(yīng)用程序。可以看到一棵漂亮的樹(shù)。
原貼地址http://minifishpingping.spaces.live.com/blog/cns!167be6972d4b3ac!139.entry
Dtree所引用的css
一：dtree.css
.dtree {//定義目錄樹(shù)節(jié)點(diǎn)的字體，字號(hào)，顏色
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #006600;
white-space: nowrap;
}
.dtree img {//定義選用節(jié)點(diǎn)圖標(biāo)的樣式，位置
border: 0px;
vertical-align: middle;
}
.dtree a {//
color: #006600;
text-decoration: none;
}
.dtree a.node, .dtree a.nodeSel {
white-space: nowrap;//表格隨著文字自動(dòng)伸展（如果未設(shè)置TD寬度，則noWrap屬性是起作用的；如果設(shè)置了TD寬度，則noWrap屬性是不起作用的。）
padding: 0px 0px 0px 0px;
}
.dtree a.node:hover, .dtree a.nodeSel:hover {
color: #006600;
text-decoration: none;
}
.dtree a.nodeSel {//節(jié)點(diǎn)選中后的節(jié)點(diǎn)背景顏色
background-color: #c0d2ec;
}
.dtree .clip {
overflow: hidden;
}
二：tree.css
body {SCROLLBAR-FACE-COLOR:#D2FFD2;
SCROLLBAR-HIGHLIGHT-COLOR: #8AA583;
SCROLLBAR-SHADOW-COLOR: #8AA583;
SCROLLBAR-3DLIGHT-COLOR: #ffffff;
SCROLLBAR-ARROW-COLOR: #8AA583;
SCROLLBAR-TRACK-COLOR: #E1FFE1;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
background-attachment: fixed;
//scroll : 背景圖像是隨對(duì)象內(nèi)容滾動(dòng)
//fixed : 背景圖像固定
background-repeat: no-repeat;
//background-repeat : repeat | no-repeat | repeat-x | repeat-y
//repeat : 背景圖像在縱向和橫向上平鋪
//no-repeat : 背景圖像不平鋪
//repeat-x : 背景圖像在橫向上平鋪
//repeat-y : 背景圖像在縱向平鋪
background-color: EFF7F7;
}
Dtree目錄樹(shù)的總結(jié)
一：函數(shù)1：頁(yè)面中tree.add(id,pid,name,url,title,target,icon,iconOpen,open);參數(shù)說(shuō)明：id ：節(jié)點(diǎn)自身的idpid ：節(jié)點(diǎn)的父節(jié)點(diǎn)的idname ：節(jié)點(diǎn)顯示在頁(yè)面上的名稱url ：節(jié)點(diǎn)的鏈接地址title ：鼠標(biāo)放在節(jié)點(diǎn)上所出現(xiàn)的提示信息target ：節(jié)點(diǎn)鏈接所打開(kāi)的目標(biāo)frame（如框架目標(biāo)mainFrame或是_blank,_self之類）icon ：節(jié)點(diǎn)關(guān)閉時(shí)的顯示圖片的路徑iconOpen：節(jié)點(diǎn)打開(kāi)時(shí)的顯示圖片的路徑open ：布爾型，節(jié)點(diǎn)是否打開(kāi)（默認(rèn)為false）注：open項(xiàng)：頂級(jí)節(jié)點(diǎn)一般采用true，即pid是－1的節(jié)點(diǎn)2：dtree.js文件中約87－113行是一些默認(rèn)圖片的路徑，注意要指對(duì)。二：頁(yè)面中的書(shū)寫(xiě)1：默認(rèn)值的書(shū)寫(xiě)規(guī)則（從左至右，依次省略）即 tree.add(id,pid,name,url);后面5個(gè)參數(shù)可以省略2：有間隔時(shí)的默認(rèn)值（如存在第6個(gè)參數(shù)，但第5個(gè)參數(shù)想用默認(rèn)值）即 tree.add(id,pid,name,url,"",target);必須這樣寫(xiě)其他 tree.add(id,pid,name,url,"","","","",true);3：樣式表（1）：可以將dtree.css中的樣式附加到你的應(yīng)用中的主css中，如a.css（2）：也可以同時(shí)引用dtree.css與a.css兩個(gè)文件，但前提條件是兩個(gè)css文件中不能有重復(fù)的樣式<link href="/jingjindatabase/pub/css/a.css" rel="stylesheet" type="text/css" />
<link href="/jingjindatabase/pub/css/dtree.css" rel="stylesheet" type="text/css" />
4：頁(yè)面代碼書(shū)寫(xiě)的位置是：一般寫(xiě)在表格的td之中<script type="text/javascript" src="/myMobanGis/pub/js/dtree.js"></script>
<script type="text/javascript">
tree = new dTree('tree');
tree.add("1","-1","京津","","","","","",true);
tree.add("11","1","A","","","","","",true);
tree.add("110","11","A-1","content.jsp?moduleName=XXX","","mainFrame");
tree.add("111","11","A-2","javascript:void(0)","","鏈接在哪里顯示");
tree.add("112","11","A-3","javascript:void(0)","","mainFrame");
tree.add("113","11","A-4","/.jsp","","mainFrame");
tree.add("114","11","A-5","/.jsp","","mainFrame");
tree.add("115","11","A-6","/.jsp","","mainFrame");
tree.add("12","1","B","","","","","",true);
tree.add("121","12","B-1","javascript:調(diào)用本頁(yè)內(nèi)的js函數(shù)","","mainFrame");
tree.add("122","12","B-2");tree.add("13","1","C","","","","","",true);
tree.add("131","13","C-1","javascript:void(0)","","mainFrame");
tree.add("132","13","C-2","javascript:void(0)","","mainFrame");
tree.add("133","13","C-3","javascript:void(0)","","mainFrame");tree.add("14","1","D","","","","","",true);
tree.add("141","14","D-1","javascript:void(0)","","mainFrame");
document.write(tree);
</script>
說(shuō)明：這是靜態(tài)的代碼，動(dòng)態(tài)的可用循環(huán)加入。
三：css文件的注解
1:dtree.css
.dtree {//定義目錄樹(shù)節(jié)點(diǎn)的字體，字號(hào)，顏色
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #006600;
white-space: nowrap;
}
.dtree img {//定義選用節(jié)點(diǎn)圖標(biāo)的樣式，位置
border: 0px;
vertical-align: middle;
}
.dtree a {//
color: #006600;
text-decoration: none;
}
.dtree a.node, .dtree a.nodeSel {
white-space: nowrap;
padding: 0px 0px 0px 0px;
}
.dtree a.node:hover, .dtree a.nodeSel:hover {
color: #006600;
text-decoration: none;
}
.dtree a.nodeSel {
background-color: #c0d2ec;
}
.dtree .clip {
overflow: hidden;
}
原貼地址http://blog.sina.com.cn/u/4ae9618f010006y3
posted on 2007-04-11 17:39
lansky07 閱讀(2664)
評(píng)論(3) 編輯 收藏