dTree--最强大的树型菜单

dTree目录树的总结

?????????一：函数

????????????????1：页面中
??????????????????????tree.add(id,pid,name,url,title,target,icon,iconOpen,open);
???????????????????? 参数说明：
??????????????????????????????????????????????id???????? ：节点自身的id
????????????????????????????????????????????? pid?????? ：节点的父节点的id
????????????????????????????????????????????? name??? ：节点显示在页面上的名称
??????????????????????????????????????????????url??????? ：节点的链接地址
????????????????????????????????????????????? title????? ：鼠标放在节点上所出现的提示信息
????????????????????????????????????????????? target?? ：节点链接所打开的目标frame(如框架目标mainFrame,_blank,_self 类)
??????????????????????????????????????????? ? icon????? ：节点关闭时的显示图片的路径
??????????????????????????????????????????? ? iconOpen：节点打开时的显示图片的路径
????????????????????????????????????????????? open??? ：布尔型，节点是否打开（默认为false）
???????????????????注：open项：顶级节点一般采用true，即pid是－1的节点

??????????????????2：dtree.js文件中
???????????????????????????????????????????? 约87－113行是一些默认图片的路径，注意要指对。

?

二：页面中的书写
????????? 1：默认值的书写规则（从左至右，依次省略）
????????????????????????? 即 tree.add(id,pid,name,url);后面5个参数可以省略
????????? 2：有间隔时的默认值（如存在第6个参数，但第5个参数想用默认值）
???????????????????????? 即 tree.add(id,pid,name,url,"",target);必须这样写
?????????3：样式表
?????????? （1）：可以将dtree.css中的样式附加到你的应用中的主css中，如a.css
?????????? （2）：也可以同时引用dtree.css与a.css两个文件，但前提条件是两个css文件中不能有重复的样式

?

显示效果图：

?

生成树 节点的代码：?

<link rel="StyleSheet" href="<%=basePath%>/include/css/dtree.css" type="text/css" />

<script type="text/javascript" src="<%=basePath%>/include/scripts/dtree.js"></script>

?<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>??

?上面代码效果：

说明：这是静态的代码，动态的可用循环加入 d.add(id,pid,name,url,"","","","",true);????? for(int i=0;i<list.size();i++){?????????????? d.add(id,pid,name,url,"","","","",true);??????}??????document.write(d);