关键词不能为空

当前您在： 主页 > 英语 >

YUI 开发文档

作者：高考题库网
来源：https://www.bjmy2z.cn/gaokao
2021-02-28 04:25
tags:

-

2021年2月28日发(作者：剪裁)


YUI


开发文档




表格和树




YUI


组件分为两类：工具包和控件库



YUI


工具包：



ion


Utility


动画（


Animation


）


：在你的页面中通过 指定位置，大小，透明度或者页


面元素的其他特性来创建一个


< /p>


电影效果（


cinematic effects


）



。这些效果将在你的页面发生


变化的时候给用户更好的体验。



r History Manager



tion Manager (for XHR/Ajax)


连接管理（


Connection Ma nager


）


：这个工具包帮助你


管理


XMLHttpRequest


（一般被称为

< br>AJAX


）事务，它提供对表单提交（


form pos ts


）


，错误捕


获（

< br>error handling


）和


callbacks


的全面支持。该工具包也支持文件的上传管理。




urce Utility



数据源工具：




and Drop Utility


拖放（


Drag and Drop


）


：创建可拖放的对象。为了提供丰富的交互功


能


（比如拖动一个对象到目标位置）


你可能需要编写很多代码。

< br>这个工具包可以在所有支持


的浏览器中捕获所有的操作事务并保证其稳定地运行。




t Utility




Utility



动态的添加外部


Javascrip t


和


CSS


。




oader Utility



加载图像工具




Utility



这将做解析


JSON


的首选组件。




er



通 过编程方式查看应用的动行情况。可以很方便的观察程序的执行性能。




or Utility


实现用类似


CSS Selector


的方式收集


Node


元素。最常用的方法


query()


。




YUI


控件库



mplete


自动完成控件为文本输入提供一种渐进式的用户 体验（


streamline


user

interactions


）


。控件会提供相似项列表和基 于多样化的数据格式的提前键入功能（


type-ahead


functionality based on a variety of data-source formats


）


，并且可以通过< /p>


XMLHttpRequest


访问


服务 端的数据。





一个按钮控件




ar


一个用来日期选择的动态图形控件




[experimental]


混合了

javascript


和


flash


，支持显示条形，曲线和饼图。




Picker


一个选择颜色的控件




ner


(including


Module,


Overlay,


Panel,


Tooltip,


Dialog,


SimpleDialog)


一


组


模


仿

< br>windows


样式的控件，他们包括


Tooltip,


Panel,


Dialog


和



SimpleDialog


。其中


Module


和



Overlay

< br>控件提供一个可扩展的平台，你可以控制自定义的模仿


windows

< p>
样式的控件




ble




表格及其相关操作





提供一个快速和简单的记录日志的方式，它直接将日志信息输 出到屏幕控制台


（


on-screen


console


）


、


Firefox


的扩展组件


FireBug


，或者


Safari


的


Javascrīpt


控制台。


yui


的


Debug


组件将完整的记录输出信息和调试信息。





利用此控件只需要几行简单的代码 就可以设计一个动态样式的菜单。可以完全使用


javascrīpt

< br>构造一个菜单，


can be layered on top of semantic unordered lists


。




Text Editor



类似


word


的一个文本编辑器

< p>




提供一个可滑动的 组件，它允许使用者在一定的范围内（


x


轴，

< br>y


轴）改变滑块的


位置。




w



ew


提供一个节点可缩放的树形控件。节点可以是链接，自定义属性，并且可以动

< p>
态加载。节点元素的展现可以通过


CSS


修改，比 如文件夹视图，


TO


－


DO

< p>
任务列表或者其


他可视化处理





1.



YUI tree


①


YUI Tre eView


的结构目录：就是一些


CSS


、图片和


Js


文件，


assets< /p>


文件里面的是跟组


件样式相关的文件，如果要扩展树，可以修改这 里面的



等，可以自己添加图片。


Js< /p>


文件是


TreeView


的核心，里面有


TreeView


的功能实现以及各种


Node


的声明。




②


YUI TreeView


中的类：







de






de











de






de






ew







Anim






In






Out






这些类分成


3


部分看，第一部分是前面几个以


Node


结尾的类，这些类代 表是树上的节


点，其中最顶层的是


Node

，这个类是其他几种


Node


的父类。

Node


中有节点所具有的所有


属性和方法，比如


children


，


parent


，


depth


，


expan d()


，


collapse()


等等。




第二部分是


TreeView


这个类，这个类就像是一棵树的骨架，他有根有树干有树枝，可


以把上面介绍的


Node


节点挂在


Treeview


上，


Treeview


会统一管理记录这些节点。通过


TreeView

你可以很方便的定位到一个或一些节点


,


比如



getNodeByElement(),getNodeByIndex,


getNodeByProperty(), getNodesByProperty ()


。


通过


TreeView


可以控制一棵树是展开还是合拢，


可以移除一些节点等等。


TreeView


就是在全局上控制树上的


Node s


。




第三 部分是最后三个类，这三个类主要是个树增加一些动画的效果。




③


使用类构造


YUI tree


要使用


TreeView


组件，

< p>
需要先引入


TreeView


相关的


Js


和


Css


文件，


从代码中可以看出，


我们还引入了


< p>
和



，


这个文件包含了


YUI


中的一些全局对象以及全

< p>
局方法，还有一些命名空间比如：



，在

< p>
TreeView


中也有用到这些东西，所以


需要 把



这个文件也引入。


< br>里面有一些事件操作方法，比如给一些组件绑定


和监听事件之类的。



Example


：



1.


生成一棵树需要一个


TreeView


，这个


treeview


与

< p>
HTML


中的



某一个< /p>


Div


绑定，之后树就


生成在这个


Div


中。



2.


生成节点的时候用


new Y


de(


，


把节点挂


载到


Treeview


的根结点之上，之后构造父子关系就很简 单了，只要指定已经生成节点作为


父亲就可以。



3.


最后调用


treeview

的


draw


方法把树显示出来。



生成如下图所示的树






HTML


PUBLIC



HTML


4.01//EN











YUI Tree Test







< p>
rel=


type=


href=

< br>















引入相关文


件



与


Div


绑定



生成节点



显示树



从


这


个


例


子


可


以


看


出


，


TreeView


是


整


棵


树


的


总


枢< /p>


纽


，


其


构


造


函


数


是

< p>
ew ( id )


，构造方法只有一个参数，就是


HTML


中的


Div


元素的


ID


，


在此


Div


中挖坑种树。


TreeView


里面有不少 属性，


用于与


HTML


元素做绑定，< /p>


记录


TreeView


的状态等等，这些 属性只要构建好了树，就由树内部做管理，一般情况下都不会使用到。


TreeView


还


有


很


多


控


制


相


关


的


方


法


，


比


如


expand


，


collpase()


，


removeChi ldren()


，


getNodeByIndex()


等等。方法的实现，略。




④


几种常用的方法：



/*


插入节点的方法


*/


i) appendTo(parentNode) {










return Child(this);


}//


很常用的插入节点的方法



但被插入到了参数节点子节点的最后一个



ii) insertBefore: function(node)






如果这个节点在一个树里则先从这棵树里把该节点删除（注意：


ap pendTo


可没有删）


,


然后获取参 数


node


父节点的孩子列表以及该参数


node


的位置以此操作该孩子列表在参数节


点的位置前面添 加实现添加。然后重定向该节点和参数


node


的前后


sibling


属性


,


最后调用


applyParent()


方法

,


重设


depth


同时也把自己的 子节点也引过来了



iii) insertAfter: function(node)


机理同上



只在第二步操作的位置不一样罢了



/ *


几个获取


ID


的方法


*/


i) getElId()


返回这个节点容器


div


的


id



id


结构：



ii)


getChildrenElId()


返回节点的


Children


节点

< br>DIV


的


id


注意是所有子节 点在一个


DIV


里




id


结构




iii)


getToggleElId()




返回节点的


toggle


的

< p>
id




id


结构：





toggle


区域就


是



树种节点的左边的


+ -


号的区域



*


这些个方法都对应有通过


id


获取到对象的方法



getEl() getChildrenEl() getToggleEl()


/*


节点的收起展开

< p>
*/


（可以添加一些自定义的事件）



i) collapse()


隐藏起子节点（如果有必要的话可创建子节点）







核心是


:


一堆判断之后


调用



ildren()


方法



此方法即获取孩子区域的对象将其


display


属 性设为


none


，


当然了，

< p>
也调用了


Icon()


方法，

此方法用于更新了左边的


+


-


显示



ii) expand


（


boolea n


）显示子节点








核心：


也是一堆的判断之后调用


ildre n()


此方法即获取孩子区域的对象将其


display


属性设为



iii) expandAll()


和



collapseAll()


很显然



这两个方法是同时展开或收起所有节点以下的节点



/*


这个跟动态加载相关


*/


i) setDynamicLoad(fnDataLoader, iconMode)







设置第一次展开节点时动态加载子节点数据的方法


< p>
获取方法通过参数


fnDataLoader


传< /p>


递给节点的


dataLoader


属性< /p>




fnDataLoader


方法的参数




第一个是


Node

< br>节点类型



第二个是


回调函数



如果不设置回调函数的话



在第一次加 载之后节点会关闭动态生成（即设


dynamicLoadComplete

< p>
为


true


）因为你不指定的话


,


会调用默认的



ii) setDynamicLoad


（）第二个参数可选



int


型


,


会赋给


iconMode


属性（具体用途见前面的属


性解析）



/*


这个很重要跟自定义节点有关


*/


getNodeHtml()


这个方法被设计用来被重写的，


本身返回空字符串，


以便支持不同种的


Node.


方法会在生成节点的时候把取得的


html


写入节点，从而产生了各种不同的节点样式



getChildrenHtml()


在构建树的时候会被调 用，


我们总是先构建装子节点的


div


但并不提供进


去信息，除非这个节点被展开



getHtml()


这个方法


= getNodeHtml()+getChildrenHtml()


refresh()



将节点


getHtml()


获得的


html


写入到子节点的区域里



getStyle()


获取节点应有的左边


+ -


号状态



updateIcon()


方法会调用




isRoot()


返回节点是否为根节点



isChil dOf(parentNode


）


获取该节点在父节点的孩子节 点列表中的位置



insertBefore/insertA fter


方法第二步调用了该方法



getSiblings()


返回所有的兄弟节点，包括节点自己



isDynamic()


返回节点的子节点是否应该是被动态生成的





getAncestor: function(depth)


返回节点某一深度的祖先




table


①

< br>高亮显示


row,cell,column


Row


高亮：



myDataTableY


.subscribe(


myD ataTableY


.onEventHighlightRow


);



myDataTableY


.subscribe(


.onEventHighlightRow);


cell


高亮：


myDataTableY


.subscribe(


tHi ghlightCell


);



my DataTableY


.subscribe(


.onEven tHighlightCell);


column


高亮：



myDataTableY


.subscribe(


m yDataTableY


.onEventHighlightColumn

< p>
);



myDataTableY


.subscribe(



②


datasource


数据类型


















TYPE_UNKNOWN

















TYPE_JSARRAY



常用


















TYPE_JSON



常用


















TYPE_XML

















TYPE_TEXT

















TYPE_HTMLTABLE



eg: TYPE_JSON







-


-


-


-


-


-


-


-



本文更新与2021-02-28 04:25，由作者提供，不代表本网站立场，转载请注明出处：https://www.bjmy2z.cn/gaokao/678496.html

返回列表：英语

YUI 开发文档的相关文章

YUI 开发文档随机文章
YUI 开发文档热门标签