dTree原版帮助文档资源-CSDN下载

共24个文件

gif：20个

html：2个

js：1个

需积分: 28 120 浏览量 2008-09-09 11:02:59 上传评论收藏 15KB ZIP 举报

**dTree原版帮助文档详解** dTree是一款广泛使用的JavaScript库，主要用于在Web页面中创建交互式的树形结构。这个库特别适用于展示层次结构的数据，例如网站导航、文件目录、组织架构等。dTree的核心特性在于其轻量级、易用性和高度可定制性。 1. **dTree API** `api.html` 文件提供了dTree的API详细说明。dTree的API允许开发者创建、操作和控制树节点。以下是一些关键API函数： - `dTree()`：这是创建新树实例的主要函数，通常需要传入一个ID来指定树将被插入到HTML中的哪个元素。 - `add()`：用于向树中添加节点。可以接受多个参数，如父节点ID、节点文本、链接地址等。 - `open() / close()`：分别用于打开和关闭树节点，提供动态展开和折叠的功能。 - `select() / unselect()`：选择或取消选择特定节点，通常配合事件处理函数使用。 - `getSelected()`：返回当前选中的节点信息。 2. **Example** `example01.html` 文件展示了dTree的基本用法。在示例中，你会看到如何初始化dTree，如何添加节点，以及如何通过CSS（如`dtree.css`）进行样式调整。通常，dTree可以通过JSON数据或者JavaScript数组来动态生成树结构。例如： ```javascript var tree = new dTree('tree'); tree.add(-1, '根节点'); tree.add(tree.last, '子节点1'); tree.add(tree.last, '子节点2'); ``` 在这个例子中，我们创建了一个新的dTree实例，然后添加了一个根节点和两个子节点。 3. **dTree.js** 这是dTree的核心JavaScript文件，包含了所有dTree的实现逻辑和功能。通过阅读和理解源代码，开发者可以深入了解其工作原理，并进行自定义扩展或优化。 4. **img** `img` 文件夹通常包含dTree所需的图标和其他图像资源，这些图像用于表示展开、折叠、选中等状态。通过修改这些图片，可以改变dTree的视觉风格。 dTree原版帮助文档为开发者提供了一套完整的工具，用于在网页上构建和管理交互式树结构。通过学习API和示例，开发者可以快速掌握dTree的使用方法，并根据项目需求进行个性化定制。无论你是前端新手还是经验丰富的开发人员，dTree都能成为你构建层次结构展示的得力助手。

资源推荐

资源详情

资源评论

收起资源包目录

dtree.zip （24个子文件）

dtree.css 795B

img

nolines_plus.gif 870B

plusbottom.gif 88B

plus.gif 89B

empty.gif 62B

line.gif 66B

imgfolder.gif 622B

joinbottom.gif 66B

trash.gif 1KB

folderopen.gif 376B

globe.gif 1KB

minus.gif 86B

minusbottom.gif 85B

base.gif 1KB

musicfolder.gif 633B

join.gif 69B

question.gif 1KB

nolines_minus.gif 861B

page.gif 582B

cd.gif 239B

folder.gif 372B

dtree.js 12KB

api.html 5KB

example01.html 2KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Destroydrop » Javascripts » Tree » Api</title> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /> <link rel="stylesheet" href="/dd.css" type="text/css" /> <link rel="shortcut icon" href="/favicon.ico" /> </head> <body> <div id="shadow"> <div id="content"> <div id="location"> <h1><a href="/">Destroydrop</a> » <a href="/javascripts/">Javascripts</a> » <a href="/javascripts/tree/">Tree</a> » <a href="/javascripts/tree/api/">Api</a></h1> </div> <div class="line"></div> <div id="files"> <h3>Overview</h3> <div class="line"></div> <div class="item"> <ul class="arrow"> <li><a href="#functions">Functions</a> <ul class="arrow"> <li><a href="#add">add</a></li> <li><a href="#openall">openAll</a></li> <li><a href="#closeall">closeAll</a></li> <li><a href="#opento">openTo</a></li> </ul> </li> <li><a href="#configuration">Configuration</a></li> </ul> </div> <a name="functions"></a> <h3>Functions</h3> <div class="line"></div> <div class="item"> <a name="add"></a> <h4 class="func">add()</h4> <p>Adds a node to the tree.<br />Can only be called before the tree is drawn.</p> <p>id, pid and name are required.</p> <h4>Parameters</h4> <table class="files"> <tr> <th>Name</th> <th>Type</th> <th>Description</th> </tr> <tr> <td>id</td> <td>Number</td> <td>Unique identity number.</td> </tr> <tr> <td>pid</td> <td>Number</td> <td>Number refering to the parent node. The value for the root node has to be -1.</td> </tr> <tr> <td>name</td> <td>String</td> <td>Text label for the node.</td> </tr> <tr> <td>url</td> <td>String</td> <td>Url for the node.</td> </tr> <tr> <td>title</td> <td>String</td> <td>Title for the node.</td> </tr> <tr> <td>target</td> <td>String</td> <td>Target for the node.</td> </tr> <tr> <td>icon</td> <td>String</td> <td>Image file to use as the icon. Uses default if not specified.</td> </tr> <tr> <td>iconOpen</td> <td>String</td> <td>Image file to use as the open icon. Uses default if not specified.</td> </tr> <tr> <td>open</td> <td>Boolean</td> <td>Is the node open.</td> </tr> </table> <br /> <h4>Example</h4> <p><code>mytree.add(1, 0, 'My node', 'node.html', 'node title', 'mainframe', 'img/musicfolder.gif');</code></p> <br /> <a name="openall"></a> <h4 class="func">openAll()</h4> <p>Opens all the nodes.<br />Can be called before and after the tree is drawn.</p> <h4>Example</h4> <p><code>mytree.openAll();</code></p> <br /> <a name="closeall"></a> <h4 class="func">closeAll()</h4> <p>Closes all the nodes.<br />Can be called before and after the tree is drawn.</p> <h4>Example</h4> <p><code>mytree.closeAll();</code></p> <br /> <a name="opento"></a> <h4 class="func">openTo()</h4> <p>Opens the tree to a certain node and can also select the node.<br /> Can only be called after the tree is drawn.</p> <h4>Parameters</h4> <table class="files"> <tr> <th>Name</th> <th>Type</th> <th>Description</th> </tr> <tr> <td>id</td> <td>Number</td> <td>Identity number for the node.</td> </tr> <tr> <td>select</td> <td>Boolean</td> <td>Should the node be selected.</td> </tr> </table> <h4>Example</h4> <p><code>mytree.openTo(4, true);</code></p> </div> <a name="configuration"></a> <h3>Configuration</h3> <div class="line"></div> <div class="item"> <table class="files"> <tr> <th>Variable</th> <th>Type</th> <th>Default</th> <th>Description</th> </tr> <tr> <td>target</td> <td>String</td> <td>true</td> <td>Target for all the nodes.</td> </tr> <tr> <td>folderLinks</td> <td>Boolean</td> <td>true</td> <td>Should folders be links.</td> </tr> <tr> <td>useSelection</td> <td>Boolean</td> <td>true</td> <td>Nodes can be selected(highlighted).</td> </tr> <tr> <td>useCookies</td> <td>Boolean</td> <td>true</td> <td>The tree uses cookies to rember it's state.</td> </tr> <tr> <td>useLines</td> <td>Boolean</td> <td>true</td> <td>Tree is drawn with lines.</td> </tr> <tr> <td>useIcons</td> <td>Boolean</td> <td>true</td> <td>Tree is drawn with icons.</td> </tr> <tr> <td>useStatusText</td> <td>Boolean</td> <td>false</td> <td>Displays node names in the statusbar instead of the url.</td> </tr> <tr> <td>closeSameLevel</td> <td>Boolean</td> <td>false</td> <td>Only one node within a parent can be expanded at the same time. openAll() and closeAll() functions do not work when this is enabled.</td> </tr> <tr> <td>inOrder</td> <td>Boolean</td> <td>false</td> <td>If parent nodes are always added before children, setting this to true speeds up the tree.</td> </tr> </table> <h4>Example</h4> <p><code>mytree.config.target = "mytarget";</code></p> </div> </div> <div class="line"></div> <div id="copy"> <p class="right"><a href="http://validator.w3.org/check/referer">XHTML</a>, <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></p> <p><a href="mailto:drop@destroydrop.com">©2002-2003 Geir Landrö</a></p> </div> </div> </div> </body> </html>

评论收藏

内容反馈