2019独角兽企业重金招聘Python工程师标准>>>

JS组件dtree轻松实现树型菜单:详细介绍应用dtree构建一个JavaScript树型菜单及其中参数配置说明

这几天写个网站,用了一个JavaScript写的树型菜单,有网友问我要这个代码,很奇怪,了解一下,原来网上很多文章都在讨论Js树型菜单,看了几个实例,发现确实没有我用的这个好,因此baidu了一下,略作整理,希望大家不要浪费无用功。
(网上很多人都将dtree改头换面加以演绎,造成了海量垃圾,这里希望大家尊重他人劳动成果,保留版权信息,再进行完善的话,还一个洁净环境,人人如此,我们就不会在学习中走很多弯路了,当你能这样做了我们就慢慢成为一个真正的程序员了)。  
首先说我用的这个Js树型菜单,不是我做的是一个老外写的---dtree。  
http://www.itstudy.cn/www/ArticleContent.asp?ID=5
这个无限级可刷新Js树型菜单 dTree  
1、可设置无限级菜单  
2、不必使用框架  
3、可刷新,多页面内跳转不会影响菜单  
4、可限级创造子树  
5、支持目前主流浏览器:IE5,6,7  
6、节点图片可设置切换图片效果

下载url:http://www.destroydrop.com/javascripts/tree/  
看看最下边的时间,2003 Geir Landro人家就写出来了,俺现在才用(佩服)

解压缩dtree.zip 包。  
dtree目录下包括这些文件:example01.html 、 dtree.js 、 api.html 、 dtree.css 和img目录       
注意:除了api.html之外,其它的文件都是必须拷贝的。api.html是dtree的函数介绍。

打开example01.html文件

<link rel="StyleSheet" href="css/dtree.css" type="text/css" />   
     <script type="text/javascript" src="js/dtree.js"></script>

必须引用的两个文件。

生成树 节点的代码:  
      <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>

d.add(0,-1,’My example tree’);  
      这一句为树添加了一个根节点,显示名称为’My example tree’     d.add(1,0,’Node 1’,’example01.html’);  
     这一句在树的根节点下面添加了一个子节点。(d.add()方法的参数具体含义可参见api.html文件)       
常用的:       
第一个参数,表示当前节点的ID       
第二个参数,表示当前节点的父节点的ID,根节点的值为 -1      
第三个参数,节点要显示的文字       
第四个参数,节点的Url       
第五个参数,鼠标移至该节点时节点的Title       
第六个参数,节点的target  
第七个参数,用做节点的图标,节点没有指定图标时使用默认值  
第八个参数,用做节点打开的图标,节点没有指定图标时使用默认值  
第九个参数,判断节点是否打开

使用实例大家可参照 www.amyou.cn 的树型菜单

附 rlog翻译:

属性菜单使用说明

函数

add()   
向树里添加一个节点   
只能在树被创建之前调用.   
必须 id, pid, name   
参数   
名字     类型     描述   
id     Number     唯一的ID号   
pid     Number     判定父节点的数字,根节点的值为 -1   
name     String     节点的文本标签   
url     String     节点的Url   
title     String     节点的Title   
target     String     节点的target   
icon     String     用做节点的图标,节点没有指定图标时使用默认值   
iconOpen     String     用做节点打开的图标,节点没有指定图标时使用默认值   
open     Boolean     判断节点是否打开   
例子   
mytree.add(1, 0, ’My node’, ’node.html’, ’node title’, ’mainframe’, ’img/musicfolder.gif’);

openAll()   
打开所有节点   
可在树被创建以前或以后调用.   
例子   
mytree.openAll();

closeAll()   
关闭所有节点   
可在树被创建以前或以后调用.   
例子   
mytree.closeAll();

openTo()   
Opens the tree to a certain node and can also select the node.   
只能在树被创建以后调用..   
参数   
名字     类型     描述   
id     Number     节点唯一的ID号   
select     Boolean     判断节点是否被选择   
例子   
mytree.openTo(4, true);

配置   
变量     类型     默认值     描述   
target     String     true     所有节点的target   
folderLinks     Boolean     true     文件夹可链接   
useSelection     Boolean     true     节点可被选择(高亮)   
useCookies     Boolean     true     树可以使用cookies记住状态   
useLines     Boolean     true     创建带线的树   
useIcons     Boolean     true     创建带有图标的树   
useStatusText     Boolean     false     用节点名替代显示在状态栏的节点url   
closeSameLevel     Boolean     false     只有一个有父级的节点可以被展开,当这个函数可用时openAll() 和 closeAll() 函数将不可用   
inOrder     Boolean     false     如果父级节点总是添加在子级节点之前,使用这个参数可以加速菜单显示.   
例子   
mytree.config.target = "mytarget";

写到这里捎带说一下,这几天我研究了一下 extjs里边的树型菜单,功能非常强大,但如果构建一个简单的网页上的树型菜单还是dtree方便多了。

转载于:https://my.oschina.net/u/225677/blog/88914

dtree.js树的使用相关推荐

  1. 强大的Js树型控件Dtree使用详解

    http://www.lmwlove.com/ac/ID868 在学习文章之前,要学会看官方网站http://destroydrop.com/javascripts/tree.从官方页面你能知道:dt ...

  2. Dtree目录树的总结

    把dtree.css 和dtree.js及img文件夹放到页面的根文件夹下就可以用! Dtree目录树的总结 一:函数 1:页面中 tree.add(id,pid,name,url,title,tar ...

  3. dtree.js菜单列表加密,实现Code

    QQ:285679784   欢迎加入技术交流QQ群80669150 (附加信息:珠海 -"Lzw )一起学习 ! 图1-1 图1-2 图1-3 Code: 在dtree.js中找到dtree.pro ...

  4. three.js 树模型_与three.js的圣诞树

    three.js 树模型 Christmas tree with three.js Today's article refers to the Christmas and new year in th ...

  5. 一个好用的js树 梅花雪MzTreeView

    主要是速度特别快 用另外一个js树,要100秒,用这个,1秒就出来结果.推荐一下! 附件中文档很全,忘记是哪位朋友在QQ上发给我的,在此,共享出来!

  6. dtree.js下拉树控件

    dtree下拉树的一些基础用法 id  Number  唯一的id pid  Number  判定父节点的数字,根节点的值为 -1 name  String  节点的文本标签 url  String ...

  7. jquery.treeview.js树控件的应用

    插件的官方网站: http://bassistance.de/jquery-plugins/jquery-plugin-treeview/ 官方提供的插件实例:http://jquery.bassis ...

  8. 漂亮的JS树控件,自带8个皮肤(dhtmlxTree)

    dhtmlxTree(DHTML的扩展树)是一个功能丰富的JavaScript树形菜单 ,允许你轻松地创建有吸引力,快速装载能力下降层次树与跨浏览器兼容性,Ajax支持,在线节点编辑,和拖放的N -. ...

  9. Java Swing编程之仿js树状折叠菜单

    最近要完成一个需求:用swing做个树状菜单,含二级菜单,点击一级菜单展开二级菜单,且二级菜单数目超过预览视图会出现滚动条.由于swing研究的少,花了不少精力! 先看下测试效果图: 收起图: 展开图 ...

最新文章

  1. 交换机无法ping通之谜
  2. mysql怎么滤空_《MySQL 入门教程》第 08 篇 过滤条件
  3. 数据库的数据在硬盘上吗
  4. python3 json.dump乱码问题
  5. 小师妹学JavaIO之:文件写入那些事
  6. ASP.NET 实现Base64文件流下载PDF
  7. QT中信号和槽的简单解释
  8. Java集合系列:Set解析
  9. (76)ila使用?
  10. java switch 不加 break 继续执行 下一个case(不用匹配条件) 这个设计是为什么
  11. AJAX验证jsp页面验证码
  12. 如何在工作中学习,让自己成为领域专家?
  13. 软件工程第一次作业-谢旭军
  14. Excel 散点图和折线图的区别
  15. 【Halcon轮廓提取】
  16. buuctf easyphp
  17. KNY团队与“易校”小程序介绍
  18. 【c语言】高级篇学习笔记
  19. 惠普HP Deskjet 1010 打印机驱动
  20. AtCoder Beginner Contest 153 题解

热门文章

  1. stm32 hal uart_STM32 非阻塞HAL_UART_Receive_IT解析与实际应用
  2. python速度比较_Python和C运算速度对比实测
  3. c语言中的关于数学问题的编程,C语言中具有代表性几种数学问题编程技巧探索.doc...
  4. linux打开没有图形界面,linux无法打开图形界面
  5. java父类转换成子类_【转】java 父类与子类的转换
  6. javascript 权威指南第7版_免费领书 | 气相色谱与质谱实用指南(原著第2版)
  7. SQL Server 2012高可用性组
  8. 'cross-env' 不是内部或外部命令,也不是可运行的程序
  9. Android基础教程pdf
  10. 第一周冲刺_周三总结