欢迎来到.net学习网

欢迎联系站长一起更新本网站!QQ:879621940

您当前所在位置:首页 » Html » 正文

热门阅读

javascript树形控件dtreer的使用示例

创建时间:2012年06月26日 16:12  阅读次数:(7869)
分享到:
dtree控件是一款非常好用的树形控件,它具有以下的优点:
1、可设置无限级菜单
2、不必使用框架
3、可刷新,多页面内跳转不会影响菜单
4、可无限级创造子树
5、支持目前主流浏览器:IE5,6,7,ff
6、节点图片可设置切换图片效果

它的运行效果如下图:


下面我们就实现上图的效果做个示例。
首先下载dtree控件的js源码与其它资源,地址如下:
javascript树形控件dtree官方源码下载

新建一个html页面,在该页面添加对dtree.js与dtree.css的引用,代码如下:
<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>

然后在<body></body>标签内添加dtree的树内容与全部展开与全部关闭的代码。
dtree树内容:
<script type="text/javascript">
<!--

d = new dTree('d');

d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','example01.html');
d.add(2,0,'Node 2','example01.html');
d.add(3,1,'Node 1.1','example01.html');
d.add(4,0,'Node 3','example01.html');
d.add(5,3,'Node 1.1.1','example01.html');
d.add(6,5,'Node 1.1.1.1','example01.html');
d.add(7,0,'Node 4','example01.html');
d.add(8,1,'Node 1.2','example01.html');
d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
d.add(11,9,'Mom\'s birthday','example01.html');
d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');

document.write(d);

//-->
</script>

全部展开与全部收起的代码
<a href="javascript: d.openAll();">全部展开 open all</a> | <a href="javascript: d.closeAll();">全部关闭 close all</a>

添加完后保存就有上图的效果啦。

如果需要修改树节点前面的图片,可以打开dtree.js文件,找到如下的代码,将图片的路径改成你自己的图片路径就可以了。
this.icon = {
    root: 'Image/treeimg/base.gif',
    folder: 'Image/treeimg/folder.gif',
    folderOpen: 'Image/treeimg/folderopen.gif',
    node: 'Image/treeimg/page.gif',
    empty: 'Image/treeimg/empty.gif',
    line: 'Image/treeimg/line.gif',
    join: 'Image/treeimg/join.gif',
    joinBottom: 'Image/treeimg/joinbottom.gif',
    plus: 'Image/treeimg/plus.gif',
    plusBottom: 'Image/treeimg/plusbottom.gif',
    minus: 'Image/treeimg/minus.gif',
    minusBottom: 'Image/treeimg/minusbottom.gif',
    nlPlus: 'Image/treeimg/nolines_plus.gif',
    nlMinus: 'Image/treeimg/nolines_minus.gif'
};

dtree树控件使用是不是很简单呢,该示例的全部代码在上面dtree.js的源码下载文件中有。e
来源:.net学习网
说明:所有来源为 .net学习网的文章均为原创,如有转载,请在转载处标注本页地址,谢谢!
【编辑:Wyf

打赏

取消

感谢您的支持,我会做的更好!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

最新评论

共有评论0条
  • 暂无任何评论,请留下您对本文章的看法,共同参入讨论!
发表评论:
留言人:
内  容:
请输入问题 75+5=? 的结果(结果是:80)
结  果: