YUI 中文文档（2）

6.5. DataTable

DataTable 的引入

<!— 需要的 CSS -->

build/datatable/assets/datatable.css

build/yahoo-dom-event/yahoo-dom-event.js

build/connection/connection-min.js

<!— 可选项，用到调整列宽时需要 -->

build/dragdrop/dragdrop-min.js

build/datasource/datasource-beta-min.js

build/datatable/datatable-beta-min.js

DataTable 的使用

1. 定义表头

var myColumnHeaders = [

{key:"name" , text:" 姓名 " },

{key:"stdno" , text:" 学号 " },

{key:"age" , text:" 年龄 " , type:"number" }

];

YAHOO.widget.ColumnSet 的属性说明

属性名称	含义
key	列的属性名
text	列的显示名称
type	列的类型，包括 "string", "number", "date", "currency", "checkbox", "select", "email", "link" ，缺省为 ”string”
resizeable	Boolean 值，是否可通过拖动改变列宽度
sortable	Boolean 值，是否可排序
abbr
children	定义子表头，类型为 YAHOO.widget.ColumnSet
width	列宽度，单位为 px
className	定义本列单元格的样式名称
formatter	定义本列单元格的格式化函数 function(elCell, oRecord, oColumn, oData)
parse
editor	定义可编辑的列，可用的值为 ”textbox” ， ”textarea”
descFunction	递减排序的函数 function(a,b)
ascFunction	递增排序的函数 function(a,b)

2. 创建 datatable

var myDataTable = new YAHOO.widget.DataTable(

"myContainer" , //datatable 绑定的页面 element(DIV)

myColumnSet, // 表头定义 , YAHOO.widget.ColumnSet

myDataSource, // 数据源

{caption:"My Caption" ,summary:" 摘要 " } //datatable 的配置集

);

DataTable 的配置集

属性名称	含义
caption	表格的表头文字
summary	表格摘要
paginator	Boolean 值，是否分页，缺省为 false
paginatorOptions	{ containers: rowsPerPage: 每页显示的记录数 , pageLinks: 最多显示的页面链接数， 0 为全部 currentPage: 当前页 dropdownOptions: 下拉框选择项， null 表示不使用下拉框 }
initialRequest	XHR 方式下，附加的请求参数
fixedWidth	固定表格宽度
scrollable	表格有滚动条，滚动时表格表头保持不动， Boolean 值
rowSingleSelect	只允许选择一行， Boolean 值
contextMenu	表格的上下文菜单，右键弹出， YAHOO.widget.ContextMenu
sortedBy	{ colKey ：排序的列 , dir: 排序的方向， "desc" 和 "asc" }
pageCurrent	表格的当前页

3. DataTable 的数据源

DS_JSArray

以对象数组的方式使用，可以是在客户端定义对象数组，也可以通过 DWR 的方式调用 JAVA 的方法获取一个 JAVA 类的 List 列表，在回调函数中以数组方式使用。

var commonDataSource = new YAHOO.util.DataSource(data);

//data 可以为用 javascript 定义的对象数组，也可以是 DWR 方式下回调函数的参数

commonDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;

JSON

使用 JSON 对象时

var myDataSource = new YAHOO.util.DataSource( "query.action" );

myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;

myDataSource.responseSchema = {

resultsList: "result.data" , // 结果集所在的 JSON 结构中的对象

fields: [ "id" , "username" , "email" , "monicker" , "edit" , "del" ]

} ;

XML

var myDataSource = new YAHOO.util.DataSource( "query.action" );

myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;

myDataSource.responseSchema = {

resultNode: "Item" , // 结果集所在的 XML 结构中的结点

fields: [ "Company" , "Title" , "Name" , "Phone" , "Email" ] // 表格的列

} ;

Plain Text Data

var myDataSource = new YAHOO.util.DataSource( "query.action" );

myDataSource.responseType = YAHOO.util.DataSource.TYPE_TEXT;

myDataSource.responseSchema = {

recordDelim: "/n" , // 记录的分割符

fieldDelim: "," , // 字段的分割符

fields: [ "Company" , "Title" , "Name" , "Phone" , "Email" ] // 表格的列

} ;

4. DataTable 数据的访问

这里主要指通过 javascript 访问 DataTable 数据时采用的方式。

var rs = YAHOO.Claim.commonDataTable.getRecordSet();

var obj = rs.getRecord(i); // 获取第 i 行的数据对象

对象 obj 的属性就是定义表头时指定的各列的 key 值，可以通过 obj[key 值 ] 访问该行上的各列属性值。

5. 测试

6.6. DragDrop

6.7. TreeView

6.8. Container

一组模拟 windows 控件的组件

Container 下的控件继承关系

Overlay

Module

ToolTip

Dialog

SimpleDialog

Panel

Container 的引入

build/yahoo-dom-event/yahoo-dom-event.js

<!— 可选项：如果不使用 Dialog/SimpleDialog 则不需要 -->

build/connection/connection-min.js

<!— 可选项：使用动画效果时用到 -->

build/animation/animation-min.js

build/container/container-min.js

6.8.1. Container 下的控件

由于 Container 下的控件的创建方式和属性控制方式基本相同，可以在创建组件时通过 config 对象指定控件的各项属性，也可以在创建后通过 myContainer.cfg.setAttribute 来设置控件属性，通过对这些属性的控制来实现控件的不同动作表现。因此对于各个子控件的属性在下面采用配置集的方式用一个表格来说明。

Module

一种最基础的控件模块，通过 Module 可以创建一个从 HTML 中继承下来的 javascript 对象，你可以操作页面中的 module, 也可以动态创建新的 module 。 module 是没有预定义样式的，必须手动定义。

使用 Module 必需的引入

build/yahoo-demo/yahoo-dom-event.js

build/container/container_core-min.js

初始化的方式：

constructor ： YAHOO.widget.Module(ModuleId,{ 配置集 });

moduleId 如果页面中已经定义了 moduleId, 则可以直接调用 render 函数将设置的各种属性直接应用到 module 上，如果页面中没有定义这个 id, 则必须调用 render(DOM 中已经存在的 element) 将 module 插入到 DOM 中。

显示 / 隐藏 Module

方式一：

myModule.show();

myModule.hide();

方式二：

myModule.cfg.setProperty("visible", true);

myModule.cfg.setProperty("visible", false);

配置集的说明

属性名称	含义	备注
visible	Module 是否可见， Boolean 值
monitorresize	设置是否创建一个不可见的屏幕元素用来监听 DOM 中文字大小的改变， Boolean 值

6.8.2. Overlay

对 Module 的一种扩展，但和 Module 不同的是 Overlay 可以通过绝对方式定位，并且是浮动窗口，不会影响页面中原有的内嵌标签的布局。与 Module 相同的是：也没有预先定义样式，必须手动设置。

初始化的方式

与 Module 相同

位置设定

1．绝对定位：

myOverlay.cfg.setProperty("x", 100);

myOverlay.cfg.setProperty("y", 200);

myOverlay.cfg.setProperty("xy", [100,200]);

2．居中

窗口中居中： myOverlay.center();

屏幕居中： myOverlay.cfg.setProperty("fixedcenter", true);

3．对齐

// myOverlay's 右上角对齐 myContextEl 的左上角

myOverlay.cfg.setProperty("context", ["myContextEl", "tr", "tl"]);

设置过对齐方式后可以直接使用 align 来改变对齐方式

// myOverlay's 右上角对齐 "myContextEl"'s 左下角 .

myOverlay.align("tr", "bl");

注：对齐方式的写法 : top->t ,left ->l, ,bottom->,right->r

top-left 就表示为 tl

配置集

属性名称	含义
x	设置元素的 left 属性
y	设置元素的 top 属性
xy	设置元素的 top,left 属性
context	停靠位置， [element, Overlay 的顶角 , 被停靠的 element 顶角 ]
effect	当 Overlay 显示或隐藏时的特效对象 .
fixedcenter	窗口大小改变或滚屏时保持居中
width	设置元素的 width
height	设置元素的 height
zIndex	设置 Overlay 的遮盖顺序
constraintoviewport	设置为 true 时保持在视窗边界以内
iframe	设置为 true 时在 Overlay 后将存在一个 ifram, 防止被 Z 序高的 element 覆盖

已知的特效：

YAHOO.widget.ContainerEffect.SLIDE

YAHOO.widget.ContainerEffect.FADE 逐步变淡

OverlayManage

用于管理多个 Overlay 的组件，能够模拟类似于多窗口管理系统的交互，使得各个 Overlay 之间的能够正确的覆盖、获得焦点 / 失去焦点。

使用这一功能需要的代码很简单，只需要通过 register 方法登记所有需要纳入窗口管理的 Overlay 就可以了。

// 示例：

YAHOO.namespage(“demo”);

YAHOO.demo.manager = new YAHOO.widget.OverlayManager();

YAHOO.demo.manager.register( [Overlay 的数组列表 ] );

6.8.3. Tooltip

对象定义： YAHOO.widget.Tooltip

从 overlay 上扩展出来的控件，小的浮动窗口，动态生成，提供了预定义的样式。

Tooltip 的引入

build/container/assets/container.css

build/yahoo-dom-event/yahoo-dom-event.js

<!— 如果要改变页面元素的属性需要引入 -->

build/animation/animation-min.js

build/container/container-min.js

Tooltip 初始化方式

constructor ： YAHOO.widget.Tooltip(tooltipId , { 配置集 } );

tooltipId 可以是页面中未声明的控件。

Tooltip 配置集

属性名称	含义
text	提示文字
context	鼠标停靠 element ID
container	缺省为 document.body ，指明容器元素
preventoverlap	缺省为 true, 指明是否使用覆盖方式
showdelay	显示 tooltip 的延迟时间，单位毫秒
hidedelay	隐藏 tooltip 的延迟时间，单位毫秒
autodismissdelay	The number of milliseconds to wait before automatically dismissing a Tooltip after the mouse has been resting on the context element.

同时还继承了 Module,Overlay 的所有属性

6.8.4. Panel

从 overlay 扩展出来的一个组件，类似于操作系统的窗口。他不同于浏览器的弹出窗口，是内嵌在页面文件中的一种动态 Html 的 element 。他在 overlay 的基础上扩展了一些窗口的功能，如关闭、拖放等。 Panel 使用了预定义的样式表

Panel 的引入

build/container/assets/container.css

build/yahoo-dom-event/yahoo-dom-event.js

<!— 可选项：如果用到动画时需要引入 -->

build/animation/animation-min.js

<!— 可选项：如果用到拖放时需要引入 -->

build/dragdrop/dragdrop-min.js

build/container/container-min.js

Panel 的初始化

constructor ：

YAHOO.widget.Panel(panelId); // 使用缺省配置选项

YAHOO.widget.Panel(panelId,{ 自定义的配置项 }); // 使用自定义的配置项

Panel 的配置集

属性名称	含义
close	是否显示关闭按钮， true/false
draggable	是否可以拖动
underlay	阴影显示方式 shadow,none,matte, 缺省为 shadow ， none 为无阴影， matte 为白色边界
modal	Panel 获得焦点时，是否允许使用 Panel 以外的控件获得焦点，类似于 MFC 的模态 / 无模态对话框
keylisteners	响应按键事件的监听器列表

Panel 同时还继承了 Module,Overlay 的属性

6.8.5. Dialog

从 Panel 上扩展出来的组件，类似于 Windows 的窗口，在浏览器中提供了一种不用页面跳转就能使用交互来获取用户输入的交互方式，用户输入的数据都是通过一个标准的 HTML Form 获取的，并支持多种的获取输入数据的方式：普通的 Form 的提交， XMLHttpRequest ，或者完全通过脚本来读取。

Dialog 的引入

build/container/assets/container.css

build/yahoo-dom-event/yahoo-dom-event.js

<!— 可选项 : Animation (only required if enabling Animation) -->

build/animation/animation-min.js

<!— 可选项 : Drag & Drop (only required if enabling Drag & Drop) -->

build/dragdrop/dragdrop-min.js

build/connection/connection-min.js

build/container/container-min.js

Dialog 的初始化

constructor ： YAHOO.widget.Dialog(dialogId);

dialogId 为页面中已经申明的 element

Dialog 的配置集

属性名称	含义
postmethod	窗口提交的方式， async ：异步， form ：标准的 submit ， none ：不提交
buttons	dialog 中的 button 数组列表，

同时继承了 Overlay ， Panel 的属性

单个按钮对象的定义方式：

{ text: 按钮上的文本 ,

handler: 按钮的 click 事件响应函数

isDefault: 是否缺省按钮 },

6.8.6. SimpleDialog

从 Dialog 上扩展出来的一个组件 , 主要用于处理用户选择 Yes/NO ， OK/Cancel 的交互

SimpleDialog 的引入

build/container/assets/container.css

build/yahoo-dom-event/yahoo-dom-event.js

<!— 可选项：用到动画效果时使用 -->

build/animation/animation-min.js

<!— 可选项：用到拖放功能时使用 -->

build/dragdrop/dragdrop-min.js

<!— 可选项：用到异步提交方式时使用 ) -->

build/connection/connection-min.js

build/container/container-min.js

SimpleDialog 的初始化

constructor ： YAHOO.widget.SimpleDialog(dialogId,{ 配置集 });

dialogId 为页面中已经申明的 element

SimpleDialog 的配置集

属性名称

含义

text

对话框中显示的提示信息

icon

按钮图标：

ICON_BLOCK,

ICON_WARN,

ICON_HELP,

ICON_INFO,

ICON_ALARM,

ICON_TIP.

6.9. Grids

支持不规定宽度的设计

一组用于定义界面版式的样式表 (CSS 文件 )

6.10. TabView

用来创建导航 tab 栏组件

可以从 HTML 中的已经存在的标签来创建，也可以完全通过 javascript 创建，该组件的最上层元素为 <div> ，每一个 tab 页面项使用 <li>

TableView 的引入

/build/tabview/assets/tabview.css

build/tabview/assets/border_tabs.css

build/yahoo-dom-event/yahoo-dom-event.js

build/element/element-beta-min.js

<!— 可选项 : 使用动态加载时使用 -->

build/connection/connection-min.js

build/tabview/tabview-min.js

TableView 的初始化

constructor ： YAHOO.widget.TabView(tableViewId);

创建的方式：

1．页面中存在 id

<li class="selected"><a href="#tab1"><em>Tab One Label</em></a></li>

<li><a href="#tab2"><em>Tab Two Label</em></a></li>

<li><a href="#tab3"><em>Tab Three Label</em></a></li>

</ul>

<div><p>Tab One Content</p></div>

<div><p>Tab Two Content</p></div>

<div><p>Tab Three Content</p></div>

</div>

注：

yui-navset 为 css 文件中定义的 TableView 的样式

yui-nav 为 css 文件中定义的 Tab 页标签的样式

2．完全使用 JavaScript 创建 TabView

var myTabs = new YAHOO.widget.TabView("demo");

myTabs.addTab( new YAHOO.widget.Tab({

label: 'Tab One Label',

content: '<p>Tab One Content</p>',

active: true

}));

myTabs.addTab( new YAHOO.widget.Tab({

label: 'Tab Two Label',

content: '<p>Tab Two Content</p>'

}));

myTabs.appendTo(document.body);

</script>

TableView 的配置集

属性名称	含义
activeIndex	当前激活的 Tab 页面编号，第一页为 0
activeTab	YAHOO.widget.Tab ，指向被激活的 Tab 页，
element	被绑定的 HTML 元素
orientation	页面标签所在的位置， top ， bottom ， left ， right 默认为 top
tabs	标签页 (Tab) 的数组列表，只读

Tab 的配置集

属性名称	含义
active	当前 Tab 页面是否激活， Boolean 值
cacheData	Tab 页加载数据的时候是否隐藏，只有 dataSrc 可用的时候有效
content	激活页面的文字标签
contentEl
dataLoaded	数据是否加载完成
dataSrc	如果设置了这一属性，当 Tab 页被激活时，页面数据从这个 URL 处加载，需要用到 Connection Manager
dataTimeout	Tab 页加载的超时时间，单位微秒，只有在设置了 dataSrc 才有效
disabled	是否禁止激活本 Tab 页，缺省为 false
label	Tab 页的标签
labelEl	Tab 页的 HTML 容器元素
loadMethod	数据请求的方式，缺省为 GET ，只有在设置了 dataSrc 才有效

TabView 用到的 CSS 定义

Class	描述
yui-navset	TabView 的 <div>
yui-nav	TabView 的 <ul>
yui-content	TabView 的 <div> 的下一级 <div>
disabled	Tab 页面不可用时的样式，应用在 <ul> 上
selected	Tab 页面激活时的样式，应用在 <ul> 上
loading	Tab 页面加载时的样式， TabView 的 <div> 的下一级 <div> 的样式