使用者在文字輸入框中輸入文字時，該元件通過輸入的內容查詢符合輸入條件的內容，並顯示出所有符合條件的內容，供使用者能夠很快的完成正確的輸入。

<!-- 必須引入 -->

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

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);

}

3AutoComplete的資料來源

lDS_JSArray

data = ["AAA","BBB","BCC"];

var myDataSource = new YAHOO.widget.DS_JSArray(data);

可以通過DWR的方式呼叫java方法獲得一字串陣列作為查詢的下拉框，並在回撥函式中可以直接使用，如：

lDS_JSFunction

lDS_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方式：

<!—需要的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

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.測試

一組模擬windows控制元件的元件

Overlay

Module

ToolTip

Dialog

SimpleDialog

Panel

<!-- 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

由於Container下的控制元件的建立方式和屬性控制方式基本相同，可以在建立元件時通過config物件指定控制元件的各項屬性，也可以在建立後通過myContainer.cfg.setAttribute來設定控制元件屬性，通過對這些屬性的控制來實現控制元件的不同動作表現。因此對於各個子控制元件的屬性在下面採用配置集的方式用一個表格來說明。

一種最基礎的控制元件模組，通過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值

對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          逐步變淡

用於管理多個Overlay的元件，能夠模擬類似於多視窗管理系統的互動，使得各個Overlay之間的能夠正確的覆蓋、獲得焦點/失去焦點。

使用這一功能需要的程式碼很簡單，只需要通過register方法登記所有需要納入視窗管理的Overlay就可以了。

//示例：

YAHOO.namespage(“demo”);

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

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

物件定義：YAHOO.widget.Tooltip

從overlay上擴展出來的控制元件，小的浮動視窗，動態生成，提供了預定義的樣式。

<!-- 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

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

tooltipId可以是頁面中未宣告的控制元件。

屬性名稱	含義
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的所有屬性

從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的屬性

從Panel上擴展出來的元件，類似於Windows的視窗，在瀏覽器中提供了一種不用頁面跳轉就能使用互動來獲取使用者輸入的互動方式，使用者輸入的資料都是通過一個標準的HTML Form獲取的，並支援多種的獲取輸入資料的方式：普通的Form的提交，XMLHttpRequest，或者完全通過指令碼來讀取。

<!-- 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

constructor：YAHOO.widget.Dialog(dialogId);

dialogId為頁面中已經申明的element

屬性名稱	含義
postmethod	視窗提交的方式，async：非同步，form：標準的submit，none：不提交
buttons	dialog中的button陣列列表，

同時繼承了Overlay，Panel的屬性

單個按鈕物件的定義方式：

 { text:按鈕上的文字,

handler:按鈕的click事件響應函式

isDefault:是否預設按鈕},

從Dialog上擴展出來的一個元件,主要用於處理使用者選擇Yes/NO，OK/Cancel的互動

<!-- 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

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

dialogId為頁面中已經申明的element

屬性名稱	含義
text	對話方塊中顯示的提示資訊
icon	按鈕圖示： ICON_BLOCK,    ICON_WARN,     ICON_HELP,      ICON_INFO,      ICON_ALARM,    ICON_TIP.

支援不規定寬度的設計

一組用於定義介面版式的樣式表(CSS檔案)

用來建立導航tab欄元件

可以從HTML中的已經存在的標籤來建立，也可以完全通過javascript建立，該元件的最上層元素為<div>，每一個tab頁面項使用<li>

<!-- 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

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>

屬性名稱	含義
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才有效

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