YUI 开发文档.doc

YUI 开发文档 表格和树YUI组件分为两类：工具包和控件库YUI工具包：1.Animation Utility 动画（Animation）：在你的页面中通过指定位置，大小，透明度或者页面元素的其他特性来创建一个电影效果（cinematic effects）。这些效果将在你的页面发生变化的时候给用户更好的体验。2.Browser History Manager 3.Connection Manager (for XHR/Ajax) 连接管理（Connection Manager）：这个工具包帮助你管理XMLHttpRequest（一般被称为AJAX）事务，它提供对表单提交（form posts），错误捕获（error handling）和callbacks的全面支持。该工具包也支持文件的上传管理。 4.DataSource Utility 数据源工具： 5.Drag and Drop Utility 拖放（Drag and Drop）：创建可拖放的对象。为了提供丰富的交互功能（比如拖动一个对象到目标位置）你可能需要编写很多代码。这个工具包可以在所有支持的浏览器中捕获所有的操作事务并保证其稳定地运行。 6.Element Utility 7.Get Utility 动态的添加外部Javascript和CSS。 8.ImageLoader Utility 加载图像工具 9.JSON Utility 这将做解析JSON的首选组件。 10.Profiler 通过编程方式查看应用的动行情况。可以很方便的观察程序的执行性能。 11.Selector Utility 实现用类似CSS Selector的方式收集Node元素。最常用的方法query()。YUI控件库1.AutoComplete 自动完成控件为文本输入提供一种渐进式的用户体验（streamline user interactions）。控件会提供相似项列表和基于多样化的数据格式的提前键入功能（type-ahead functionality based on a variety of data-source formats），并且可以通过XMLHttpRequest访问服务端的数据。 2.Button 一个按钮控件 3.Calendar 一个用来日期选择的动态图形控件 4.Charts experimental 混合了javascript和flash，支持显示条形，曲线和饼图。 5.Color Picker 一个选择颜色的控件 6.Container (including Module, Overlay, Panel, Tooltip, Dialog, SimpleDialog) 一组模仿windows样式的控件，他们包括Tooltip, Panel, Dialog 和 SimpleDialog。其中Module 和 Overlay控件提供一个可扩展的平台，你可以控制自定义的模仿windows样式的控件 7.DataTable 表格及其相关操作 8.Logger 提供一个快速和简单的记录日志的方式，它直接将日志信息输出到屏幕控制台（on-screen console）、Firefox的扩展组件FireBug，或者Safari的Javascrpt控制台。yui的Debug组件将完整的记录输出信息和调试信息。 9.Menu 利用此控件只需要几行简单的代码就可以设计一个动态样式的菜单。可以完全使用javascrpt构造一个菜单，can be layered on top of semantic unordered lists。 10.Rich Text Editor 类似word的一个文本编辑器 11.Slider 提供一个可滑动的组件，它允许使用者在一定的范围内（x轴，y轴）改变滑块的位置。 12.TabView 13.TreeView 提供一个节点可缩放的树形控件。节点可以是链接，自定义属性，并且可以动态加载。节点元素的展现可以通过CSS修改，比如文件夹视图，TODO任务列表或者其他可视化处理 1. YUI treeYUI TreeView的结构目录：就是一些CSS、图片和Js文件，assets文件里面的是跟组件样式相关的文件，如果要扩展树，可以修改这里面的treeview.css等，可以自己添加图片。Js文件是TreeView的核心，里面有TreeView的功能实现以及各种Node的声明。YUITreeView中的类： 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。第三部分是最后三个类，这三个类主要是个树增加一些动画的效果。使用类构造YUI tree要使用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. 生成节点的时候用new YAHOO.widget.TextNode(node,treeView.getRoot(),false)，把节点挂载到Treeview的根结点之上，之后构造父子关系就很简单了，只要指定已经生成节点作为父亲就可以。3. 最后调用treeview的draw方法把树显示出来。生成如下图所示的树 YUI Tree Testfunction init()var treeView = new YAHOO.widget.TreeView(demoTreeDiv);var node1 = new YAHOO.widget.TextNode(node,treeView.getRoot(),false);var node2 = new YAHOO.widget.TextNode(node1,node1,false);var node3 = new YAHOO.widget.TextNode(node2,node2,false);var node4 = new YAHOO.widget.TextNode(node3,node3,false);var node5 = new YAHOO.widget.TextNode(node4,node3,false);treeView.draw();引入相关文件与Div绑定生成节点显示树从这个例子可以看出，TreeView是整棵树的总枢纽，其构造函数是YAHOO.widget.TreeView ( id )，构造方法只有一个参数，就是HTML中的Div元素的ID，在此Div中挖坑种树。TreeView里面有不少属性，用于与HTML元素做绑定，记录TreeView的状态等等，这些属性只要构建好了树，就由树内部做管理，一般情况下都不会使用到。TreeView还有很多控制相关的方法，比如expand，collpase()，removeChildren()，getNodeByIndex()等等。方法的实现，略。几种常用的方法：/*插入节点的方法*/i) appendTo(parentNode) return parentNode.appendChild(this);/很常用的插入节点的方法 但被插入到了参数节点子节点的最后一个ii) insertBefore: function(node) 如果这个节点在一个树里则先从这棵树里把该节点删除（注意：appendTo可没有删）,然后获取参数node父节点的孩子列表以及该参数node的位置以此操作该孩子列表在参数节点的位置前面添加实现添加。然后重定向该节点和参数node的前后sibling属性,最后调用applyParent()方法,重设depth同时也把自己的子节点也引过来了iii) insertAfter: function(node)机理同上 只在第二步操作的位置不一样罢了/*几个获取ID的方法*/i) getElId() 返回这个节点容器div的id id结构：ygtv + this.indexii) getChildrenElId() 返回节点的Children节点DIV的id 注意是所有子节点在一个DIV里 id结构 ygtvc + this.index;iii) getToggleElId() 返回节点的toggle的id id结构：ygtvt+ this.index toggle区域就是 树种节点的左边的+ -号的区域*这些个方法都对应有通过id获取到对象的方法 getEl() getChildrenEl() getToggleEl()/*节点的收起展开*/（可以添加一些自定义的事件）i) collapse() 隐藏起子节点（如果有必要的话可创建子节点） 核心是:一堆判断之后 调用 this.hideChildren()方法 此方法即获取孩子区域的对象将其display属性设为none，当然了，也调用了this.updateIcon()方法，此方法用于更新了左边的+ -显示ii) expand（boolean）显示子节点 核心：也是一堆的判断之后调用this.showChildren() 此方法即获取孩子区域的对象将其display属性设为iii) expandAll() 和 collapseAll() 很显然 这两个方法是同时展开或收起所有节点以下的节点/*这个跟动态加载相关*/i) setDynamicLoad(fnDataLoader, iconMode) 设置第一次展开节点时动态加载子节点数据的方法 获取方法通过参数fnDataLoader传递给节点的dataLoader属性 fnDataLoader方法的参数 第一个是Node节点类型 第二个是回调函数 如果不设置回调函数的话 在第一次加载之后节点会关闭动态生成（即设dynamicLoadComplete为true ）因为你不指定的话,会调用默认的ii) 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. YUI table高亮显示row,cell,columnRow高亮：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_HTMLTABLEeg: TYPE_JSONYAHOO.util.Event.addListener(window, load, function() YAHOO.example.Basic = function() var data=recordsReturned:2,totalRecords:2,startIndex:0,sort:null,dir:asc,records: id:po-0167, date:new Date(1980, 2, 24), quantity:1, amount:4, title:A Book About Nothing, description: Lorem ipsum , id:po-0783, date:new Date(January 3, 1983), quantity:0, amount:12.12345, title:The Meaning of Life, description: Vestibulum scelerisque ; var myColumnDefs = key:id, sortable:true, resizeable:true, key:date, formatter:YAHOO.widget.DataTable.formatDate, sortable:true, sortOptions:defaultDir:YAHOO.widget.DataTable.CLASS_DESC,resizeable:true, key:quantity, formatter:YAHOO.widget.DataTable.formatNumber, sortable:true, resizeable:true, key:amount, formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true, resizeable:true, key:title, sortable:true, resizeable:true ; var myDataSource = new YAHOO.util.DataSource(data); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; myDataSource.responseSchema = resultsList: records, fields: id,date,quantity,amount,title ; var myDataTable = new YAHOO.widget.DataTable(basic, myColumnDefs, myDataSource); return oDS: myDataSource, oDT: myDataTable ; (););选中行及数据myDataTableY.subscribe(rowDblclickEvent,getSelectedVehicleInfo); /或者 rowClickEvent function getSelectedVehicleInfo() var rowArray = myDataTableY.getSelectedRows(); /获取选中的行index console.log(rowArray); var infoArray = myDataTableY.getRecord(rowArray0); /获取数据 console.log(infoArray); console.log(infoArray._oData); console.table(infoArray._oData); console.log(车辆id：+infoArray._oData.VEHICLEID); 多行表头 使用column 的children属性YAHOO.util.Event.addListener(window, load, function() YAHOO.example.Basic = function() var myColumnDefs = key:id, sortable:true, resizeable:true, label:data,children: key:date, formatter:YAHOO.widget.DataTable.formatDate, sortable:true, sortOptions:defaultDir:YAHOO.widget.DataTable.CLASS_DESC,resizeable:true, key:quantity, formatter:YAHOO.widget.DataTable.formatNumber, sortable:true, resizeable:true, key:amount, formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true, resizeable:true, key:title, sortable:true, resizeable:true ; var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.bookorders); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; myDataSource.responseSchema = fields: id,date,quantity,amount,title ; var myDataTable = new YAHOO.widget.DataTable(basic, myColumnDefs, myDataSource); return oDS: myDataSource, oDT: myDataTable ; (););带滚动条的表格YAHOO.util.Event.addListener(window, load, function() YAHOO.example.Scrolling = function() var myColumnDefs = key:field1, width:50, key:field2, width:100, formatter:date, key:field3, width:50, key:field4, width:50, key:field5, width:50, key:field6, width:150 ; var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.multitypes); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; myDataSource.responseSchema = resultsList: items, fields: key:field1, key:field2, formatter:date, key:field3, key:field4, key:field5, key:field6 ; / Set width and height as string values var myDataTableXY = new YAHOO.widget.ScrollingDataTable(xyscrolling, myColumnDefs, myDataSource, width:30em, height:10em); / Set height as a string value return oDS: myDataSource, oDTXY: myDataTableXY, ; (););添加行和删除行/添加addRow(oData , index)addRows(oData, index)Eg:var myDataTable = new YAHOO.widget.DataTable(basic, myColumnDefs, myDataSource);myDataTable.subscribe(rowClickEvent,addInfo);function addInfo() var oData= id:po-0167, date:new Date(1980, 2, 24), quantity:1, amount:4, title:A Book About Nothing, description: Lorem ipsum; myDataTable.addRow(oData,0); /删除deleteRow(index)deleteRows(index,count)Eg:var myDataTable = new YAHOO.widget.DataTable(basic, myColumnDefs, myDataSource);myDataTable.subscribe(rowClickEvent,deleteInfo);func