YAHOO工具庫提供的方法

6.4.     AutoComplete

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

AutoComplete的引入

<!-- 必須引入 --&gt

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

<!-- 可選: Connection(用到 XHR資料來源時需要的引入) --&gt

build/connection/connection-min.js

<!--可選: 用到動畫效果時需要的引入 --&gt

build/animation/animation-min.js

<!-- Source file --&gt

build/autocomplete/autocomplete-min.js

控制AutoComplete的配置集

AutoComplete的使用

1          自定義事件(CustomEvent)

AutoComplete除了預設的事件外，還有自定義的事件，以下為AutoComplete用到的各種CustomEvent

可以根據需要過載自定義的事件

例：輸入框獲得焦點時自動進行查詢，可以過載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 AutoComp = 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的引入

build/datatable/assets/datatable.css

<!--必須的引入 --&gt

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

<!-- 可選項，用到XHR取數方式時需要 --&gt

build/connection/connection-min.js

build/dragdrop/dragdrop-min.js

<!-- Source files --&gt

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的屬性說明

2.     建立datatable

var myDataTable = new YAHOO.widget.DataTable(

"myContainer",       //datatable繫結的頁面element(DIV)

myColumnSet,      //表頭定義, YAHOO.widget.ColumnSet

myDataSource,     //資料來源

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

); 

DataTable的配置集

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 bj = rs.getRecord(i); //獲取第i行的資料物件

物件obj的屬性就是定義表頭時指定的各列的key值，可以透過obj[key值]訪問該行上的各列屬性值。

5.     測試

6.6.     DragDrop

6.7.     TreeView

6.8.     Container

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

Container下的控制元件繼承關係

Container的引入

<!-- Dependencies --&gt

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

build/connection/connection-min.js

build/animation/animation-min.js

<!-- Source file --&gt

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

配置集的說明

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

配置集

已知的特效：

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 --&gt

build/container/assets/container.css

<!-- Dependencies --&gt

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

build/animation/animation-min.js

<!-- Source file --&gt

build/container/container-min.js

Tooltip初始化方式

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

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

Tooltip配置集

同時還繼承了Module,Overlay的所有屬性

6.8.4.        Panel

從overlay擴充套件出來的一個元件，類似於作業系統的視窗。他不同於瀏覽器的彈出視窗，是內嵌在頁面檔案中的一種動態Html的element。他在overlay的基礎上擴充套件了一些視窗的功能，如關閉、拖放等。Panel使用了預定義的樣式表

Panel的引入

<!-- CSS --&gt

build/container/assets/container.css

<!-- Dependencies --&gt

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

build/animation/animation-min.js

build/dragdrop/dragdrop-min.js

<!-- Source file --&gt

build/container/container-min.js

Panel的初始化

constructor：

YAHOO.widget.Panel(panelId); //使用預設配置選項

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

Panel的配置集

Panel同時還繼承了Module,Overlay的屬性

6.8.5.        Dialog

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

Dialog的引入

<!-- CSS --&gt

build/container/assets/container.css

<!-- Dependencies --&gt

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

build/animation/animation-min.js

build/dragdrop/dragdrop-min.js

<!--可選項: Connection (only required if performing asynchronous submission) --&gt

build/connection/connection-min.js

<!-- Source file --&gt

build/container/container-min.js

Dialog的初始化

constructor：YAHOO.widget.Dialog(dialogId);

dialogId為頁面中已經申明的element

Dialog的配置集

同時繼承了Overlay，Panel的屬性

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

 { text:按鈕上的文字,

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

isDefault:是否預設按鈕},

6.8.6.        SimpleDialog

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

SimpleDialog的引入

<!-- CSS --&gt

build/container/assets/container.css

<!-- Dependencies --&gt

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 --&gt

build/container/container-min.js

SimpleDialog的初始化

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

dialogId為頁面中已經申明的element

SimpleDialog的配置集

6.9.     Grids

支援不規定寬度的設計

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

6.10.            TabView

用來建立導航tab欄元件

可以從HTML中的已經存在的標籤來建立，也可以完全透過javascript建立，該元件的最上層元素為