YAHOO工具库(二)

6.5.     DataTable

DataTable的引入

<!—需要的CSS -->

build/datatable/assets/datatable.css

<!--必须的引入 -->

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

<!-- 可选项，用到XHR取数方式时需要 -->

build/connection/connection-min.js

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

build/dragdrop/dragdrop-min.js

<!-- Source files -->

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的引入

<!-- Dependencies -->

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

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

build/connection/connection-min.js

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

build/animation/animation-min.js

<!-- Source file -->

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的引入

<!-- CSS -->

build/container/assets/container.css

<!-- Dependencies -->

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

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

build/animation/animation-min.js

<!-- Source file -->

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的引入

<!-- CSS -->

build/container/assets/container.css

<!-- Dependencies -->

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

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

build/animation/animation-min.js

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

build/dragdrop/dragdrop-min.js

<!-- Source file -->

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的引入

<!-- CSS -->

build/container/assets/container.css

<!-- Dependencies -->

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

<!--可选项: Connection (only required if performing asynchronous submission) -->

build/connection/connection-min.js

<!-- Source file -->

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的引入

<!-- CSS -->

build/container/assets/container.css

<!-- Dependencies -->

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

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

build/animation/animation-min.js

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

build/dragdrop/dragdrop-min.js

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

build/connection/connection-min.js

<!-- Source file -->

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的引入

<!-- Dependencies -->

<!-- core CSS -->

/build/tabview/assets/tabview.css

<!-- optional skin for border tabs -->

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

<!-- Source file -->

build/tabview/tabview-min.js

TableView的初始化

constructor：YAHOO.widget.TabView(tableViewId); 

创建的方式：

1．页面中存在id

<div id="demo" class="yui-navset">

    <ul class="yui-nav">

        <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 class="yui-content">

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

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

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

    </div>

</div>

 

注：

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

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

 

2．完全使用JavaScript创建TabView

<script type="text/javascript">

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>的样式

 

7.            常见问题

7.1.     YUI提供的javascript的文件引入

关于引入的版本：

YUI对于需要引入的js文件都提供了多个版本：

1          min是去掉空格后的版本，在正式项目中建议使用min版。

2          debug是调试的版本，主要结合YUI的log组件使用。

3          beta版

4          不带后缀的为便于阅读的版本

 

yahoo-dom-event.js是包含了yahoo.js，dom.js，event.js的内容，使用了前者后就无需再引入后面三个文件。

关于引入的顺序：

1．大部分组件都是依赖于事件驱动，并通过YUI提供的工具集进行DOM操作的，因此yahoo.js，dom.js，event.js或者这三个文件的合成文件yahoo-dom-event.js必须早于其他YUI的js文件引入

2．Autocomplete如果需要从服务器取数据时，要用到YUI提供的datasource.js，因此datasource.js必须在autocomplete.js之前引入；如果是以XHR（JSON，XML等）的方式取数，还要用到YUI提供的connection，因此connection.js也必须在autocomplete.js之前引入；如果用到了动画方式展开下拉框，则需要保证animation.js在autocomplete.js之前引入。

3．Datatable中列宽度的调整，Container组件中的Overlay以及从Overlay继承下来的Dialog，SimpleDialog的窗口拖动，需要用到dragdrop.js，因此dragdrop.js必须在datatable.js和container.js之前引入；如果要用到Dialog的动画显示效果，则需要先引入animation.js。