Chinaunix首页 | 论坛 | 博客

Web world

首页　| 　博文目录　| 　关于我

cici0208

  • 博客访问： 459650
  • 博文数量： 226
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 2111
  • 用 户 组： 普通用户
  • 注册时间： 2014-06-20 09:02
个人简介

web web web

文章分类

全部博文（226）

文章存档

2020年（2）

2019年（1）

2018年（3）

2017年（26）

2016年（57）

2015年（60）

2014年（77）

我的朋友
最近访客
推荐博文
相关博文
用dtree实现树形菜单

分类： Web开发

2014-12-25 14:00:20

1.使用样式表和js库文件：dtree.css,dtree.js



2.新建一个树对象
d=new dTree('d');

3.设置树的节点及其相关属性
dTree.add(id,pid,name,url,title,target,icon,iconOpen,open);

add方法的参数说明:

id:当前节点标识, pid:父节点标识, name:当前节点名字, url:当菜单被点击时响应的超链接,
title:提示语,target:在目标窗口打开链接, icon:关闭时的显示图标, iconOpen:打开时的显示图标, open:默认的打开状态, true打开, false关闭(不过它会读cookie, 所以有时看不出效果)  

    eg:d.add(1,0,'Node 1','example01.html');
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title>dTree</title>
  5. <link rel="StyleSheet" href="dtree.css" type="text/css" />
  6. <script type="text/javascript" src="dtree.js"></script>
  7. </head>
  8. <body>
  9. <h1>Js树型菜单</h1>
  10. <h2>Example</h2>
  11. <div class="dtree">
  12. <p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
  13. <script type="text/javascript">
  14.     d = new dTree('d');
  15.     d.add(0,-1,'My example tree');
  16.     d.add(1,0,'Node 1','#');
  17.     d.add(2,0,'Node 2','#');
  18.     d.add(3,1,'Node 1.1','#');
  19.     d.add(4,0,'Node 3','#');
  20.     d.add(5,3,'Node 1.1.1','#');
  21.     d.add(6,5,'Node 1.1.1.1','#');
  22.     d.add(7,5,'Node 1.1.1.2','#','标题','_parent');
  23.     d.add(7,0,'Node 4','#');
  24.     d.add(8,1,'Node 1.2','#');
  25.     d.add(9,0,'My Pictures','#','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
  26.     d.add(10,9,'The trip to Iceland','#','Pictures of Gullfoss and Geysir');
  27.     d.add(11,9,'Mom\'s birthday','#');
  28.     d.add(12,0,'Recycle Bin','#','','','img/trash.gif');
  29.     document.write(d);
  30. </script>
  31. </div>
  32. </body>
  33. </html>

    34. http://www.cnblogs.com/Jaylong/archive/2011/10/15/jsch.html
阅读(745) | 评论(0) | 转发(0) |
0

上一篇：jQuery为ajax支持提供的三个工具方法

下一篇：html 描点和热点的使用

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6