天天看点

dTree组件的学习

dtree是一个免费的js树形菜单,使用简单,界面制作的也很专业。

dtree树形菜单

不同的项目需求,造成菜单树的各种变化,因此在介绍dtree的同时,本文着重讲述如何改造dtree,以达到为不同项目所用的目的。

dtree 分析

dtree的使用非常简单,在下载的dtree压缩文件中(2.05),要用的只有三个:

1. dtree.js : dtree功能脚本

2. dtree.css : 样式文件

3. img文件夹 : 存放dtree使用的图标,参看下图:

dtree图标

很容易就可以编写出类似上面的dtree菜单树,源代码如下:

<html>

<head>

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

</head>

<body>

<script type="text/javascript" >

<!–

d = new dtree( ‘d’ ) ; //创建树,名称为’d'(注意和树的对象变量名称要一致) 

d.add ( 0 ,-1 ,‘my example tree’ ) ; //在树中增加节点。节点id是0,父节点是-1(根节点),节点文字’my example tree’ 

d.add ( 1 ,0 ,‘node 1′ ,‘default.html’ ) ; //根节点的子节点(父节点是0),’default.html’表示节点链接(鼠标点击页面跳转url) 

d.add ( 2 ,0 ,‘node 2′ ,‘default.html’ ) ;

d.add ( 3 ,1 ,‘node 1.1′ ,‘default.html’ ) ;

d.add ( 4 ,0 ,‘node 3′ ,‘default.html’ ) ;

d.add ( 5 ,3 ,‘node 1.1.1′ ,‘default.html’ ) ;

d.add ( 6 ,5 ,‘node 1.1.1.1′ ,‘default.html’ ) ;

d.add ( 7 ,0 ,‘node 4′ ,‘default.html’ ) ;

d.add ( 8 ,1 ,‘node 1.2′ ,‘default.html’ ) ;

d.add ( 9 ,0 ,‘my pictures’ ,‘default.html’ ,‘pictures i\’ ve taken over the years’ ,” ,” ,‘img/imgfolder.gif’ ) ; //’pictures i\’ve taken over the years’是链接title,指定图标 

d.add ( 10 ,9 ,‘the trip to iceland’ ,‘default.html’ ,‘pictures of gullfoss and geysir’ ) ;

d.add ( 11 ,9 ,‘mom\’ s birthday’ ,‘default.html’ ) ;

d.add ( 12 ,0 ,‘recycle bin’ ,‘default.html’ ,” ,” ,‘img/trash.gif’ ) ;

document.write ( d) ; //输出dtree的html(显示) 

//–> 

</script>

</body>

</html>

分析dtree.js,在dtree中只有两个结构:”节点”和”树”,dtree的所有功能和构造都在于这两个结构的属性和行为中,node比较简单,只包含节点的基本属性和一个构造方法,所以对dtree的分析和研究的重点可放在dtree结构中。

attributes(属性) 

id : int 每个节点都有唯一id,增加节点时需要手工定义一个id。 

pid : int 父节点id,根节点的父节点是-1。 

name : string 节点名称(显示名字) 

url : string 节点url(鼠标点击跳转地址) 

title : string 鼠标移动到节点上显示的文字 

target : string 页面跳转所在的frame 

icon : string 节点关闭时显示的图标地址 

iconopen : string 节点打开时显示的图标地址 

_io : boolean 节点是否已打开,默认值false。 

_is : boolean 节点是否被选中,默认值false。 

_ls : boolean 是否是最后一个节点,默认值false。 

_hc : boolean 是否有子节点,默认值false。 

_ai : int 在树的节点数组中的下标(位置),默认值0。 

_p : node 父节点对象,默认值null。 

operations(行为) 

node(id, pid, name, url, title, target, icon, iconopen, open) : void 构造方法,创建一个节点对象。open对应_io,表示节点是否已经打开。 

节点类图

dtree 

obj : string 树的名称,在创建树时定义。 

anodes : node[] 树中的节点数组。 

aindent : [] 数组。 

root : node 根节点。 

selectednode : node 当前选择的节点。 

selectedfound : boolean 是否有选中节点,默认false。 

completed : boolean 树构建html是否已完成完成,默认false。 

config : hash数组 树的配置 

target: 设置所有节点的target,默认null 

folderlinks: 目录节点是否可以有链接,默认true 

useselection: 节点是否可以被选择(高亮),默认true 

usecookies: 设置使用cookies保存树的状态,默认true 

uselines: 是否显示路径点线,默认true 

useicons: 是否显示图标,默认true 

usestatustext: 是否在状态栏输出节点文字(替换原来的url显示),默认false 

closesamelevel: 是否自动关闭兄弟节点(当打开本节点时),注意设置true时,openall()和closeall()不能工作,默认false 

inorder: 如果父节点总是在子节点之前加入树,设置true有更好的效率,默认false 

icon : hash数组 图标 

root: 根,默认'img/base.gif' 

folder: 关闭的文件夹,默认'img/folder.gif' 

folderopen: 打开的文件夹,默认'img/folderopen.gif' 

node: 文件,默认'img/page.gif' 

empty: 空,默认'img/empty.gif' 

line: 竖线,默认'img/line.gif' 

join: 丁线,默认'img/join.gif' 

joinbottom: 直角线,默认'img/joinbottom.gif' 

plus: 加号丁线,默认'img/plus.gif' 

plusbottom: 加号直角线,默认'img/plusbottom.gif' 

minus: 减号丁线,默认'img/minus.gif' 

minusbottom: 减号直角线,默认'img/minusbottom.gif' 

nlplus: 无线加号,默认'img/nolines_plus.gif' 

nlminus: 无线减号,默认'img/nolines_minus.gif' 

dtree(objname) : void 构造方法,创建树对象。objname: 树名称。 

add(id, pid, name, url, title, target, icon, iconopen, open) : void 在树中增加一个节点,节点对象添置到anodes数组末尾。参数open表示节点是否已经打开。 

openall() : void 打开树中所有节点。此方法由oall方法实现。 

closeall() : void 关闭树中所有节点。此方法由oall()方法实现。 

tostring() : string 构建树的html。此方法主要由addnode()方法实现。返回:html。 

addnode(pnode) : string 构建pnode的所有子节点的html。参数pnode: 父节点对象。返回:html。 

node(node, nodeid) : string 构建node的html。参数node: 节点对象;nodeid: 节点在节点数组anodes中的位置。返回:html。 

indent(node, nodeid) : string 构建node前面的空格、点线、加减号的html。参数node: 节点对象;nodeid: 节点在节点数组anodes中的位置。返回:html。 

setcs(node) : void 检查并设置:1. node节点是否有子节点; 2. node节点是否是节点数组anodes中的最后一个。参数node: 节点对象。 

getselected() : int 从cookies中获取已选中的节点,返回:节点id或null(没有选中任何节点)。 

s(id) : void 鼠标点击节点发生的动作,高亮选择的节点,并记录在cookies中。参数id: 节点在节点数组anodes中的位置 

o(id) : void 鼠标点击+-图标发生的动作,打开或关闭指定节点,并记录在cookies中。参数id: 节点在节点数组anodes中的位置 

oall(status) : void 打开或关闭所有节点,并将状态记录在cookies中。参数status:true打开 fasle关闭 

opento(nid, bselect, bfirst) : void 打开指定节点,并将状态记录在cookies中。参数nid:节点id或节点在节点数组anodes中的位置;bselect:true-打开同时被选中,false-打开不被选中;bfirst:true-nid是在节点数组anodes中的位置,false-nid是节点id。 

closelevel(node) : void 关闭和node同级别以及他们的下级的所有节点。参数node:节点对象。 

closeallchildren(node) : void 关闭node的所有子节点。参数node:节点对象。 

nodestatus(status, id, bottom) : void 改变节点的状态(关闭 或 打开)。参数status: 要设置的状态(true:打开 false:关闭);id: 节点id;bottom: true-是最后一个节点。 

clearcookie() : void 清除cookies。 

setcookie(cookiename, cookievalue, expires, path, domain, secure) : void 记录入cookies。 

getcookie(cookiename) : string 从cookies中读取。 

updatecookie() : void 将所有打开的节点id记录在cookies中。 

isopen(id) : boolean 根据cookies的记录,判断一个节点是已经打开。参数id:节点id 

继续阅读