YUI 开发文档.docx
《YUI 开发文档.docx》由会员分享，可在线阅读，更多相关《YUI 开发文档.docx（12页珍藏版）》请在冰豆网上搜索。
YUI开发文档
YUI开发文档表格和树
YUI组件分为两类：
工具包和控件库
YUI工具包：
1.AnimationUtility动画（Animation）：
在你的页面中通过指定位置，大小，透明度或者页面元素的其他特性来创建一个"电影效果（cinematiceffects）"。
这些效果将在你的页面发生变化的时候给用户更好的体验。
2.BrowserHistoryManager
3.ConnectionManager（forXHR/Ajax）连接管理（ConnectionManager）：
这个工具包帮助你管理XMLHttpRequest（一般被称为AJAX）事务，它提供对表单提交（formposts），错误捕获（errorhandling）和callbacks的全面支持。
该工具包也支持文件的上传管理。
4.DataSourceUtility数据源工具：
5.DragandDropUtility拖放（DragandDrop）：
创建可拖放的对象。
为了提供丰富的交互功能（比如拖动一个对象到目标位置）你可能需要编写很多代码。
这个工具包可以在所有支持的浏览器中捕获所有的操作事务并保证其稳定地运行。
6.ElementUtility
7.GetUtility动态的添加外部Javascript和CSS。
8.ImageLoaderUtility加载图像工具
9.JSONUtility这将做解析JSON的首选组件。
10.Profiler通过编程方式查看应用的动行情况。
可以很方便的观察程序的执行性能。
11.SelectorUtility实现用类似CSSSelector的方式收集Node元素。
最常用的方法query（）。
YUI控件库
1.AutoComplete自动完成控件为文本输入提供一种渐进式的用户体验（streamlineuserinteractions）。
控件会提供相似项列表和基于多样化的数据格式的提前键入功能（type-aheadfunctionalitybasedonavarietyofdata-sourceformats），并且可以通过XMLHttpRequest访问服务端的数据。
2.Button一个按钮控件
3.Calendar一个用来日期选择的动态图形控件
4.Charts[experimental]混合了javascript和flash，支持显示条形，曲线和饼图。
5.ColorPicker一个选择颜色的控件
6.Container（includingModule,Overlay,Panel,Tooltip,Dialog,SimpleDialog）一组模仿windows样式的控件，他们包括Tooltip,Panel,Dialog和SimpleDialog。
其中Module和Overlay控件提供一个可扩展的平台，你可以控制自定义的模仿windows样式的控件
7.DataTable表格及其相关操作
8.Logger提供一个快速和简单的记录日志的方式，它直接将日志信息输出到屏幕控制台（on-screenconsole）、Firefox的扩展组件FireBug，或者Safari的Javascrīpt控制台。
yui的Debug组件将完整的记录输出信息和调试信息。
9.Menu利用此控件只需要几行简单的代码就可以设计一个动态样式的菜单。
可以完全使用javascrīpt构造一个菜单，canbelayeredontopofsemanticunorderedlists。
10.RichTextEditor类似word的一个文本编辑器
11.Slider提供一个可滑动的组件，它允许使用者在一定的范围内（x轴，y轴）改变滑块的位置。
12.TabView
13.TreeView提供一个节点可缩放的树形控件。
节点可以是链接，自定义属性，并且可以动态加载。
节点元素的展现可以通过CSS修改，比如文件夹视图，TO－DO任务列表或者其他可视化处理
1.YUItree
YUITreeView的结构目录：
就是一些CSS、图片和Js文件，assets文件里面的是跟组件样式相关的文件，如果要扩展树，可以修改这里面的treeview.css等，可以自己添加图片。
Js文件是TreeView的核心，里面有TreeView的功能实现以及各种Node的声明。
YUI TreeView中的类：
YAHOO.widget.HTMLNode
YAHOO.widget.MenuNode
YAHOO.widget.Node
YAHOO.widget.RootNode
YAHOO.widget.TextNode
YAHOO.widget.TreeView
YAHOO.widget.TVAnim
YAHOO.widget.TVFadeIn
YAHOO.widget.TVFadeOut
这些类分成3部分看，第一部分是前面几个以Node结尾的类，这些类代表是树上的节点，其中最顶层的是Node，这个类是其他几种Node的父类。
Node中有节点所具有的所有属性和方法，比如children，parent，depth，expand（），collapse（）等等。
第二部分是TreeView这个类，这个类就像是一棵树的骨架，他有根有树干有树枝，可以把上面介绍的Node节点挂在Treeview上，Treeview会统一管理记录这些节点。
通过TreeView你可以很方便的定位到一个或一些节点,比如getNodeByElement（）,getNodeByIndex,getNodeByProperty（）,getNodesByProperty（）。
通过TreeView可以控制一棵树是展开还是合拢，可以移除一些节点等等。
TreeView就是在全局上控制树上的Nodes。
第三部分是最后三个类，这三个类主要是个树增加一些动画的效果。
使用类构造YUItree
要使用TreeView组件，需要先引入TreeView相关的Js和Css文件，从代码中可以看出，我们还引入了yahoo.js和event.js，yahoo.js这个文件包含了YUI中的一些全局对象以及全局方法，还有一些命名空间比如：
YAHOO.widget，在TreeView中也有用到这些东西，所以需要把yahoo.js这个文件也引入。
Event.js里面有一些事件操作方法，比如给一些组件绑定和监听事件之类的。
Example：
1.生成一棵树需要一个TreeView，这个treeview与HTML中的某一个Div绑定，之后树就生成在这个Div中。
2.生成节点的时候用newYAHOO.widget.TextNode（"node",treeView.getRoot（）,false），把节点挂载到Treeview的根结点之上，之后构造父子关系就很简单了，只要指定已经生成节点作为父亲就可以。
3.最后调用treeview的draw方法把树显示出来。
生成如下图所示的树
从这个例子可以看出，TreeView是整棵树的总枢纽，其构造函数是YAHOO.widget.TreeView（id），构造方法只有一个参数，就是HTML中的Div元素的ID，在此Div中挖坑种树。
TreeView里面有不少属性，用于与HTML元素做绑定，记录TreeView的状态等等，这些属性只要构建好了树，就由树内部做管理，一般情况下都不会使用到。
TreeView还有很多控制相关的方法，比如expand，collpase（），removeChildren（），getNodeByIndex（）等等。
方法的实现，略。
几种常用的方法：
/*插入节点的方法*/
）appendTo（parentNode）{
returnparentNode.appendChild（this）;
}//很常用的插入节点的方法但被插入到了参数节点子节点的最后一个
）insertBefore:
function（node）
如果这个节点在一个树里则先从这棵树里把该节点删除（注意：
appendTo可没有删）,然后获取参数node父节点的孩子列表以及该参数node的位置以此操作该孩子列表在参数节点的位置前面添加实现添加。
然后重定向该节点和参数node的前后sibling属性,最后调用applyParent（）方法,重设depth同时也把自己的子节点也引过来了
）insertAfter:
function（node）
机理同上只在第二步操作的位置不一样罢了
/*几个获取ID的方法*/
）getElId（）返回这个节点容器div的idid结构：
"ygtv"+this.index
）getChildrenElId（）返回节点的Children节点DIV的id注意是所有子节点在一个DIV里id结构"ygtvc"+this.index;
）getToggleElId（）返回节点的toggle的idid结构：
"ygtvt"+this.indextoggle区域就是树种节点的左边的+-号的区域
*这些个方法都对应有通过id获取到对象的方法getEl（）getChildrenEl（）getToggleEl（）
/*节点的收起展开*/（可以添加一些自定义的事件）
）collapse（）隐藏起子节点（如果有必要的话可创建子节点）
核心是:
一堆判断之后调用this.hideChildren（）方法此方法即获取孩子区域的对象将其display属性设为none，当然了，也调用了this.updateIcon（）方法，此方法用于更新了左边的+-显示
）expand（boolean）显示子节点
核心：
也是一堆的判断之后调用this.showChildren（）此方法即获取孩子区域的对象将其display属性设为""
）expandAll（）和collapseAll（）很显然这两个方法是同时展开或收起所有节点以下的节点
/*这个跟动态加载相关*/
）setDynamicLoad（fnDataLoader,iconMode）
设置第一次展开节点时动态加载子节点数据的方法获取方法通过参数fnDataLoader传递给节点的dataLoader属性fnDataLoader方法的参数第一个是Node节点类型第二个是回调函数如果不设置回调函数的话在第一次加载之后节点会关闭动态生成（即设dynamicLoadComplete为true）因为你不指定的话,会调用默认的
）setDynamicLoad（）第二个参数可选int型,会赋给iconMode属性（具体用途见前面的属性解析）
/*这个很重要跟自定义节点有关*/
getNodeHtml（）这个方法被设计用来被重写的，本身返回空字符串，以便支持不同种的Node.方法会在生成节点的时候把取得的html写入节点，从而产生了各种不同的节点样式
getChildrenHtml（）在构建树的时候会被调用，我们总是先构建装子节点的div但并不提供进去信息，除非这个节点被展开
getHtml（）这个方法=getNodeHtml（）+getChildrenHtml（）
refresh（）将节点getHtml（）获得的html写入到子节点的区域里
getStyle（）获取节点应有的左边+-号状态updateIcon（）方法会调用
isRoot（）返回节点是否为根节点
isChildOf（parentNode）获取该节点在父节点的孩子节点列表中的位置insertBefore/insertAfter方法第二步调用了该方法
getSiblings（）返回所有的兄弟节点，包括节点自己
isDynamic（）返回节点的子节点是否应该是被动态生成的
getAncestor:
function（depth）返回节点某一深度的祖先
2.YUItable
高亮显示row,cell,column
Row高亮：
myDataTableY.subscribe（"rowMouseoverEvent",myDataTableY.onEventHighlightRow）;
myDataTableY.subscribe（"rowMouseoutEvent",myDataTableY.onEventHighlightRow）;
cell高亮：
myDataTableY.subscribe（"cellMouseoverEvent",myDataTableY.onEventHighlightCell）;
myDataTableY.subscribe（"cellMouseoutEvent",myDataTableY.onEventHighlightCell）;
column高亮：
myDataTableY.subscribe（"theadCellMouseoverEvent",myDataTableY.onEventHighlightColumn）;
myDataTableY.subscribe（"theadCellMouseoutEvent",yDataTableY.onEventUnhighlightColumn）;
datasource数据类型
TYPE_UNKNOWN
TYPE_JSARRAY常用
TYPE_JSON常用
TYPE_XML
TYPE_TEXT
TYPE_HTMLTABLE
eg:
TYPE_JSON
选中行及数据
多行表头使用column的children属性
带滚动条的表格
添加行和删除行
//添加
addRow（oData,index）
addRows（oData,index）
Eg:
varmyDataTable=newYAHOO.widget.DataTable（"basic",
myColumnDefs,myDataSource）;
myDataTable.subscribe（"rowClickEvent",addInfo）;
functionaddInfo（）{
varoData={id:
"po-0167",date:
newDate（1980,2,24）,quantity:
1,amount:
4,title:
"ABookAboutNothing",
description:
"Loremipsum"};
myDataTable.addRow（oData,0）;
}
//删除
deleteRow（index）
deleteRows（index,count）
Eg:
varmyDataTable=newYAHOO.widget.DataTable（"basic",
myColumnDefs,myDataSource）;
myDataTable.subscribe（"rowClickEvent",deleteInfo）;
functiondeleteInfo（）{
myDataTable.deleteRow（0）;
//获取下表getTrIndex（row）;row为record返回index
}
格式化利用列的formatter属性
Eg：
{key:
"OnLineStatus",label:
"",width:
30,resizeable:
true,formatter:
"changeLight"},
YAHOO.widget.DataTable.Formatter.changeLight=function（elCell,oRecord,oColumn,oData）{
elCell.innerHTML="";
};
11获取record或相关数据等
DataTable.getRecordSet（）//获取记录集合对象
DataTable.getRecordSet（）.getRecords（）//获取对象中记录
DataTable.getRecordSet（）.getRecords（）[i]._oData//表的行实际数据
3.YUIforms
用YUI的方式提交表单，ConnectionManager中方法解决，可以get和postHTML表单数据
Eg1：
//参数formId可以是HTML表单的id或name属性值，或一个HTML表单对象。
varformObject=document.getElementById（'aForm'）;
YAHOO.util.Connect.setForm（formObject）;
//这个例子是一个POST事务。
POST数据（HTML表单）调用setForm（）时被初始化，并调用asyncRequest时，它会自动包括在内。
varcObj=YAHOO.util.Connect.asyncRequest（'POST','',callback）;
Eg2：
varformObject=document.getElementById（'aForm'）;
//第二个参数是true，表示文件上传。
YAHOO.util.Connect.setForm（formObject,true）;
varcObj=YAHOO.util.Connect.asyncRequest（'POST','',callback）;
Eg3：
//第三个参数设置为true有连接管理器设置iframe的”javascript：
false”。
YAHOO.util.Connect.setForm（formObject,true,true）;
升级会员 