分享
 
 
 

dtree

王朝百科·作者佚名  2010-07-08
窄屏简体版  字體: |||超大  

简介dtree是一个由JavaScript编写成的简单的树形菜单组件,目前免费并且开源。

dtree

目前有很多的树形菜单组件(比如ext),dtree是一种简单易懂的js组件,不需要复杂的操作即可生产,同时支持动态从数据库引入数据。

dTree可以不用添加任何页面而直接用代码实现多个栏目,并可以实现无限分级,下面是官方介绍的优点:

- Unlimited number of levels(无限分级)

- Can be used with or without frames(可用于框架或非框架页面)

- Remembers the state of the tree between pages(在不同页面之间可记住当前状态)

- Possible to have as many trees as you like on a page(可以得到你想要数量的树型)

- All major browsers suported(支持的浏览器)

Internet Explorer 5+ Netscape 6+ Opera 7+ Mozilla

- Generates XHTML 1.0 strict validated output(严格支持XHTML 1.0)

- Alternative images for each node(每个节点用图片代替)

创建dtree1)从官网上下载dtree的源文件压缩包“dtree.zip”,包内包含以下几个文件:

img文件夹: 包含树形菜单显示需要的图标

api.html : 作者写的dtree帮助文档

dtree.css: 树形菜单的样式

dtree.js : js核心文件,代码都在其中

example01.html:树形菜单实例

2)将压缩包内的文件拷贝到项目webroot下(example01.html可以不拷贝)

3)新建一个web文件(*.html、*.jsp...都可以),首先引入css和js文件:

<link rel="StyleSheet" href="dtree.css" type="text/css" />

<script type="text/javascript" src="dtree.js"></script>

然后在<body>里创建一个div层,指定class为“dtree”,此时该层就引用了dtree的样式

<div class="dtree">

<script type="text/javascript">

tree = new dTree('tree');

......

</script>

</div>

注:具体代码可以参照example01.html

4)最后保存执行即可看到一个树形菜单。

常用方法和配置add(parameters)添加一个树节点,实际参数有9个add(id,pid,name,url,title,target,icon,iconOpen,open);

位置

参数别名

类型

功能

1

id

int

节点自身的id(唯一)

2

pid

int

节点的父节点id

3

name

string

节点显示在页面上的名称

4

url

string

节点的链接地址

5

title

string

鼠标放在节点上显示的提示信息

6

target

string

节点链接所打开的目标frame

7

icon

string

节点关闭状态时显示的图标

8

iconOpen

string

节点打开状态时显示的图标

9

open

bool

节点第一次加载是否打开

注:dtree.js文件中约87-113行是一些默认图片的路径,可以自己配置图片和路径。openAll()打开全部节点,可在树对象创建前或创建后调用closeAll()关闭全部节点,可在树对象创建前或创建后调用openTo(id,select)打开指定id的节点,可以传两个参数:

id 指定需要打开的节点的唯一id

select 是否让该节点处于选中状态config配置变量

类型

默认值

描述

target

string

所有节点的target

folderLinks

bool

true

文件夹可被链接

useSelection

bool

true

节点可被选择高亮

useCookies

bool

true

树可以使用cookie记住状态

useLines

bool

true

撞见带结构连接线的树

useIcons

bool

true

创建带有图表的树

useStatusText

bool

false

用节点名替代显示在状态栏的节点url

closeSameLevel

bool

false

同级节点只允许一个节点处于打开状态

inOrder

bool

false

加速父节点树的显示

【例】tree.config.closeSameLevel=true;表示打开某级节点时,该级其他处于打开状态的同级节点会被关闭。

具体配置功能请参照官网实例。

参数规范dtree大多数方法都有一个以上的参数,大多数参数都含有默认值,因此不需要每次都把全部参数传进入

例:dtree.add(id,pid,name,url); 后面5个参数被省略,会采用默认配置

如果是有间隔的默认值,中间需要加引号:

例:dtree.add(id,pid,name,'','','','','',true);第4-8个参数省略,第9个参数自定义

特殊:add()方法如果需要设置第5个参数(弹出提示信息),则第4个参数不能为默认,否则是没有效果的。

例:dtree.add(id,pid,name,url,title); 如果url设置为“''”,不能弹出提示信息

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有