JavaScript树形目录 收集整理

Javascript是Web开发常用的工具,如果自己开发,是比较复杂的,这里给大家推荐12Javascript树。这些js树有些用过,有些研究过,供大家参考。 
1.jsTree
jsTree是一个基于jQuery的Tree控件。支持XML,JSON,Html三种数据源。提供创建,重命名,移动,删除,拖\放节点操作。可以自己自定义创建,删除,嵌套,重命名,选择节点的规则。在这些操作上可以添加多种监听事件。 
示例: http://jstree.com/jsTree/examples  
 

2.FileTreePanel
FileTreePanel扩展至Ext.tree.TreePanel附带基本的文件/文件夹管理功能。其它还包括文件上传,重命名,删除,新建与移动。 
示例: http://aariadne.com/filetree  
 

3.jQuery File Tree  
jQuery File Tree是一个可配置的Ajax文件浏览器jQuery插件。可以通过CSS定制外观,指定文件树展开图标,可以自己定义展开/收缩事件、速度,配置加载信息等。 jQuery File Tree通过Ajax来获取文件信息。 

4.dhtmlxTree
dhtmlxTree是一个功能丰富的Tree Menu控件。提供丰富的操作API,AJAX支持和drag-n-drop。 
示例: http://dhtmlx.com/docs/products/dhtmlxTree/  
 

5.dTree  
dTree是一个易于使用的JavaScript树形菜单控件。支持无限分级,可以在同一个页面中放置多个dTree,可以为每个节点指定不同的图标。 
示例: http://destroydrop.com/javascripts/tree/default.html  
 

6.风声JS菜单树
风声JS菜单树,程序基于JavaScript/XHTML/CSS标准实现。支持丰富的功能/表现定制:拥有表现和数据分离,单页面可以应用多个无限级菜单树,多达4种展开模式,风格样式定义结构清晰、灵活又精细等等特性。 
示例: http://www.fonshen.com/MenuTree/demo/index.htm  
 

7.文件夹树形控件
文件夹树形控件。支持利用拖放(drag and drop)操作来重新排序节点,利用Ajax更新节点。 
示例: http://www.dhtmlgoodies.com/scripts/drag-drop-folder-tree/drag-drop-folder-tree.html  
 

8.TafelTree-view  
TafelTree-view是一个基于Prototype与Script.aculo.us开发的树形控件。支持拖放操作,Ajax更新节点等。 
示例: http://tafel.developpez.com/site/lang/en/samples.php  
 

9.Mif.Tree
Mif.Tree是一个利用MooTools开发的树形菜单控件。其代码非常灵活,能够让你控制导航的每一部分如:添加新的节点;拖放节点;排序,定义显示外观等。Mif.Tree还支持通过键盘进行浏览,支持带有checkbox控件的Tree menus。 
示例: http://mifjs.net/tree/  
 

10.jQuery Simple Tree  
jQuery Simple Tree是一个可拖放的树形控件。支持通过Ajax动态加载树节点,具有简单易于使用和漂亮的外观等特点 

11.wdTree  
wdTree是一个轻量级jQuery插件用于展示带有复选框的树形控件。支持从数据库懒加载节点,可以配置节点属性。 

12.AdubyTree
AdubyTree是一个带有checkbox复选框的树形jQuery插件。 
支持XML和JSON两种数据格式 
支持本地数据和动态 AJAX远程数据。 
支持checkbox复选框,方便实际应用。 
自带basic、books、org、orguser、vista五套主题,用户可以扩展定制主题。 
示例: http://code.google.com/p/jquery-adubytree/  

 

13.Jquery Ztree

 zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

  • zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载
    • 采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀
    • 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
    • 支持 JSON 数据
    • 支持静态 和 Ajax 异步加载节点数据
    • 支持任意更换皮肤 / 自定义图标(依靠css)
    • 支持极其灵活的 checkbox 或 radio 选择功能






更多资料:http://javapub.iteye.com/blog/724407

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML可以通过使用无序列表(<ul>)和有序列表(<ol>)元素来实现树形目录组件。 首先,我们可以使用无序列表来创建树的每个节点。每个节点由一个列表项(<li>)表示。列表项中可以包含一个链接(<a>)元素,用于显示节点的名称,并且可以通过href属性定义节点的链接地址。如果节点有子节点,则在列表项中嵌套另一个无序列表。 例如,一个简单的树形目录组件的HTML结构可以是: ``` <ul> <li><a href="#">节点1</a></li> <li> <a href="#">节点2</a> <ul> <li><a href="#">子节点1</a></li> <li><a href="#">子节点2</a></li> </ul> </li> <li><a href="#">节点3</a></li> </ul> ``` 这将创建一个包含3个主要节点的树,第二个节点(节点2)具有两个子节点(子节点1和子节点2)。 为了使树形目录组件更具交互性,我们可以使用JavaScript来控制节点的展开和折叠。通过添加事件监听器,我们可以在节点上绑定点击事件,并在事件处理函数中修改节点的样式或改变子节点的可见性。 例如,可以通过以下JavaScript代码来实现节点的展开和折叠: ```javascript const treeNodes = document.querySelectorAll('ul li'); treeNodes.forEach(node => { const childNode = node.querySelector('ul'); if (childNode) { node.addEventListener('click', () => { childNode.classList.toggle('expanded'); }); } }); ``` 上述代码会在具有子节点的列表项上添加一个点击事件监听器。当点击节点时,它的子节点会切换一个名为"expanded"的类,通过CSS样式控制子节点的可见性。 最后,可以使用CSS样式来美化树形目录组件,例如添加不同的背景颜色、边框、图标等等,以增强可读性和用户体验。 综上所述,通过使用无序列表和有序列表元素,并结合JavaScript和CSS样式,我们可以实现一个简单且交互性强的树形目录组件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值