JS组件dtree轻松实现树型菜单
摘要：详细介绍应用dtree构建一个JavaScript树型菜单及其中参数配置说明

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

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


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

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

打开example01.html文件 

    <link rel="StyleSheet" href="css/dtree.css" type="text/css" />   
    <script type="text/javascript" src="js/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(0,-1,’My example tree’);  
     这一句为树添加了一个根节点，显示名称为’My example tree’    d.add(1,0,’Node 1’,’example01.html’);  
    这一句在树的根节点下面添加了一个子节点。（d.add（）方法的参数具体含义可参见api.html文件）       
常用的：       
第一个参数，表示当前节点的ID       
第二个参数，表示当前节点的父节点的ID,根节点的值为 -1      
第三个参数，节点要显示的文字       
第四个参数，节点的Url       
第五个参数，鼠标移至该节点时节点的Title