JS组件dtree轻松实现树型菜单
来源:互联网 发布:天佐彩票源码 编辑:程序博客网 时间:2024/05/09 07:21
JS组件dtree轻松实现树型菜单
作者:吕海鹏 文章来源:it学习网原创
时间:2007-10-21 20:51:11 阅读次数:今日:10 本周:55 本月:836 总计:6794
--------------------------------------------------------------------------------
时间:2007-10-21 20:51:11 阅读次数:今日:10 本周:55 本月:836 总计:6794
--------------------------------------------------------------------------------
标题:JS组件dtree轻松实现树型菜单
摘要:
难度:
摘要:
难度:
摘要:详细介绍应用dtree构建一个JavaScript树型菜单及其中参数配置说明
这几天写个网站,用了一个JavaScript写的树型菜单,有网友问我要这个代码,很奇怪,了解一下,原来网上很多文章都在讨论Js树型菜单,看了几个实例,发现确实没有我用的这个好,因此baidu了一下,略作整理,希望大家不要浪费无用功。
(网上很多人都将dtree改头换面加以演绎,造成了海量垃圾,这里希望大家尊重他人劳动成果,保留版权信息,再进行完善的话,还一个洁净环境,人人如此,我们就不会在学习中走很多弯路了,当你能这样做了 我们就慢慢成为一个真正的程序员了)。
首先说我用的这个Js树型菜单,不是我做的是一个老外写的---dtree。
(网上很多人都将dtree改头换面加以演绎,造成了海量垃圾,这里希望大家尊重他人劳动成果,保留版权信息,再进行完善的话,还一个洁净环境,人人如此,我们就不会在学习中走很多弯路了,当你能这样做了 我们就慢慢成为一个真正的程序员了)。
首先说我用的这个Js树型菜单,不是我做的是一个老外写的---dtree。
这个无限级可刷新Js树型菜单 dTree
1、可设置无限级菜单
2、不必使用框架
3、可刷新,多页面内跳转不会影响菜单
4、可限级创造子树
5、支持目前主流浏览器:IE5,6,7
6、节点图片可设置切换图片效果
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的函数介绍。
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" src="js/dtree.js"></script>
必须引用的两个文件。
生成树 节点的代码:
<script type="text/javascript">
<!--
<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’);
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>
</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
第七个参数,用做节点的图标,节点没有指定图标时使用默认值
第八个参数,用做节点打开的图标,节点没有指定图标时使用默认值
第九个参数,判断节点是否打开
这一句为树添加了一个根节点,显示名称为’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’);
向树里添加一个节点
只能在树被创建之前调用.
必须 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();
打开所有节点
可在树被创建以前或以后调用.
例子
mytree.openAll();
closeAll()
关闭所有节点
可在树被创建以前或以后调用.
例子
mytree.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);
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";
变量 类型 默认值 描述
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方便多了。
项目实例:
<tr><td>
<div class="dtree">
<logic:notEmpty name="channelInfoList">
<script type="text/javascript">
<!--
d = new dTree("d");
d.add(0,-1,'','','','');
//-->
</script>
<logic:iterate id="record" name="channelInfoList">
<logic:notEqual name="record" property="f_c_id" value="0">
<script type="text/javascript">
d.add('<bean:write name="record" property="channel_id"/>','<bean:write name="record" property="f_c_id"/>','<bean:write name="record" property="channel_name"/>','ArticlesList.do?channel_id=<bean:write name="record" property="channel_id"/>','','mainFrame');
</script>
</logic:notEqual >
<logic:equal name="record" property="f_c_id" value="0">
<script type="text/javascript">
d.add('<bean:write name="record" property="channel_id"/>','<bean:write name="record" property="f_c_id"/>','<bean:write name="record" property="channel_name"/>','','','mainFrame');
</script>
</logic:equal >
</logic:iterate>
<script type="text/javascript">
<!--
document.write(d);
//-->
</script>
</logic:notEmpty>
</div>
</td></tr>
<div class="dtree">
<logic:notEmpty name="channelInfoList">
<script type="text/javascript">
<!--
d = new dTree("d");
d.add(0,-1,'','','','');
//-->
</script>
<logic:iterate id="record" name="channelInfoList">
<logic:notEqual name="record" property="f_c_id" value="0">
<script type="text/javascript">
d.add('<bean:write name="record" property="channel_id"/>','<bean:write name="record" property="f_c_id"/>','<bean:write name="record" property="channel_name"/>','ArticlesList.do?channel_id=<bean:write name="record" property="channel_id"/>','','mainFrame');
</script>
</logic:notEqual >
<logic:equal name="record" property="f_c_id" value="0">
<script type="text/javascript">
d.add('<bean:write name="record" property="channel_id"/>','<bean:write name="record" property="f_c_id"/>','<bean:write name="record" property="channel_name"/>','','','mainFrame');
</script>
</logic:equal >
</logic:iterate>
<script type="text/javascript">
<!--
document.write(d);
//-->
</script>
</logic:notEmpty>
</div>
</td></tr>
- JS组件dtree轻松实现树型菜单
- JS组件dtree轻松实现树型菜单
- dtree树型菜单
- dtree.js菜单列表加密,实现Code
- 无限级Js树型菜单(可刷新)dTree
- dtree 动态树型菜单
- JavaScript树型菜单 dtree
- dTree树型菜单API
- JavaScript树型菜单 dtree
- DTree实现树形菜单
- 使用dtree构建动态树型菜单
- 使用dtree构建动态树型菜单
- 使用dtree构建动态树型菜单
- javascript树型菜单(Dtree和Xtree)
- 用dtree实现树形菜单
- dtree编写简单的树形菜单组件
- DTree生成漂亮的动态树型菜单
- dtree来实现树形的菜单
- struts-config.xml-context.xml-web.xml
- Python多线程知识点
- lucene2.4集成几种中文分词实例代码
- Python有用的模块
- Python 线程操作
- JS组件dtree轻松实现树型菜单
- 关于远程办公
- How to set network proxy for terminal in Ubuntu
- Windows Mobile 开发系列文章收藏 - Windows Mobile 6.x
- sql 备份和备份文件的删除
- Java编程那些事儿系列文章(全集)
- CHtmlView 在对话框模式下显示的要点
- powerdesigner12.5使用
- 在HTML里面加一个SWF格式的控件