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
官方下载地址:http://www.destroydrop.com/javascripts/tree/