Yui元件分成2類：工具包和控件庫
Yui 工具包
Yui 工具包利用DOM腳本來簡化浏覽器内的開發（in-browser devolvement），使用DHTML和AJAX的特性開發所有的Web程式。
1）動畫（Animation）：在你的頁面中通過指定位置，大小，透明度或者頁面元素的其他特性來建立一個"電影效果（cinematic effects）"。這些效果将在你的頁面發生變化的時候給使用者更好的體驗。
2）連接配接管理（Connection Manager）：這個工具包幫助你管理XMLHttpRequest（一般被稱為AJAX）事務，它提供對表單送出（form posts），錯誤捕獲（error handling）和callbacks的全面支援。該工具包也支援檔案的上傳管理。
DOM：DOM工具包提供更簡單的DOM腳本的功能調用方式，包含元素的位置和CSS樣式的管理。
拖放（Drag and Drop）：建立可拖放的對象。為了提供豐富的互動功能（比如拖動一個對象到目标位置）你可能需要編寫很多代碼。這個工具包可以在所有支援的浏覽器中捕獲所有的操作事務并保證其穩定地運作。
3）事件（Event）：這個神奇的管理類庫給你提供一種簡單安全的方法通路浏覽器的事件（比如點選和鍵盤操作）。這個事件封包中還包含了自定義事件對象，它為你的程式互動提供一種釋出和訂閱事件的機制。
yui控件：
yui控件庫為你頁面提供一組高互動性性的可視化元素。這些元素完全在用戶端建立維護，不需要請求伺服器進行頁面重新整理。
這些控件包括：
1）自動完成（AutoComplete）控件：自動完成控件為文本輸入提供一種漸進式的使用者體驗（streamline user interactions）。控件會提供相似項清單和基于多樣化的資料格式的提前鍵入功能（type-ahead functionality based on a variety of data-source formats），并且可以通過XMLHttpRequest通路服務端的資料。
2）月曆（Calendar）控件：一個用來日期選擇的動态圖形控件。
3）容器（Container）控件：一組模仿windows樣式的控件，他們包括Tooltip, Panel, Dialog 和 SimpleDialog。其中Module 和 Overlay控件提供一個可擴充的平台，你可以控制自定義的模仿windows樣式的控件。
4）日志（Logger）控件：提供一個快速和簡單的記錄日志的方式，它直接将日志資訊輸出到螢幕控制台（on-screen console）、Firefox的擴充元件FireBug，或者Safari的Javascrīpt控制台。yui的Debug元件将完整的記錄輸出資訊和調試資訊。
5）菜單（Menu）控件：利用此控件隻需要幾行簡單的代碼就可以設計一個動态樣式的菜單。可以完全使用javascrīpt構造一個菜單，can be layered on top of semantic unordered lists。
6）滑塊（Slider）控件：提供一個可滑動的元件，它允許使用者在一定的範圍内（x軸，y軸）改變滑塊的位置。
7）樹形（TreeView）控件：提供一個節點可縮放的樹形控件。節點可以是連結，自定義屬性，并且可以動态加載。節點元素的展現可以通過CSS修改，比如檔案夾視圖，TO－DO任務清單或者其他可視化處理
1. YAHOO工具庫
1.1. YAHOO工具庫提供的方法
l namespace
用于建立一個全局的命名空間，使用YUI時，首先會自動建立widget,util,example三個命名空間，使用時也可以自定義命名空間。類似于在程式中建了了一個static變量。
l lang
javascript擴充的語言工具，用于判别對象的類型。
l lang.extend
用于從一個對象上擴充出另一個對象，模拟了類的繼承的方式，但不同的是，在建立子對象時，父對象的構造函數不會自動調用。父對象的引用存放在了子對象的supperclass中，構成了一個鍊狀繼承關系。在2.2.2的版本中，YAHOO.lang.extend和YAHOO.extend指向同一函數對象。
l lang.augment
将一個對象的屬性（部分或全部）複制到另一個對象，但并非真正意義上的複制，隻是一種引用。YAHOO.augment=YAHOO.lang.augment。
l log
用來調試的一個工具，将資訊顯示到log控件。
l env
環境資訊和YUI元件資訊
l YUI_config.listener
可以定義自己的回調函數，當有新的YUI元件加載到頁面時将會調用YUI_config.listener指向的函數。
2. YUI提供的Dom操作
特點：對于大部分DOM操作提供了批量操作的功能，而對使用者隻需使用統一的函數接口就能完成單個或批量的操作，主要得益于DOM内部的batch方法。
2.1. Element的查找
YAHOO.util.Dom.get(element)
調用document.getElementById(element)，擷取指定的頁面元素。
YAHOO.util.Dom.getElementsBy(method,tagName,rootNode)
在rootNode的子節點中按照使用者提供的method方法在所有标簽為tagName的element中查找符合條件的節點。rootNode不指定則在整個Document中查找，method是一個method(elementID)類型的函數對象，該函數對象的傳回值為Boolean值。
YAHOO.util.Dom.getElementsByClassName(className, tagName, rootNode)
傳回指定根節點下所有标簽為tagName,class為className的DOM節點數組。根節點為可選參數，不指定時在整個頁面中查找
YAHOO.util.Dom.inDocument (el)
判斷元素el是否在目前的DOM中，支援批量操作。
2.2. 樣式控制和通路
YAHOO.util.Dom.hasClass(element, className)
判斷element标簽上是否指明了className的class，支援批量操作
YAHOO.util.Dom.addClass(element, className)
給指定标簽增加名為className的class，支援批量操作.
YAHOO.util.Dom.removeClass(element, className)
删除element上的名為className的class，支援批量操作
YAHOO.util.Dom.replaceClass(element, oldClassName, newClassName)
替換element上的oldClassName樣式為newClassName，支援批量操作
YAHOO.util.Dom.getStyle(element, property)
擷取element的style中的property屬性，支援批量操作
YAHOO.util.Dom.setStyle(element,property,pValue)
設定element的style的property屬性為pValue，支援批量操作
注：本節中的class指的是CSS中定義的class。
2.3. 位置控制和通路
位置控制的相關函數
YAHOO.util.Dom.setX
YAHOO.util.Dom.setY
YAHOO.util.Dom.setXY
YAHOO.util.Dom.getX
YAHOO.util.Dom.getXY 傳回元素坐标 [ left,top ]
YAHOO.util.Dom.getRegion
擷取元素的坐标Region對象{left,top,right,bottom}
可支援批量操作
擷取頁面可視面積的高度和寬度
YAHOO.util.Dom.getClientWidth
YAHOO.util.Dom.getClientHeight
擷取Document的高度和寬度
YAHOO.util.Dom.getDocumentWidth
YAHOO.util.Dom.getDocumentHeight
擷取頁面可視區域的高度和寬度（不包含滾動條）
YAHOO.util.Dom.getViewportHeight
YAHOO.util.Dom.getViewportWidth
YUI提供的一個對象，用于完成多個矩形區域間的計算（如相交，包含)。
Region對象：{left,top,right,bottom}
判斷是否包含了region區域
YAHOO.util.Region.contains(region)
計算面積
YAHOO.util.Region.getArea
計算與region區域的交疊區域
YAHOO.util.Region.intersect(region)
計算與region區域求并集（即包含兩個區域的最小區域）
YAHOO.util.Region.union(region)
YUI提供的對象，用于定義坐标點。
Point對象：{x,y}
3. YUI提供的element工具
YUI提供了一組操作頁面element的工具，是對标準HTML elements的一種封裝，能夠直接通操作element的執行個體，使得增加監聽器，操作DOM，設定/擷取element的屬性等工作變得很簡單。部分方法是直接調用YUI的DOM工具集提供的方法，如對class操作的相關方法、擷取element的相關方法等等，在此不再重複。
YAHOO.util.Element(elementId)
建立element，如果elementId在Document中還不存在，仍然可以通過YUI對他進行屬性設定，增加監聽器等操作， Element工具集會自動等到該elementId可用後執行這些操作，實際上真正的操作是等到contentReady事件發生後才進行的。
YAHOO.util.Element.appendChild(child)
在DOM結構中element下增加子節點
YAHOO.util.Element.getElementsByTagName(tag)
擷取tagName為tag的所有頁面元素
YAHOO.util.Element.hasChildNodes
判斷是否具有子節點
YAHOO.util.Element.insertBefore(element, before)
在元素before前插入element
YAHOO.util.Element.removeChild(child)
删除DOM中元素的child子節點
YAHOO.util.Element.replaceChild (newNode , oldNode)
替換子節點oldNode為newNode
4. YUI提供的Event工具集
YUI提供的Event工具集簡化了浏覽器中事件驅動程式的編寫，提供了一種簡單的接口來定制事件和檢查浏覽器中的event對象。YUI事件工具集提供了自定義事件對象(Custom Event)，通過自定義事件對象可以“釋出”自己感興趣的時刻或事件，頁面中的YUI元件能夠響應這些自定義的事件并做出回應。
YUI對事件響應的順序：通過YUI Event工具集添加的事件，預設是在冒泡過程中執行事件處理函數的。從DOM節點上來說，是從子節點向根節點響應事件。
Event需要的引入
<!-- Dependency -->
build/yahoo/yahoo-min.js
<!-- Event source file -->
build/event/event-min.js
Event和Custom Event分别定義在YAHOO.util.Event和YAHOO.util.CustomEvent中
Event工具集提供的方法
1) YAHOO.util.Event.addListener(element,eventType,fn,obj,override)
參數：
element：為綁定事件的元素id，可以是一個數組，以支援批量操作
eventType：為事件類型
fn：為事件響應的回調函數
obj：當override為true時，為回調函數傳入的參數對象；當override為false時，該參數被忽略。
override：
傳回值類型：Boolean
功能：給指定的element綁定事件響應函數
2) YAHOO.util.Event.removeListener:function(element,eventType,fn)
參數：
element：為綁定事件的元素id,
eventType：事件類型
fn：為事件響應函數
傳回值類型：Boolean
功能：給指定的element解除綁定事件
3)YAHOO.util.Event.purgeElement ( el , recurse , sType )
參數：
el：為綁定事件的元素id,
recurse：Boolean值，是否解除子節點的事件綁定
sType：事件類型
傳回值類型：Boolean
功能：給指定的element解除綁定的同一類型的事件，也可以解除子節點上綁定的這一類型的事件
4)YAHOO.util.on
addListener的函數别名
5)YAHOO.util.Event.onAvailable ( p_id , p_fn , p_obj , p_override )
參數：
p_id：為綁定事件的元素id,
p_fn：為事件響應函數
p_obj：同addListener的obj參數
p_override：同addListener的override參數
傳回值類型：無
功能：當指定的element的p_id出現時，執行事件響應函數。如果在頁面初始化之前執行這一函數，當頁面加載時（可能還未完成時），就會執行響應的事件響 應函數；如果放在頁面加載之後執行這一函數，将以固定的時間輪詢，當element可用時響應這一事件。這個輪詢的的時間是可以配置的，預設的時間是10秒一次。
6)YAHOO.util.Event.onContentReady( p_id , p_fn , p_obj , p_override )
參數：
p_id：為綁定事件的元素id,
p_fn：為事件響應函數
p_obj：同addListener的obj參數
p_override：同addListener的override參數
傳回值類型：無
功能：與onAvailable類似，但不同的是事件響應函數是等到element可以安全的修改的時候才響應。
7)YAHOO.util.Event.onDOMReady ( p_fn , p_obj , p_scope )
參數：
p_fn：為事件響應函數
p_obj：同addListener的obj參數
p_scope：同addListener的override參數
傳回值類型：無
功能：當DOM第一次可用時執行響應函數。
8)YAHOO.util.Event.preventDefault ( event)
參數：
event：事件對象
傳回值類型：無
功能：阻止事件的預設行為發生。
9)YAHOO.util.Event.getListeners ( el , sType )
參數：
el：HTML element
sType：事件類型，String類型
傳回值類型：Object{
type：事件類型
fn：addListener添加的事件響應函數
obj：提供給事件響應函數的參數對象
adjust：否擷取預設的事件監聽器
index：UI事件監聽器清單中的位置
}
功能：阻止事件的預設行為發生。
10)YAHOO.util.Event.getTime( event)
參數：
event：事件對象
傳回值類型：Date對象
功能：擷取事件發生時的時間。
11) YAHOO.util.Event.getTarget(ev , resolveTextNode)
參數：
evt：事件對象
resolveTextNode：
傳回值類型： HTML element
功能：擷取事件發生時的頁面标簽。對于IE即window.event.srcElement
5. YUI提供的CSS樣式
5.1. Fonts
字型的規範樣式，需要引入build/fonts/fonts-min.css
5.2. Reset
規範了所有HTML element的預設樣式，需要引入build/fonts/reset-min.css
5.3. Grids
提供了用于頁面排版的CSS樣式，需要引入build/fonts/grids-min.css
6. YUI元件
6.1. Connection Manager
提供了通路XMLHttpRequest對象的一個簡單接口
對象定義：
YAHOO.util.Connect.asyncRequest
Connection的引入：
<!-- Dependency -->
build/yahoo/yahoo-min.js
<!—可選項:用到事件時引入 -->
build/event/event-min.js
build/connection/connection-min.js
Connection的使用
1. 建立對象
var transaction = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);
第一個參數：指明http請求的方式，可用的方式包括GET、POST、HEAD、PUT、DELETE，但PUT和DELETE可能在一些A級浏覽器上不支援。
第二個參數：請求的URL
第三個參數：回調函數，用于伺服器傳回資料時調用的用戶端處理程式
第四個參數：POST方式時，提供給URL的POST參數資訊。
[注]：A級浏覽器A-Grade browsers是YUI對浏覽器的一個等級劃分，具體劃分原則詳見http://developer.yahoo.com/yui/articles/gbs/index.html
2. 定義回調函數
l 在異步事物中，可以建立回調函數處理伺服器的響應和相關資料，如果你不關心伺服器的傳回資訊，也可以忽略這些回調函數，所有這些回調函數對象都是可選的，然而在大多數情況下，應該至少提供以下三個回調函數：
success：伺服器做出有效響應時的回調函數
failure：伺服器響應了但提供了錯誤資訊時的回調函數
argument：success和failure為了處理傳回資訊需要的參數，可以是對象、字元串、數字或者包含了資料的數組。
l 在使用YAHOO.util.Connect.setForm上載檔案時，需要定義upload回調函數代替success和failure
l 在回調函數中this将失去作用範圍，這種情況下需要通過一個指向父對象的引用的參數來通路對象的成員。為了能夠使用對象的方法作為回調函數，并維持成員的作用範圍，需要定義回調函數對象的成員scope，作為this的值。
6.2. Button
對象定義：YAHOO.widget.Button
與傳統HTML Form的按鈕類似，不同的是它的label可以與 value不一緻。還可以建立帶菜單的按鈕，或者radio button、checkbox
分類：
可以建立幾種類型的按鈕：
button:普通的下壓式按鈕，可以在按鈕按下時執行使用者指定的代碼
link:按下時導航至相應的URL
submit:作用相當于form的送出按鈕
reset:form的reset按鈕
checkbox:
radio:
menubutton:按下時顯示隐藏按鈕
splitbutton:按下時執行指令或顯示菜單的按鈕
使用Button必需的引入:
<!-- CSS -->
build/fonts/fonts-min.css
build/button/assets/button.css
<!-- Dependencies -->
build/yahoo-dom-event/yahoo-dom-event.js
build/element/element-beta-min.js
<!—使用menubutton和splitbutton要用到的 -->
build/container/container_core-min.js
build/menu/menu-min.js
<!-- Source file -->
build/button/button-beta-min.js
初始化的方式：
1．使用替換<input>或<span>的方式
constructor：YAHOO.widget.Button(sourceElementId,{配置集})
Button的構造器首先根據sourceElementId在DOM中查找<input>，一旦找到，就通過DOM的 replaceChild方法替換掉<input>
2．使用建立的方式
constructor:YAHOO.widget.Button({配置集})
這種情況下根據配置集中指明的父id(Container)建立按鈕，如果配置集中沒有指明按鈕則使用YAHOO.Dom.generateId生成button的ID,
Button的配置集
| 屬性名稱 | 含義 | 備注 |
| id | 替換後的新的element id | |
| label | 按鈕上顯示的文字 | |
| check | 按鈕選中/未選中的狀态 | checkbox用到 |
| type | 指明button的類型 | 預設為button |
| container | 按鈕的父id | 使用建立方式時會用到 |
| srcelement | 使用替換方式時 | |
| menu | 按鈕對應的菜單YAHOO.widget.menu | |
| title | 按鈕title | 沒有指定label時使用title |
| href | 按鈕導航URL | 僅在按鈕類型為link時有效 |
| target | <a>中的target | 僅在按鈕類型為link時有效 |
| tabindex | 按tab切換焦點時的順序号 | |
| onclick | click事件的響應函數 | onclick:{ fn: Function, // 事件的響應函數. obj: Object, // An object to pass back to the handler. scope: Object // The object to use for the scope of the handler. } } |
6.3. ButtonGroup
對象定義：YAHOO.widget.ButtonGroup
ButtonGroup是一組按鈕，同組中隻能有一個按鈕被選中。根節點為<div>
6.4. AutoComplete
使用者在文本輸入框中輸入文字時，該元件通過輸入的内容查找符合輸入條件的内容，并顯示出所有符合條件的内容，供使用者能夠很快的完成正确的輸入。
AutoComplete的引入
<!-- 必須引入 -->
build/yahoo-dom-event/yahoo-dom-event.js
<!-- 可選: Connection(用到 XHR資料源時需要的引入) -->
build/connection/connection-min.js
<!--可選:用到動畫效果時需要的引入 -->
build/animation/animation-min.js
<!-- Source file -->
build/autocomplete/autocomplete-min.js
控制AutoComplete的配置集
| 屬性名稱 | 含義 | 備注 |
| animVert | 控制下拉框向下展開的動畫效果 | |
| animHoriz | 控制下拉框水準方向展開的動畫效果 | |
| animSpeed | 控制動畫的速度 | |
| delimChar | 一行顯示多條記錄時的分隔符，可以是字元串數組或字元串 | |
| maxResultsDisplayed | 結果集的最大顯示行數 | |
| minQueryLength | 進行查詢前的輸入的字元個數 | |
| queryDelay | 使用者鍵入字元後多少秒開始查詢，預設0.5 | |
| autoHighlight | 查詢出來的結果集顯示後，是否高亮顯示第一條，預設為true | |
| highlightClassName | 高亮顯示的樣式名，預設為yui-ac-highlight | |
| prehightlightClassName | 滑鼠移動到下拉框的一行上時，那一行的樣式，預設為yui-ac-prehighlight | |
| useShadow | 下拉框是否有陰影 | |
| useIFrame | 下拉框欠套在一個iframe中，用于解決IE中覆寫<select>的問題 | |
| forceSelection | 限制輸入内容必須為查詢結果中的内容，如果不是則輸入内容被删除 | |
| typeAhead | 是否自動根據查詢結果的第一條補齊到autocomplete中 | |
| allowBrowserAutocomplete | 是否允許浏覽器提供的輸入框記憶功能，預設為false | |
| alwaysShowContainer | 是否始終顯示查詢結果的下拉框，預設為false |
AutoComplete的使用
1) 自定義事件(CustomEvent)
AutoComplete除了預設的事件外，還有自定義的事件，以下為AutoComplete用到的各種CustomEvent
| 事件回調函數 | 含義 | 備注 |
| textboxFocusEvent | 輸入框獲得焦點的事件 | textboxFocus |
| textboxKeyEvent | 按鍵彈起時的事件 | textboxKey |
| dataRequestEvent | 發出資料查詢請求時的事件 | dataRequest |
| dataReturnEvent | 資料查詢請求傳回時的事件 | dataReturn |
| dataErrorEvent | 傳回結果為空時的事件 | dataError |
| containerExpandEvent | 展開下拉框時的事件 | containerExpand |
| typeAheadEvent | 符合條件的結果自動用到第一條記錄補齊時的事件 | typeAhead |
| itemMouseOverEvent | 滑鼠移動到結果項上的事件 | itemMouseOver |
| itemMouseOutEvent | 滑鼠移出結果項的事件 | itemMouseOut |
| itemArrowToEvent | 移動到某一選擇項時的事件 | itemArrowTo |
| itemArrowFromEvent | 移出某一選擇項時的事件 | itemArrowFrom |
| itemSelectEvent | 選中某一選擇項的事件 | itemSelect |
| unmatchedItemSelectEvent | forceSelection為false時，如果輸入了不符合查詢結果的内容時觸發本事件。 | unmatchedItemSelect |
| selectionEnforceEvent | 強制從結果集中選擇輸入項時觸發的事件 | selectionEnforce |
| containerCollapseEvent | 下拉框收縮時的事件 | containerCollapse |
| textboxBlurEvent | 輸入框失去焦點時的事件 | textboxBlur |
可以根據需要重載自定義的事件
例：輸入框獲得焦點時自動進行查詢，可以重載textboxFocusEvent
myAutoComp.textboxFocusEvent.subscribe(
//發送一個查詢條件為空的查詢請求
function(){myAutoComp.sendQuery("");}
);
2 ) 格式化下拉框的輸出
如果傳回的結果集中有多個屬性，可以通過重載formatResult來格式化結果項的輸出
oAutoComp.formatResult = function(oResultItem, sQuery) {
var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")" ;
return (sMarkup);
}
3 ) AutoComplete的資料源
l DS_JSArray
data = ["AAA","BBB","BCC"];
var myDataSource = new YAHOO.widget.DS_JSArray(data);
可以通過DWR的方式調用java方法獲得一字元串數組作為查詢的下拉框，并在回調函數中可以直接使用，如：
l DS_JSFunction
l DS_XHR
對于JSArray方式取數時，AutoComplete可以自動根據輸入的内容查在JSArray中查找符合條件的結果項，但在使用XHR方式時，YUI并沒有提供預設的查找功能，必須由使用者通過控制URL參數方式來實作這一功能。
JSON方式：
使用JSON格式時，建立資料源YAHOO.widget.DS_XHR時第一個參數為請求的URL，第二個參數為一數組，這一數組的第一條記錄表示結果集在JSON對象的哪個對象屬性下，如類似于下面結構的JSON對象
{
Result:{
data:[ {username:”Tom”,oldname:”Tom”,age:12”},
{username:”Jack”,oldname:”Jack”,age:16”}
]
}
}
如果是要查詢username則結果集應該表示為”Result.data”，
第二條記錄為搜尋的主鍵，同上面的例子中如果是要查找出符合條件的username，則第二個數組應為”username”,如果傳回的結果集中還需要傳回 oldname屬性，則應該指名數組的第三條記錄”oldname”,後面還可以指定更多的需要傳回的屬性。
是以第二個數組對象參數可以用以下方法表示：
[結果對象,搜尋的主鍵,額外的傳回屬性1,…額外的傳回屬性N]
function initAutocomplete(){
var myDataSource1 = new YAHOO.widget.DS_XHR(
"./queryUsername.action",
["data","username"]);
myDataSource1.responseType = YAHOO.widget.DS_XHR.TYPE_JSON;
//myDataSource1.scriptQueryAppend = "output=json&results=100";
var oAutoComp = new YAHOO.widget.AutoComplete("user_username",
"usernameContainer", myDataSource1);
oAutoComp.dataRequestEvent.subscribe(
function(oSelf,sQuery){
myDataSource1.scriptQueryParam = "username";
});
}
XML方式：
應用方式與JSON方式類似，隻是将reponseType指定為
myDataSource1.responseType = YAHOO.widget.DS_XHR.TYPE_XML
FlatData方式：
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對象時
varmyDataSource =newYAHOO.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
varmyDataSource = newYAHOO.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
varmyDataSource =newYAHOO.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資料時采用的方式。
varrs = YAHOO.Claim.commonDataTable.getRecordSet();
varobj = rs.getRecord(i); //擷取第i行的資料對象
對象obj的屬性就是定義表頭時指定的各列的key值，可以通過obj[key值]通路該行上的各列屬性值。
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" target="_blank" rel="external nofollow" ><em>Tab One Label</em></a></li>
<li><a href="#tab2" target="_blank" rel="external nofollow" ><em>Tab Two Label</em></a></li>
<li><a href="#tab3" target="_blank" rel="external nofollow" ><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. 常見問題
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。
![金蝶雲星空即時庫存查詢SQL語句SQLServer[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)