PHP程序员站--PHP编程开发平台
 当前位置:主页 >> 网页制作 >> Javascript >> 

js树形菜单组件dtree插件

js树形菜单组件dtree插件

来源:phperz.com  作者:phper  发布时间:2012-04-07
dtree是一个由JavaScript编写成的简单的树形菜单组件,目前免费并且开源。 目前有很多的树形菜单组件(比如ext),dtree是一种简单易懂的js组件,不需要复杂的操作即可生产,同时支持动态从数据库引入数据。 dTree可以不用添加任何页面而直接用代码实现多个栏目,并可以

  dtree是一个由JavaScript编写成的简单的树形菜单组件,目前免费并且开源。
目前有很多的树形菜单组件(比如ext),dtree是一种简单易懂的js组件,不需要复杂的操作即可生产,同时支持动态从数据库引入数据。
   dTree可以不用添加任何页面而直接用代码实现多个栏目,并可以实现无限分级,下面是官方介绍的优点:
   - 无限分级
   - 可用于框架或非框架页面
   - 在不同页面之间可记住当前状态
   - 可以得到你想要数量的树型
   - 支持的浏览器Internet Explorer 5+ Netscape 6+ Opera 7+ Mozilla
   - 严格支持XHTML 1.0
   - 每个节点用图片代替

 

dtree使用方法:

1)从官网上下载dtree的源文件压缩包“dtree.zip”,包内包含以下几个文件:
 img文件夹: 包含树形菜单显示需要的图标
 api.html : 作者写的dtree帮助文档
 dtree.css: 树形菜单的样式
 dtree.js : js核心文件,代码都在其中
 example01.html:树形菜单实例   
2)将压缩包内的文件拷贝到项目webroot下(example01.html可以不拷贝)
3)新建一个web文件(*.html、*.jsp...都可以),首先引入css和js文件:
 <link rel="StyleSheet" href="dtree.css" type="text/css" />
 <script type="text/javascript" src="dtree.js"></script>
 然后在<body>里创建一个div层,指定class为“dtree”,此时该层就引用了dtree的样式
 <div class="dtree">
 <script type="text/javascript">
 tree = new dTree('tree');
 ......
 </script>
 </div>
 注:具体代码可以参照example01.html


4)最后保存执行即可看到一个树形菜单。

官方下载地址:http://www.destroydrop.com/javascripts/tree/


延伸阅读:
JQuery Tree 插件 zTree简介
jQuery的Tree控件 jstree
jQuery树状菜单插件 Treeview
可拖放的树形控件 jQuery Simple Tree
jQuery树形表格插件 jQTreeTable
JQuery Tree插件——zTree v3.1 正式版发布
Tags: js   树形菜单   组件   dtree   插件  
最新文章
推荐阅读
月点击排行榜
PHP程序员站 Copyright © 2007-2010,PHPERZ.COM All Rights Reserved 粤ICP备07503606号