dTree的分析和二次开发（上）
dTree是一个免费的JavaScript树形菜单，使用简单，界面制作的也很专业。
dtree树形菜单
所谓“兵无常势，水无常形”，不同的项目需求，造成菜单树的各种变化，因此在介绍dTree的同时，本文着重讲述如何改造dTree，以达到为不同项目所用的目的。
dTree 分析
dTree的使用非常简单，在下载的dTree压缩文件中（2.05），要用的只有三个：
1. dtree.js : dtree功能脚本
2. dtree.css : 样式文件
3. img文件夹 : 存放dtree使用的图标，参看下图：
dtree图标
很容易就可以编写出类似上面的dtree菜单树，源代码如下：
-
<html>
-
<head>
-
<link rel="StyleSheet" href="dtree.css" type="text/css" />
-
<script type="text/javascript" src="dtree.js"></script>
-
</head>
-
<body>
-
<script type= "text/javascript">
-
<!–
-
d = new dTree ( ‘d’ ); //创建树，名称为’d'（注意和树的对象变量名称要一致）
-
d. add ( 0, -1, ‘My example tree’ ); //在树中增加节点。节点id是0，父节点是-1(根节点)，节点文字’My example tree’
-
d. add ( 1, 0, ‘Node 1′, ‘default.html’ ); //根节点的子节点(父节点是0)，’default.html’表示节点链接(鼠标点击页面跳转url)
-
d. add ( 2, 0, ‘Node 2′, ‘default.html’ );
-
d. add ( 3, 1, ‘Node 1.1′, ‘default.html’ );
-
d. add ( 4, 0, ‘Node 3′, ‘default.html’ );
-
d. add ( 5, 3, ‘Node 1.1.1′, ‘default.html’ );
-
d. add ( 6, 5, ‘Node 1.1.1.1′, ‘default.html’ );
-
d. add ( 7, 0, ‘Node 4′, ‘default.html’ );
-
d. add ( 8, 1, ‘Node 1.2′, ‘default.html’ );
-
d. add ( 9, 0, ‘My Pictures’, ‘default.html’, ‘Pictures I\’ve taken over the years’, ”, ”, ‘img/imgfolder.gif’ ); //’Pictures I\’ve taken over the years’是链接title，指定图标
-
d. add ( 10, 9, ‘The trip to Iceland’, ‘default.html’, ‘Pictures of Gullfoss and Geysir’ );
-
d. add ( 11, 9, ‘Mom\’s birthday’, ‘default.html’ );
-
d. add ( 12, 0, ‘Recycle Bin’, ‘default.html’, ”, ”, ‘img/trash.gif’ );
-
document. write (d ); //输出dtree的html（显示）
-
//–>
-
</script>
-
</body>
-
</html>
分析dtree.js，在dTree中只有两个结构：”节点”和”树”，dTree的所有功能和构造都在于这两个结构的属性和行为中，Node比较简单，只包含节点的基本属性和一个构造方法，所以对dTree的分析和研究的重点可放在dTree结构中。
| Node |
|---|
|
Attributes(属性)
|
|
Operations(行为)
|
节点类图
树类图
提示：
鼠标移动到类图中的属性或方法上时，会显示详细信息。
dTree的工作原理
类似dTree这样的动态的客户端web插件，实现起来基本离不开xhtml和javascript，用一段简单的代码来探索一下dTree的工作原理：
-
<html>
-
<head>
-
<link rel="StyleSheet" href="dtree.css" type="text/css" />
-
<script type="text/javascript" src="dtree.js"></script>
-
</head>
-
<body>
-
<script type= "text/javascript">
-
<!--
-
d = new dTree ( 'd' ); //创建树，名称为'd'
-
d. add ( 0, -1, '根节点' );
-
d. add ( 1, 0, '节点 1', 'node1.html' );
-
d. add ( 2, 0, '节点 2', 'node2.html' );
-
d. add ( 3, 1, '节点 1.1', 'node1_1.html' );
-
d. add ( 4, 3, '节点 1.1.1', 'node1_1_1.html' );
-
document. write (d );
-
-
function show ( )
-
{
-
alert (d );
-
}
-
//-->
-
</script>
-
-
<input type="button" value="显示html" onclick="show()">
-
</body>
-
</html>
显示的“树”如下图：
点击下方的“显示html”按钮，会在alert对话框中显示整个树的html代码，整理后如下：
-
<div class="dtree">
-
<div class="dTreeNode">
-
<img id="id0" src="img/base.gif" alt="" />根节点 </a>
-
</div>
-
<div id="dd0" class="clip" style="display:block;">
-
<div class="dTreeNode">
-
<a href="javascript: d.o(1);"> <img id="jd1" src="img/minus.gif" alt="" /> </a>
-
<img id="id1" src="img/folderopen.gif" alt="" />
-
<a href="javascript: d.o(1);" class="node">节点 1 </a>
-
</div>
-
<div id="dd1" class="clip" style="display:block;">
-
<div class="dTreeNode">
-
<img src="img/line.gif" alt="" />
-
<a href="javascript: d.o(3);"> <img id="jd3" src="img/minusbottom.gif" alt="" /> </a>
-
<img id="id3" src="img/folderopen.gif" alt="" />
-
<a href="javascript: d.o(3);" class="node">节点 1.1 </a>
-
</div>
-
<div id="dd3" class="clip" style="display:block;">
-
<div class="dTreeNode">
-
<img src="img/line.gif" alt="" />
-
<img src="img/empty.gif" alt="" />
-
<img src="img/joinbottom.gif" alt="" />
-
<img id="id4" src="img/page.gif" alt="" />
-
<a id="sd4" class="node" href="node1_1_1.html" onclick="javascript: d.s(4);">节点 1.1.1 </a>
-
</div>
-
</div>
-
</div>
-
<div class="dTreeNode">
-
<img src="img/joinbottom.gif" alt="" />
-
<img id="id2" src="img/page.gif" alt="" />
-
<a id="sd2" class="node" href="node2.html" onclick="javascript: d.s(2);">节点 2 </a>
-
</div>
-
</div>
-
</div>
仔细观察，树中每个节点的html构造是相似的：
-
<!-- 根节点 -->
-
<div class="dTreeNode">
-
<img id="id0" src="img/base.gif" alt="" />根节点 </a>
-
</div>
-
<div id="dd0" class="clip" style="display:block;">
-
......
-
</div>
-
<!-- 节点 1 -->
-
<div class="dTreeNode">
-
<a href="javascript: d.o(1);"> <img id="jd1" src="img/minus.gif" alt="" /> </a>
-
<img id="id1" src="img/folderopen.gif" alt="" />
-
<a href="javascript: d.o(1);" class="node">节点 1 </a>
-
</div>
-
<div id="dd1" class="clip" style="display:block;">
-
......
-
</div>
-
<!-- 节点 1.1 -->
-
<div class="dTreeNode">
-
<img src="img/line.gif" alt="" />
-
<a href="javascript: d.o(3);"> <img id="jd3" src="img/minusbottom.gif" alt="" /> </a>
-
<img id="id3" src="img/folderopen.gif" alt="" />
-
<a href="javascript: d.o(3);" class="node">节点 1.1 </a>
-
</div>
-
<div id="dd3" class="clip" style="display:block;">
-
......
-
</div>
-
<!-- 节点 1.1.1 -->
-
<div class="dTreeNode">
-
<img src="img/line.gif" alt="" />
-
<img src="img/empty.gif" alt="" />
-
<img src="img/joinbottom.gif" alt="" />
-
<img id="id4" src="img/page.gif" alt="" />
-
<a id="sd4" class="node" href="node1_1_1.html" onclick="javascript: d.s(4);">节点 1.1.1 </a>
-
</div>
-
<!-- 节点 2 -->
-
<div class="dTreeNode">
-
<img src="img/joinbottom.gif" alt="" />
dTree是一个免费的JavaScript树形菜单，使用简单，界面制作的也很专业。
dtree树形菜单
所谓“兵无常势，水无常形”，不同的项目需求，造成菜单树的各种变化，因此在介绍dTree的同时，本文着重讲述如何改造dTree，以达到为不同项目所用的目的。
dTree 分析
dTree的使用非常简单，在下载的dTree压缩文件中（2.05），要用的只有三个：
1. dtree.js : dtree功能脚本
2. dtree.css : 样式文件
3. img文件夹 : 存放dtree使用的图标，参看下图：dtree图标
很容易就可以编写出类似上面的dtree菜单树，源代码如下：
-
<html>
-
<head>
-
<link rel="StyleSheet" href="dtree.css" type="text/css" />
-
<script type="text/javascript" src="dtree.js"></script>
-
</head>
-
<body>
-
<script type= "text/javascript">
-
<!–
-
d = new dTree ( ‘d’ ); //创建树，名称为’d'（注意和树的对象变量名称要一致）
-
d. add ( 0, -1, ‘My example tree’ ); //在树中增加节点。节点id是0，父节点是-1(根节点)，节点文字’My example tree’
-
d. add ( 1, 0, ‘Node 1′, ‘default.html’ ); //根节点的子节点(父节点是0)，’default.html’表示节点链接(鼠标点击页面跳转url)
-
d. add ( 2, 0, ‘Node 2′, ‘default.html’ );
-
d. add ( 3, 1, ‘Node 1.1′, ‘default.html’ );
-
d. add ( 4, 0, ‘Node 3′, ‘default.html’ );
-
d. add ( 5, 3, ‘Node 1.1.1′, ‘default.html’ );
-
d. add ( 6, 5, ‘Node 1.1.1.1′, ‘default.html’ );
-
d. add ( 7, 0, ‘Node 4′, ‘default.html’ );
-
d. add ( 8, 1, ‘Node 1.2′, ‘default.html’ );
-
d. add ( 9, 0, ‘My Pictures’, ‘default.html’, ‘Pictures I\’ve taken over the years’, ”, ”, ‘img/imgfolder.gif’ ); //’Pictures I\’ve taken over the years’是链接title，指定图标
-
d. add ( 10, 9, ‘The trip to Iceland’, ‘default.html’, ‘Pictures of Gullfoss and Geysir’ );
-
d. add ( 11, 9, ‘Mom\’s birthday’, ‘default.html’ );
-
d. add ( 12, 0, ‘Recycle Bin’, ‘default.html’, ”, ”, ‘img/trash.gif’ );
-
document. write (d ); //输出dtree的html（显示）
-
//–>
-
</script>
-
</body>
-
</html>
分析dtree.js，在dTree中只有两个结构：”节点”和”树”，dTree的所有功能和构造都在于这两个结构的属性和行为中，Node比较简单，只包含节点的基本属性和一个构造方法，所以对dTree的分析和研究的重点可放在dTree结构中。
Node Attributes(属性)Operations(行为)节点类图
树类图
提示：
鼠标移动到类图中的属性或方法上时，会显示详细信息。dTree的工作原理
类似dTree这样的动态的客户端web插件，实现起来基本离不开xhtml和javascript，用一段简单的代码来探索一下dTree的工作原理：
-
<html>
-
<head>
-
<link rel="StyleSheet" href="dtree.css" type="text/css" />
-
<script type="text/javascript" src="dtree.js"></script>
-
</head>
-
<body>
-
<script type= "text/javascript">
-
<!--
-
d = new dTree ( 'd' ); //创建树，名称为'd'
-
d. add ( 0, -1, '根节点' );
-
d. add ( 1, 0, '节点 1', 'node1.html' );
-
d. add ( 2, 0, '节点 2', 'node2.html' );
-
d. add ( 3, 1, '节点 1.1', 'node1_1.html' );
-
d. add ( 4, 3, '节点 1.1.1', 'node1_1_1.html' );
-
document. write (d );
-
-
function show ( )
-
{
-
alert (d );
-
}
-
//-->
-
</script>
-
-
<input type="button" value="显示html" onclick="show()">
-
</body>
-
</html>
显示的“树”如下图：
点击下方的“显示html”按钮，会在alert对话框中显示整个树的html代码，整理后如下：
-
<div class="dtree">
-
<div class="dTreeNode">
-
<img id="id0" src="img/base.gif" alt="" />根节点 </a>
-
</div>
-
<div id="dd0" class="clip" style="display:block;">
-
<div class="dTreeNode">
-
<a href="javascript: d.o(1);"> <img id="jd1" src="img/minus.gif" alt="" /> </a>
-
<img id="id1" src="img/folderopen.gif" alt="" />
-
<a href="javascript: d.o(1);" class="node">节点 1 </a>
-
</div>
-
<div id="dd1" class="clip" style="display:block;">
-
<div class="dTreeNode">
-
<img src="img/line.gif" alt="" />
-
<a href="javascript: d.o(3);"> <img id="jd3" src="img/minusbottom.gif" alt="" /> </a>
-
<img id="id3" src="img/folderopen.gif" alt="" />
-
<a href="javascript: d.o(3);" class="node">节点 1.1 </a>
-
</div>
-
<div id="dd3" class="clip" style="display:block;">
-
<div class="dTreeNode">
-
<img src="img/line.gif" alt="" />
-
<img src="img/empty.gif" alt="" />
-
<img src="img/joinbottom.gif" alt="" />
-
<img id="id4" src="img/page.gif" alt="" />
-
<a id="sd4" class="node" href="node1_1_1.html" onclick="javascript: d.s(4);">节点 1.1.1 </a>
-
</div>
-
</div>
-
</div>
-
<div class="dTreeNode">
-
<img src="img/joinbottom.gif" alt="" />
-
<img id="id2" src="img/page.gif" alt="" />
-
<a id="sd2" class="node" href="node2.html" onclick="javascript: d.s(2);">节点 2 </a>
-
</div>
-
</div>
-
</div>
仔细观察，树中每个节点的html构造是相似的：
-
<!-- 根节点 -->
-
<div class="dTreeNode">
-
<img id="id0" src="img/base.gif" alt="" />根节点 </a>
-
</div>
-
<div id="dd0" class="clip" style="display:block;">
-
......
-
</div>
-
<!-- 节点 1 -->
-
<div class="dTreeNode">
-
<a href="javascript: d.o(1);"> <img id="jd1" src="img/minus.gif" alt="" /> </a>
-
<img id="id1" src="img/folderopen.gif" alt="" />
-
<a href="javascript: d.o(1);" class="node">节点 1 </a>
-
</div>
-
<div id="dd1" class="clip" style="display:block;">
-
......
-
</div>
-
<!-- 节点 1.1 -->
-
<div class="dTreeNode">
-
<img src="img/line.gif" alt="" />
-
<a href="javascript: d.o(3);"> <img id="jd3" src="img/minusbottom.gif" alt="" /> </a>
-
<img id="id3" src="img/folderopen.gif" alt="" />
-
<a href="javascript: d.o(3);" class="node">节点 1.1 </a>
-
</div>
-
<div id="dd3" class="clip" style="display:block;">
-
......
-
</div>
-
<!-- 节点 1.1.1 -->
-
<div class="dTreeNode">
-
<img src="img/line.gif" alt="" />
-
<img src="img/empty.gif" alt="" />
-
<img src="img/joinbottom.gif" alt="" />
-
<img id="id4" src="img/page.gif" alt="" />
-
<a id="sd4" class="node" href="node1_1_1.html" onclick="javascript: d.s(4);">节点 1.1.1 </a>
-
</div>
-
<!-- 节点 2 -->
-
<div class="dTreeNode">
-
<img src="img/joinbottom.gif" alt="" />
-
<img id="id2" src="img/page.gif" alt="" />
-
<a id="sd2" class="node" href="node2.html" onclick="javascript: d.s(2);">节点 2 </a>
-
</div>
每个节点由两个<div>组成，第一个div (class="dTreeNode")描述当前节点，如节点显示文字、节点图标、图标前的加减号、连线等；第二个div （class="clip"）描述当前节点的子节点（包括子节点的子节点），注意div的样式 style="display:block;"，"block"表示显示div，也就是显示子节点，如果样式为 style="display:none;"，则隐藏div，也就隐藏了子节点，d.o()函数控制display样式的变换，也就相应实现了子节点的打开和关闭。
"节点 1.1.1" 和 "节点 2" 没有子节点，所以没有第二个<div>。
-
-
<img id="id2" src="img/page.gif" alt="" />
-
<a id="sd2" class="node" href="node2.html" onclick="javascript: d.s(2);">节点 2 </a>
-
</div>
每个节点由两个<div>组成，第一个div (class="dTreeNode")描述当前节点，如节点显示文字、节点图标、图标前的加减号、连线等；第二个div （class="clip"）描述当前节点的子节点（包括子节点的子节点），注意div的样式 style="display:block;"，"block"表示显示div，也就是显示子节点，如果样式为 style="display:none;"，则隐藏div，也就隐藏了子节点，d.o()函数控制display样式的变换，也就相应实现了子节点的打开和关闭。
"节点 1.1.1" 和 "节点 2" 没有子节点，所以没有第二个<div>。