XTREE

1.XTREE简介:

XTREE是一个基于AJAX实现的树形菜单。它的原理就是每次都只加载当前结点下的所有结点,而对开发人员来说,就是只需要按一定的格式,生成一段XML代码。XTREE可以自己定制每个结点的ICON和链接。XTREE是基于对象的,通过XTREE,你无需再自己生成HTML代码,而只要生成相应的JS 对象就可以了。

2.官方网址:

http://webfx.eae.net/dhtml/xtree/index.html,可以在这里下载到XTREE最新的版本,也有XTREE的演示的DEMO。

3.XTREE的API:

XTREE的API很简单,就是一个抽象类WebFXTreeAbstractNode以及该抽象类的两个子类WebFXTree和WebFXTreeItem。这三个类的属性和构造函数,还有方法详见:http://webfx.eae.net/dhtml/xtree/api.html,上面写得很清晰。

4.XTREE学习笔记
每个结点有一个状态叫做OPEN;如果结点为OPEN,则可以EXPAND;对于ITEM结点来说,永远返回FALSE;
toggle()就是切换,如果为展开的,就收起;如果为收起的,就展开;
XTREE生成的是静态树,它不能从XML中生成树,而是只能生成简单的静态的树,看构造函数的参数就可以知道【text】【action】
--------------------------------------------------------------
WebFXTreeAbstractNode:

属性:
id:唯一标识
text: label
action: 链接
open: 标志位,boolean型,是否打开
icon: 图标
openIcon:打开时的图标
parentNode:父结点的Reference
childNodes: 子结点的Reference的集合

方法:
indent():缩进
toggle():切换
callapse():收起
expand():展开
callapseAll():收起全部
expandAll():展开全部
expandChildren():展开子结点
callapseChildren():收起子结点
getNextSibling():取得下一个兄弟结点的Reference
getPreviousSibling():取得上一个兄弟结点的Reference
toString():生成HTML代码

------------------------------------------------------------------
WebFXTree:

构造函数:new WebFXTree([text], [action], [behavior],[icon],[openIcon]);

参数:
text:
action:
behavior:
icon:
openIcon:

属性:
rendered 标志位,boolean类型,用于标记该树是否已经生成和显示。
WebFXTreeAbstractNode的所有属性

方法:
getSelected():返回一个Reference,被选中的那个对象的Reference。
setBehavior(sBehavior): classic,explorer;
getBehavior():
WebFXTreeAbstractNode的所有方法
-------------------------------------------------------------------
WebFXTreeItem:
构造函数:
new WebFXTreeItem([text],[action],[parent],[icon],[openIcon]);

属性:
WebFXTreeAbstractNode的所有属性

方法:
getFirst():返回第一个子结点的Reference
getLast():返回嘴后一个子结点的Reference
__________________________________________________________________________________________

5.XLoadTree学习笔记:
XLoadTree与XTree的区别就在于,XTree只能生成静态树,而XLoadTree可以根据XML生成动态树。
XLoadTree是由Xtree而来的,主要有两个类:WebFXLoadTree和WebFXLoadTreeItem,其中,WebFXLoadTree继承自WebFXTree,WebFXLoadTreeItem继承自WebFXTreeItem
---------------------------------------------------------------------
WebFXLoadTree:

构造函数:
new WebFXLoadTree(sText, sXmlSrc, sAction, sBehavior, sIcon, sOpenIcon)

参数:
sXmlSrc:展开时需要用到的XML文件
其余参数与WebFXTree一样

属性:
src: XML源文件
loading: 标志位,boolean类型,表示正在加载XML文件
loaded: 标志位,boolean类型, 表示XML文件已将加载完毕
errorText: 错误描述
WebFXTree中的所有属性

方法:
reload():重新加载XML文件
WebFXTree中的所有方法
-----------------------------------------------------------------------
WebFXLoadTreeItem:

构造函数:
new WebFXLoadTreeItem(sText, sXmlSrc, sAction, eParent, sIcon, sOpenIcon)
参数:
eParent:可选,该结点要加入到的结点的Reference

属性:
src: XML源文件
loading: 标志位,boolean类型,表示正在加载XML文件
loaded: 标志位,boolean类型, 表示XML文件已将加载完毕
errorText: 错误描述
WebFXTree中的所有属性

方法:
reload():重新加载XML文件
WebFXTreeItem中的所有方法

XML文件的格式:


xml 代码
<!ELEMENT tree (tree*)>
<!ATTLIST tree
text CDATA #REQUIRED
src CDATA #IMPLIED
action CDATA #IMPLIED
icon CDATA #IMPLIED
openIcon CDATA #IMPLIED>


XML文件的例子:


xml 代码
<tree>
<tree text="Loaded Item 1" action="href://webfx.eae.net" />
<tree text="Loaded Item 2">
<tree text="Loaded Item 2.1" action="javascript:alert(2.1)" />
</tree>
<tree text="Load "tree1.xml"" src="tree1.xml" />
</tree>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值