`
froast
  • 浏览: 252282 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

WEBFX 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 代码
  1. <!ELEMENT tree (tree*)>  
  2.   <!ATTLIST tree   
  3.             text      CDATA   #REQUIRED   
  4.             src       CDATA   #IMPLIED   
  5.             action    CDATA   #IMPLIED   
  6.             icon      CDATA   #IMPLIED   
  7.             openIcon  CDATA   #IMPLIED>  

           

    XML文件的例子:
   

xml 代码
  1. <tree>  
  2.    <tree text="Loaded Item 1" action="href://webfx.eae.net" />  
  3.    <tree text="Loaded Item 2">  
  4.     <tree text="Loaded Item 2.1" action="javascript:alert(2.1)" />  
  5.    </tree>  
  6.    <tree text="Load &quot;tree1.xml&quot;" src="tree1.xml" />  
  7. </tree>  


分享到:
评论
4 楼 jackzhangyunjie 2008-04-02  
请问一下,在XTree下怎么把默认的根节点给隐藏起来,只显示它下面的所有子节点树.
3 楼 javajavabeijing 2008-01-02  
    [*]
    [*]
    [*]
[url][/url][flash=200,200][/flash]
name 写道
[u][/u][i][/i][b][/b]
2 楼 javajavabeijing 2008-01-02  
[list]
  • [list]
  • [*][list]
  • [*][*][list]
  • [*][*][*][list]
  • [*][*][*][*][*][b][/b]
    name 写道
     oooo
  • [*][*][*][/list]
  • [*][*][/list]
  • [*][/list]
  • [/list]
  • [/list]
    1 楼 anodon 2007-08-22  
    在 WebFXTreeAbstractNode 的全部收起是collapseAll()方法而不是
    callapseAll()别写错了

    相关推荐

      浏览器控件webfx.eae.net

      浏览器控件webfx.eae.net,汇聚了大量的浏览器控件,支持IE、火狐(Firefox)、谷歌(chrome)等主流的浏览器。

      JS tree菜单详解

      43. Xtree(http://webfx.eae.net/dhtml/xtree/implementation.html) 44. 相对dTree来说, xTree功能要多一些, 能动态增减树的节点 45. 引入树: 46. &lt;!-- The xtree script file --&gt; 47. &lt;script src="xtree.js"&gt;...

      webfx-demo-particles:一个以JavaFX编写的基本Web应用程序,它受Sketch.js粒子演示的启发。 也是跨平台和本地的

      这是用JavaFx重写此的30分钟时间,并使用WebFx重新编译为JavaScript。 这是JavaFx 。 特色功能 (除了上已经说明的内容之外) JavaFx画布到HTML画布的映射 除JavaFx场景图映射外,WebFx还将JavaFx画布API映射到HTML...

      webfx:JavaFX应用程序编译器。 用JavaFX编写Web应用程序,WebFX将以纯HTML5JS转换它

      WebFX WebFX使用将Java代码编译为JavaScript。 通常,GWT只能编译Java代码(您的应用程序逻辑),而不能编译JavaFX代码(您的应用程序UI)。 WebFX通过提供JavaFX的Web端口( 模块)来解决此问题,该端口可以由GWT与...

      webfx-demo-mandelbrot:一个用JavaFX编写的Web应用程序,用于访问Mandelbrot的9个地方。 计算将在WebAssembly中进行转换。 也是跨平台和本地的

      由于JavaFx最初不是为Web设计的,因此WebFx提供了一些其他API来与特定于Web的概念配合使用,例如Web Worker和WebAssembly模块,这对于需要大量后台任务的应用程序很有用。 WebFx可以与第三方Web Worker和...

      webfx-react-jest-test

      简短的 实施基本的React系统。 响应式编程是一种编程范例,其重点在于如何相互计算值,以允许对一个值的更改自动传播到其他值,例如在电子表格中。 使用具有可设置值的单元格(“输入”单元格)和具有根据其他...

      Asp.net第三方控件ComboBox组合框介绍

      可以填写,可以选择,可以根据填写内容自动搜索可选项中部分匹配的项 详情 代码如下: http://webfx.eae.net/dhtml/combobox/combobox.htm http://webfx.eae.net/dhtml/combobox/combo_demo.htm 另外...

      ComboBox.js

      从网上得到的,一个很简洁的js实现的下拉列表。 /* * ComboBox * By Jared Nuzzolillo ... * http://webfx.eae.net/contact.html#erik * 2002-06-13 Fixed Mozilla support and improved build performance * */

      贴一个在Mozilla中常用的Javascript代码

      Mozilla中独有的读写器(defineGetter、defineSetter)以及可以给Element,Event... 版权属于Erik Arvidsson, webfx 代码如下:if (Browser.isMozilla) { // set up ie environment for Moz extendEventObj

      assignment4-leparski-elle

      assignment4-leparski-elle ... https://www.webfx.com/web-design/color-picker/ http://css3.bradshawenterprises.com/cfimg/ https://stackoverflow.com/questions/7168723/unordered-list-in-a-paragraph-element ...

      BaseBox Widget Libraries-开源

      Basebox是dojo开发的框架,它包含一个简单的小部件API,您可以使用它来创建新的小部件或包装来自小部件库(例如Dojo,YUI,Zapatec或WebFX中的那些)的现有小部件。

      pet_project_new

      这个项目的灵感来自webfx。 当前功能 注册庇护账户创建动物档案对动物执行操作(CRUD)浏览每个庇护所中所有动物的清单编辑庇护所帐户浏览所有动物 即将来临更新选择的输入数据以匹配表格中的动物类型筛选动物浏览...

    Global site tag (gtag.js) - Google Analytics