JS组件dtree轻松实现树型菜单

这几天写个网站，用了一个JavaScript写的树型菜单，有网友问我要这个代码，很奇怪，了解一下，原来网上很多文章都在讨论Js树型菜单，看了几个实例，发现确实没有我用的这个好，因此baidu了一下，略作整理，希望大家不要浪费无用功。（网上很多人都将dtree改头换面加以演绎，造成了海量垃圾，这里希望大家尊重他人劳动成果，保留版权信息，再进行完善的话，还一个洁净环境，人人如此，我们就不会在学习中走很多弯路了，当你能这样做了我们就慢慢成为一个真正的程序员了）。
首先说我用的这个Js树型菜单，不是我做的是一个老外写的---dtree。

这个无限级可刷新Js树型菜单dTree
　1、可设置无限级菜单
　2、不必使用框架
　3、可刷新，多页面内跳转不会影响菜单
　4、可限级创造子树
　5、支持目前主流浏览器：IE5，6，7
　6、节点图片可设置切换图片效果


下载url：http://www.destroydrop.com/javascripts/tree/
看看最下边的时间，2003GeirLandro人家就写出来了，俺现在才用（佩服）

解压缩dtree.zip包。
dtree目录下包括这些文件：example01.html、dtree.js、api.html、dtree.css和img目录
注意：除了api.html之外，其它的文件都是必须拷贝的。api.html是dtree的函数介绍。

打开example01.html文件

<linkrel="StyleSheet"href="css/dtree.css"type="text/css"/>
<scripttype="text/javascript"src="js/dtree.js"></script>

必须引用的两个文件。

生成树节点的代码：
<scripttype="text/javascript">
<!--

d=newdTree(’d’);//创建一个树对象

d.add(0,-1,’Myexampletree’);//创建一个树对象
d.add(1,0,’Node1’,’example01.html’);
d.add(2,0,’Node2’,’example01.html’);
d.add(3,1,’Node1.1’,’example01.html’);
d.add(4,0,’Node3’,’example01.html’);
d.add(5,3,’Node1.1.1’,’example01.html’);
d.add(6,5,’Node1.1.1.1’,’example01.html’);
d.add(7,0,’Node4’,’example01.html’);
d.add(8,1,’Node1.2’,’example01.html’);
d.add(9,0,’MyPictures’,’example01.html’,’PicturesI\’vetakenovertheyears’,’’,’’,’img/imgfolder.gif’);
d.add(10,9,’ThetriptoIceland’,’example01.html’,’PicturesofGullfossandGeysir’);
d.add(11,9,’Mom\’sbirthday’,’example01.html’);
d.add(12,0,’RecycleBin’,’example01.html’,’’,’’,’img/trash.gif’);

document.write(d);

//-->
</script>

d.add(0,-1,’Myexampletree’);
这一句为树添加了一个根节点，显示名称为’Myexampletree’d.add(1,0,’Node1’,’example01.html’);
这一句在树的根节点下面添加了一个子节点。（d.add（）方法的参数具体含义可参见api.html文件）
常用的：
第一个参数，表示当前节点的ID
第二个参数，表示当前节点的父节点的ID,根节点的值为-1
第三个参数，节点要显示的文字
第四个参数，节点的Url
第五个参数，鼠标移至该节点时节点的Title
第六个参数，节点的target
第七个参数，用做节点的图标,节点没有指定图标时使用默认值
第八个参数，用做节点打开的图标,节点没有指定图标时使用默认值
第九个参数，判断节点是否打开

使用实例大家可参照www.amyou.cn的树型菜单

附rlog翻译：

属性菜单使用说明

函数

add()
向树里添加一个节点
只能在树被创建之前调用.
必须id,pid,name
参数
名字类型描述
idNumber唯一的ID号
pidNumber判定父节点的数字,根节点的值为-1
nameString节点的文本标签
urlString节点的Url
titleString节点的Title
targetString节点的target
iconString用做节点的图标,节点没有指定图标时使用默认值
iconOpenString用做节点打开的图标,节点没有指定图标时使用默认值
openBoolean判断节点是否打开
例子
mytree.add(1,0,’Mynode’,’node.html’,’nodetitle’,’mainframe’,’img/musicfolder.gif’);

openAll()
打开所有节点
可在树被创建以前或以后调用.
例子
mytree.openAll();

closeAll()
关闭所有节点
可在树被创建以前或以后调用.
例子
mytree.closeAll();

openTo()
Opensthetreetoacertainnodeandcanalsoselectthenode.
只能在树被创建以后调用..
参数
名字类型描述
idNumber节点唯一的ID号
selectBoolean判断节点是否被选择
例子
mytree.openTo(4,true);

配置
变量类型默认值描述
targetStringtrue所有节点的target
folderLinksBooleantrue文件夹可链接
useSelectionBooleantrue节点可被选择(高亮)
useCookiesBooleantrue树可以使用cookies记住状态
useLinesBooleantrue创建带线的树
useIconsBooleantrue创建带有图标的树
useStatusTextBooleanfalse用节点名替代显示在状态栏的节点url
closeSameLevelBooleanfalse只有一个有父级的节点可以被展开,当这个函数可用时openAll()和closeAll()函数将不可用
inOrderBooleanfalse如果父级节点总是添加在子级节点之前,使用这个参数可以加速菜单显示.
例子
mytree.config.target="mytarget";