- 浏览: 196231 次
- 性别:
- 来自: 厦门
文章分类
最新评论
-
huaxialonger:
根结点怎么不能折起来啊
JavaScript树型菜单 dtree -
yan578351314:
这东西好呀!!!顶。。。。。
JavaScript树型菜单 dtree -
s524141771:
LZ,当在一个页面内生成2个或多个树时,展开节点会出问题,即: ...
JavaScript树型菜单 dtree -
tss0823:
我遇到了文件路径的问题。哈哈。谢谢!
java平台下通过jacob对excel,word进行打印等操作(转exceljava*^__^) -
qingfeng_101:
呵呵 我也有个分页的东东 是个JavaBean+JSP标签的 ...
Hibernate+Spring+Struts2整合开发中的一个分页显示方案
JS代码很简洁,但是实现了所有树形菜单应有的功能,安装和使用都很简单,特别是从数据库恢复成一棵树变得非常容易。下载包里自带一些常用图标,只需简单的操作,就可以实现看起来相当专业的树形菜单。
- 官方网站:http://www.destroydrop.com/javascripts/tree/
- 这里下载JS脚本文件包:http://www.destroydrop.com/javascripts/tree/dtree.zip
- 这儿是演示(Demo):http://www.destroydrop.com/javascripts/tree/example/
详细介绍应用dtree构建一个JavaScript树型菜单及其中参数配置说明
这几天写了个网站www.aatii.cn,用了一个JavaScript写的树型菜单,有网友问我要这个代码,很奇怪,了解一下,原来网上很多文章都在讨论Js树型菜单,看了几个实例,发现确实没有我用的这个好,因此baidu了一下,略作整理,希望大家不要浪费无用功。
(网上很多人都将dtree改头换面加以演绎,造成了海量垃圾,这里希望大家尊重他人劳动成果,保留版权信息,再进行完善的话,还一个洁净环境,人人如此,我们就不会在学习中走很多弯路了,当你能这样做了 我们就慢慢成为一个真正的程序员了)。
首先说我用的这个Js树型菜单,不是我做的是一个老外写的---dtree。
这个无限级可刷新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方便多了。
作者:吕海鹏
来自:www.DeepTeach.com
更新日志:
2007-10-22 v0.1 初稿完成;
参考文档:
相关文档:
致谢:
dowhatyouwant :无限级可刷新Js树型菜单dTree(http://5key.net/blog/article.asp?id=315)
rlog :翻译资料 http://www.box.net/shared/26afylzzcb (网络文件夹,无毒)
讨论网址:bbs.DeepTeach.com
该文章转载自:http://www.deepteach.com/www1/ArticleContent.asp?ID=133
- dtree.zip (14.6 KB)
- 下载次数: 337
评论
当然,前提是第一个树有4级节点,且是最先write到页面的。
不知LZ遇到过没?
麻烦回复下?谢谢啊
非常感谢!
呵呵 ,我也是借花献佛,能帮助你,很高兴,这个dtree挺好用。
发表评论
-
js用法(如何获取select中的值和属性)
2012-12-11 21:50 2981js用法(如何获取select中的值和属性) <scr ... -
js操作table元素,表格的行列新增、删除汇集
2012-10-28 20:09 0/************ TableTool.js **** ... -
下拉框中的复选框
2009-06-14 00:51 1400<html><head><tit ... -
简单实现网站变灰的代码(JS)
2009-05-13 17:17 1982非常简单,在网页中增加如下代码:<script type ... -
整理天气预报代码
2009-05-13 10:00 2259http://www.weather.com.cn/stati ... -
JavaScript的动态表单
2009-03-24 17:17 1067事先声明引用了别人的代码,做了一些细节上的改动。 使用模板,动 ... -
js动态添加删除表格
2009-03-24 09:09 1069<script type="text/java ... -
动态多文件上传
2009-03-23 17:07 960转载于 Virgo_S 方式一:事先写好多个input.在点 ... -
WEB office操作(页面内容导出)
2009-03-18 11:32 949<HTML> <HEAD> ... -
一个可以关闭的漂浮广告代码
2009-03-11 14:37 6350<script type="text/java ... -
window.open()的所有参数列表
2009-02-03 10:07 827前言:经常上网的朋友可能会到过这样一些网站,一进入首页立 ... -
js小应用 整理
2009-01-16 09:30 1727判断表单,下拉框是否 ... -
【翻译】超酷仿苹果机桌面js+Css飞行菜单
2009-01-07 10:37 2439演示在这里基于Jquery和Fisheye,在IE 6, IE ... -
js判断数字:用于判断用户注册时 密码强度的JS代码
2009-01-07 10:24 1913<script language=javascript& ... -
图片鼠标缩放 并限定显示大小
2008-12-09 15:32 1334<SCRIPT language=JavaScript ... -
省市区三级联动
2008-12-08 14:05 2285<html><head><tit ... -
简单灵活的权限树
2008-12-04 16:18 2469将 dree 作了一些修改: 1、 增加 Node 的属 ... -
showModalDialog/showModelessDialog使用例子
2008-12-02 14:10 1224(一)showModalDialog使用例子,父窗口向子窗口 ... -
showModalDialog和showModelessDialog
2008-12-02 14:08 814基本介绍:showModalD ... -
评估密码强度
2008-12-01 23:10 831密码已经是我们生活工作中必不可少的工具,但一个不安全的密码有 ...
相关推荐
文章内容见tree.txt 博文链接:https://clarancepeng.iteye.com/blog/100111
JS组件dtree轻松实现树型菜单:详细介绍应用dtree构建一个JavaScript树型菜单
JAVAscript带CHECKBOX树型菜单
javascript树型菜单(Dtree和Xtree) dtree构建动态树型菜单
无限级可刷新Js树型菜单 测试过,比较好用,Dtree。
jsp使用Dtree实现树菜菜单的例子,一个利用现存的JavaScript代码配合struts构成一个树型菜单的例子。 树型菜单的节点保存在数据库表中,通过数据访问对象将其从数据库中查出后放在一个集合对象中,并将该集合对象...
dtree是一个由JavaScript编写成的简单的树形菜单组件,目前免费并且开源。dtree 目前有很多的树形菜单组件(比如ext),dtree是一种简单易懂的js组件,不需要复杂的操作即可生产,同时支持动态从数据库引入数据。 ...
收集几个dTree核心的JSP树形菜单实例,本实例介绍的一种比较直观的实现方法,就是将树型菜单的节点保存在数据库表中(当然,在实际项目中,节点的信息往往并不是放在一个单一的表中的。比如:在一个权限管理系统中,...
树菜单js网上多得是,自己写了一个树菜单类,自认为...– function Dtree(){ this.MenuGroupClose=”images/treeview_close.gif”; //菜单关闭图标 this.MenuGroupOpen=”images/treeview_open.gif”; //菜单打开图
采用JavaScript编写的基于Web的树型菜单,简单实用,附效果图
dtree是一个由JavaScript编写成的简单的树形菜单组件,目前免费并且开源。 dtree 目前有很多的树形菜单组件(比如ext),dtree是一种简单易懂的js组件,不需要复杂的操作即可生产,同时支持动态从数据库引入数据。 ...
Jsp Struts javascript树形菜单附代码,号称史上最完美的jsp版树形菜单效果,附有代码和用法说明,基于dtree内核,本过本实例现了动态的树形菜单,就是将树型菜单的节点保存在数据库表中,通过数据访问对象将其从...
dtree是一个免费的javascript脚本,只需定义有限的几个参数,就可以做出漂亮的树型菜单。 由于附带了可运行的实例,资源分高了点,请海涵
采用JavaScript编写的基于Web的树型菜单,简单实用,附效果图
纯JavaScript+树形菜单,基于js的无限树形菜单(dtree),史上最完美最简单js树形菜单,AlaiJSCtr,jstree+JS树形菜单合集,js树形菜单,模仿CSDN树型菜单
Java右键弹出菜单源码 简单 Java圆形按钮实例代码,含注释 两个目标文件,自绘button。 Java圆形电子时钟源代码 1个目标文件 内容索引:JAVA源码,系统相关,电子钟 用JAVA编写的指针式圆形电子钟,效果图如下所示...