您的位置：首页 > 其它

dTree的分析和二次开发（上）

2013-10-12 17:17 281 查看

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(属性) id : int pid : int name : String url : String title : String target : String icon : String iconOpen : String _io : boolean _is : boolean _ls : boolean _hc : boolean _ai : int _p : Node
Operations(行为) Node(id, pid, name, url, title, target, icon, iconOpen, open) : void

节点类图

dTree
Attributes(属性) obj : String aNodes : Node[] aIndent : [] root : Node selectedNode : Node selectedFound : boolean completed : boolean config : Hash数组 icon : Hash数组
Operations(行为) dTree(objName) : void add(id, pid, name, url, title, target, icon, iconOpen, open) : void openAll() : void closeAll() : void toString() : String addNode(pNode) : String node(node, nodeId) : String indent(node, nodeId) : String setCS(node) : void getSelected() : int s(id) : void o(id) : void oAll(status) : void openTo(nId, bSelect, bFirst) : void closeLevel(node) : void closeAllChildren(node) : void nodeStatus(status, id, bottom) : void clearCookie() : void setCookie(cookieName, cookieValue, expires, path, domain, secure) : void getCookie(cookieName) : String updateCookie() : void isOpen(id) : boolean

dTree

Attributes(属性)

obj
: String

aNodes
: Node[]

aIndent
: []

root
: Node

selectedNode
: Node

selectedFound
: boolean

completed
: boolean

config
: Hash数组

icon
: Hash数组

Operations(行为)

dTree(objName)
: void

add(id,
pid, name, url, title, target, icon, iconOpen, open) : void

openAll()
: void

closeAll()
: void

toString()
: String

addNode(pNode)
: String

node(node,
nodeId) : String

indent(node,
nodeId) : String

setCS(node)
: void

getSelected()
: int

s(id)
: void

o(id)
: void

oAll(status)
: void

openTo(nId,
bSelect, bFirst) : void

closeLevel(node)
: void

closeAllChildren(node)
: void

nodeStatus(status,
id, bottom) : void

clearCookie()
: void

setCookie(cookieName,
cookieValue, expires, path, domain, secure) : void

getCookie(cookieName)
: String

updateCookie()
: void

isOpen(id)
: boolean

树类图

提示：

鼠标移动到类图中的属性或方法上时，会显示详细信息。

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



</script>

<input type="button" value="显示html" onclick="show()">

</body>

</html>

显示的“树”如下图：

Node
Attributes(属性) id : int pid : int name : String url : String title : String target : String icon : String iconOpen : String _io : boolean _is : boolean _ls : boolean _hc : boolean _ai : int _p : Node
Operations(行为) Node(id, pid, name, url, title, target, icon, iconOpen, open) : void

节点类图

dTree
Attributes(属性) obj : String aNodes : Node[] aIndent : [] root : Node selectedNode : Node selectedFound : boolean completed : boolean config : Hash数组 icon : Hash数组
Operations(行为) dTree(objName) : void add(id, pid, name, url, title, target, icon, iconOpen, open) : void openAll() : void closeAll() : void toString() : String addNode(pNode) : String node(node, nodeId) : String indent(node, nodeId) : String setCS(node) : void getSelected() : int s(id) : void o(id) : void oAll(status) : void openTo(nId, bSelect, bFirst) : void closeLevel(node) : void closeAllChildren(node) : void nodeStatus(status, id, bottom) : void clearCookie() : void setCookie(cookieName, cookieValue, expires, path, domain, secure) : void getCookie(cookieName) : String updateCookie() : void isOpen(id) : boolean

dTree

Attributes(属性)

obj
: String

aNodes
: Node[]

aIndent
: []

root
: Node

selectedNode
: Node

selectedFound
: boolean

completed
: boolean

config
: Hash数组

icon
: Hash数组

点击下方的“显示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>



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



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



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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航