树目录JS.rarjavascript资源-CSDN文库

共23个文件

gif：20个

css：1个

js：1个

4星 · 超过85%的资源需积分: 3 133 浏览量 2009-09-23 22:26:50 上传评论收藏 14KB RAR 举报

在JavaScript编程领域中，"树目录JS"是一个用于在网页中构建和操作树形目录结构的库或技术。树目录通常被用在文件管理系统、网站导航、数据展示等多个场景，因为它们能有效地组织和呈现层次化的信息。在这个压缩包文件"树目录JS.rar"中，我们可以期待找到一系列用于实现这一功能的JavaScript代码、示例和可能的文档。树目录JS的核心概念是通过HTML、CSS和JavaScript来创建可交互的树状节点结构。每个节点可以包含子节点，形成一个层级关系。JavaScript库如jQuery、React或Vue.js等都可以用来实现这一效果。具体实现方式通常包括以下关键点： 1. **节点对象**：每个目录或文件都是一个节点，包含属性如文本、ID、父节点ID等，用于识别和管理节点。 2. **DOM操作**：利用JavaScript动态地创建、更新和删除DOM元素以反映树目录的状态。 3. **事件处理**：添加点击、展开/折叠、拖放等交互功能，使用户能够与树目录进行交互。 4. **数据结构**：使用数组、对象或特定的数据结构（如二叉树）来存储和操作树状数据。 5. **遍历和搜索**：提供遍历树结构的函数，支持查找特定节点或路径。 6. **动画效果**：为了提升用户体验，可能会添加过渡动画来平滑展开和折叠节点。 7. **API接口**：提供对外的API，以便其他JavaScript代码可以创建、修改或查询树目录。在压缩包中的"树目录JS"可能包含了以下文件： - **index.html**：示例页面，展示了如何使用树目录JS库。 - **style.css**：样式表文件，定义了树目录的外观。 - **script.js**：JavaScript文件，实现了树目录的逻辑。 - **data.json**或**treeData.js**：可能包含预定义的树目录数据。 - **README.md**或**Documentation**：关于如何使用和配置树目录JS的指南。使用这个库时，开发者首先需要引入JavaScript和CSS文件，然后根据文档指示初始化树目录，并加载数据。通过提供的API，可以添加、删除、移动节点，或者响应用户的交互行为。 "树目录JS"是一个方便的工具，帮助开发者在Web应用中实现高效且直观的目录导航。它利用JavaScript的灵活性和动态性，将复杂的树结构转换为用户友好的交互界面。对于任何需要处理层级数据的项目，掌握树目录JS的使用都是一项有价值的技术。

资源推荐

资源详情

资源评论

收起资源包目录

JS.rar （23个子文件）

树目录JS

img

line.gif 66B

nolines_minus.gif 861B

globe.gif 1KB

imgfolder.gif 622B

folderopen.gif 376B

folder.gif 372B

trash.gif 1KB

minus.gif 86B

musicfolder.gif 633B

minusbottom.gif 85B

join.gif 69B

plusbottom.gif 88B

plus.gif 89B

question.gif 1KB

cd.gif 239B

page.gif 582B

base.gif 1KB

empty.gif 62B

joinbottom.gif 66B

nolines_plus.gif 870B

api.html 5KB

dtree.js 12KB

dtree.css 795B

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

评论收藏

内容反馈