- 浏览: 842693 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (530)
- Java编程 (64)
- C/C++/D (6)
- .Net/C# (9)
- Ruby (12)
- JavaScript (77)
- XML (1)
- JSON (1)
- Ajax (17)
- ExtJs (81)
- YUI (1)
- JQuery (7)
- DWR (1)
- HTML (7)
- CSS (7)
- Database (6)
- PowerDesigner (23)
- DB2 (2)
- Oracle (57)
- MS SQL Server (8)
- MySQL (6)
- JSP/Servlet/JSTL/TagLib (3)
- Spring (1)
- Hibernate (0)
- iText (0)
- Struts (0)
- Struts2 (0)
- iReport (0)
- FreeMarker (0)
- HttpClient (1)
- POI (6)
- FckEditor (15)
- Eclipse / MyEclipse (10)
- IntelliJ IDEA (0)
- NetBeans (0)
- Tomcat (11)
- WebLogic (1)
- Jboss (3)
- jetty (4)
- IIS (2)
- CVS/VSS (1)
- FTP (1)
- Windows/DOS (6)
- Linux/Unix (0)
- 软件建模 UML (0)
- Design Pattern & Thinking In Programming (10)
- 数据结构与算法 (12)
- 软件项目管理 (9)
- 行业应用解决方案 (3)
- 电脑软件与故障解决 (13)
- 编程语言 (1)
- 十万个为什么 (3)
- JBPM (2)
- sysbase (2)
- JDBC (8)
- Ant (2)
- Case-计算机辅助软件工程 (1)
- WebService (4)
- 浏览器 (1)
最新评论
-
gaoqiangjava:
同一楼,还请大手帮解决
JAVA读取word文件 -
hyl523:
// 判断数组中的第一个值是否未定义,如果未定义,便定义为空对 ...
javascript面向对象之二 命名空间 -
ping12132200:
ping12132200 写道我抱着个错不是因为:body标签 ...
extjs在IE报对象不支持此属性或方法 -
ping12132200:
我抱着个错不是因为:body标签内的第一个元素不能为文本tex ...
extjs在IE报对象不支持此属性或方法 -
fireinjava:
呀,不错,转走了,谢谢啦~
利用OpenOffice将word转换成PDF
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
发表评论
-
javascript面向对象之一 类
2011-06-06 16:46 995javascript中的类多数是用 ... -
javascript面向对象之二 命名空间
2011-06-06 16:24 1229javascript中本没有命名空间的概念,但是要体现面向对象 ... -
网页特效代码
2011-06-01 16:38 10791. Flip! 一个 jQuery 插件 http://l ... -
js 操作select 大全
2010-11-04 13:49 7371判断select选项中 是否存在Value="pa ... -
Dialog 超酷js弹出层 完美兼容所有浏览器 华丽呈现超强功能
2010-11-03 13:05 1366http://www.iteye.com/topic/4800 ... -
IE6对display:table-row不支持
2010-11-02 19:34 1593http://topic.csdn.net/u/2010070 ... -
javascript中字符串转化为json对象
2010-07-30 09:11 1220http://www.json.org/js.html To ... -
IE6的base标签导致页面结构大混乱
2010-07-20 16:27 1070这是一个非常隐秘也是非常强大的bug,我真不知微软的IE开发人 ... -
汇总让IE6崩溃的几种方法
2010-07-20 16:25 1137经常遇到莫名其妙让IE6崩溃的事情。今天看到了一篇好文章,数字 ... -
JS添加事件处理函数
2010-07-08 23:41 1088作为一种事件驱动的编 ... -
js压缩工具
2010-07-04 23:50 1799javascriptcompressor.com ( ... -
Javascript 中 ShowModalDialog 的使用方法
2010-06-21 16:13 1424ShowModalDialog函数的功能 ... -
xtree的基本应用---入门级
2010-06-21 16:08 1229由于公司要求做一棵关于公司员工选择的JS控件树,以前我们一直使 ... -
javascript实现上传图片前的预览效果
2010-06-16 20:35 1395<script>function yulan(){ ... -
重写window.confirm函数
2010-06-12 11:06 2352重写window.confirm函数为了让它能够默认选择取消按 ... -
改善window的alert提示信息框样式
2010-06-12 11:05 1453<input type="button&quo ... -
jsgraphics图形库
2010-05-10 22:58 1625http://www.walterzorn.com/jsgra ... -
JavaScript图形库jsGraphics
2010-05-10 22:57 2479JavaScript图形库Raphaël < JavaS ... -
千一JS控件
2010-05-10 22:31 860千一JS控件--滑块条 千一JS控件--进度条 千一JS控 ... -
JavaScript 生成曲线图
2010-05-10 22:28 1252引用方法 new gov.Graphic(par1,par2 ...
相关推荐
在前端开发中,Dtree和Xtree是两种常见的JavaScript实现树型菜单的库。下面将详细介绍这两个库以及相关知识点。 1. Dtree(Dynamic Tree) Dtree是一个轻量级的JavaScript库,它提供了创建动态树形菜单的功能。这...
基于java的开发源码-JSP树型菜单 DTree.zip 基于java的开发源码-JSP树型菜单 DTree.zip 基于java的开发源码-JSP树型菜单 DTree.zip 基于java的开发源码-JSP树型菜单 DTree.zip 基于java的开发源码-JSP树型菜单 DTree...
JavaScript树型菜单dtree是一种常见的前端交互元素,用于在网页中展示层次结构的数据,比如目录、组织架构或者分类。在Web开发中,它为用户提供了一种直观、易于导航的方式来探索和操作多级数据。以下是对这个主题的...
JSP(JavaServer Pages)中的DTree是一款高效且灵活的树型菜单实现,它结合了HTML、JavaScript以及CSS技术,提供了丰富的功能和自定义选项。本篇文章将对JSP树型菜单DTree进行深入探讨。 首先,DTree的核心在于其...
JavaScript树型菜单是一种在网页中展示层次结构数据的交互式元素,常用于网站导航、文件系统浏览或组织复杂数据。这种菜单通常以节点的形式呈现,每个节点可以展开或折叠,显示其子节点。在给定的文件列表中,我们...
2. **初始化DTree**:在JSP页面的底部或者`<head>`部分,通过JavaScript调用`new DTree()`来初始化树型菜单。在这里,你需要提供树的根节点ID以及可能的配置选项,如是否自动展开所有节点,节点点击事件等。 3. **...
"无限级可刷新Js树型菜单 dTree" 是一个JavaScript库,用于在Web应用中创建能够无限层级展开和刷新的树形菜单。这个标题表明该库特别适用于那些需要展示复杂层次结构数据的场景,比如组织结构、文件系统或者导航菜单...
JAVA源码JSP树型菜单DTreeJAVA源码JSP树型菜单DTree
JavaScript组件dtree就是一种用于创建动态、交互式树型菜单的工具,它以其轻量级、易用性以及丰富的功能特性受到开发者的青睐。本文将深入探讨如何使用dtree来构建JavaScript树型菜单,并分享相关知识点。 首先,...
`dtree.js`是核心JavaScript文件,实现了树型菜单的逻辑。JavaScript是一种常用的客户端脚本语言,用于增强网页的交互性。在这个案例中,`dtree.js`可能包含了创建树型菜单对象、渲染节点、处理用户点击事件以及动画...
- dtree.js:这是DTree的核心JavaScript文件,包含了实现树型菜单逻辑的代码,可能会处理用户的交互事件,如点击、展开、收缩等。 - img:这个目录可能包含了与DTree相关的图像资源,如箭头图标、节点指示器等。 ...
java源码资源JSP树型菜单 DTree提取方式是百度网盘分享地址
4. **dtree.js**:这是DTree的核心JavaScript文件,包含了实现树型菜单功能的代码。这个文件可能包含了构造树形结构、处理用户交互、动态加载数据等功能。开发者可以通过查看源码来深入理解DTree的内部工作机制,...
`dTree` 是一个强大的JavaScript库,专用于创建无限级的可刷新树型菜单。这个库允许用户在网页上动态展示和操作复杂的层级数据,提供了丰富的功能和高度的自定义性。 **1. 无限级节点支持** `dTree` 支持无限级别的...
2. **JavaScript(JS)**:在本实例中,dtree.js是实现树型菜单交互功能的JavaScript文件。JavaScript负责处理用户的点击事件,展开和折叠节点,以及可能的数据加载逻辑。通过与后台服务器交互,JavaScript可以动态...
本压缩包"基于java的JSP树型菜单 DTree.zip"提供了实现JSP页面中树形菜单功能的资源。下面将详细介绍这些资源及其在实际应用中的作用。 首先,`dtree.css`是样式表文件,它包含了树形菜单的样式定义。在网页开发中...
6. **dtree.js**: 这是DTree的核心JavaScript文件,包含了所有用于创建和操作树型菜单的函数和逻辑。开发人员可能需要根据项目需求对这个文件进行定制或者扩展。 7. **img**: 这个目录可能包含了DTree使用的图像...
在本案例中,我们讨论的是一款名为"dtree"的JavaScript库,它能够帮助开发者创建具有动态效果的树型菜单。下面将详细介绍这款菜单的实现原理和关键知识点。 首先,`dtree.js`是核心JavaScript文件,包含了树型菜单...