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