1.1.
YAHOO工具庫提供的方法
l
用於創建一個全局的命名空間,使用YUI時,首先會自動創建widget,util,example三個命名空間,使用時也可以自定義命名空間。類似於在程序中建了了一個static變量。
l
javascript擴展的語言工具,用於判別對象的類型。
l
用於從一個對象上擴展出另一個對象,模擬了類的繼承的方式,但不同的是,在創建子對象時,父對象的構造函數不會自動調用。父對象的引用存放在了子對象的supperclass中,構成了一個鏈狀繼承關係。在2.2.2的版本中,YAHOO.lang.extend和YAHOO.extend指向同一函數對象。
l
將一個對象的屬性(部分或全部)複製到另一個對象,但並非真正意義上的複製,只是一種引用。YAHOO.augment=YAHOO.lang.augment。
l
用來調試的一個工具,將信息顯示到log控件。
l
環境信息和YUI組件信息
l
可以定義自己的回調函數,當有新的YUI組件加載到頁面時將會調用YUI_config.listener指向的函數。
2.
YUI提供的Dom操作
特點:對於大部分DOM操作提供了批量操作的功能,而對用戶只需使用統一的函數接口就能完成單個或批量的操作,主要得益於DOM內部的batch方法。
2.1.
Element的查找
YAHOO.util.Dom.get(element)
調用document.getElementByIdx_x_x_x(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
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
Region對象:{left,top,right,bottom}
YUI提供的一個對象,用於完成多個矩形區域間的計算(如相交,包含。
YAHOO.util.Region.contains(region)
判斷是否包含了region區域
YAHOO.util.Region.getArea
計算面積
YAHOO.util.Region.intersect(region)
計算與region區域的交迭區域
YAHOO.util.Region.union(region)
計算與region區域求並集(即包含兩個區域的最小區域)
Point對象:{x,y}
YUI提供的對象,用於定義座標點。
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.a(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工具集提供的方法
YAHOO.util.Event.addListener(element,eventType,fn,obj,override)
參數:
element:爲綁定事件的元素id,可以是一個數組,以支持批量操作
eventType:爲事件類型
fn:爲事件響應的回調函數
obj:當override爲true時,爲回調函數傳入的參數對象;當override爲false時,該參數被忽略。
override:
返回值類型:Boolean
功能:給指定的element綁定事件響應函數
YAHOO.util.Event.removeListener:function(element,eventType,fn)
參數:
element:爲綁定事件的元素id,
eventType:事件類型
fn:爲事件響應函數
返回值類型:Boolean
功能:給指定的element解除綁定事件
YAHOO.util.Event.purgeElement ( el , recurse , sType )
參數:
el:爲綁定事件的元素id,
recurse:Boolean值,是否解除子節點的事件綁定
sType:事件類型
返回值類型:Boolean
功能:給指定的element解除綁定的同一類型的事件,也可以解除子節點上綁定的這一類型的事件
YAHOO.util.on
addListener的函數別名
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秒一次。
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可以安全的修改的時候才響應。
YAHOO.util.Event.onDOMReady ( p_fn , p_obj , p_scope )
參數:
p_fn:爲事件響應函數
p_obj:同addListener的obj參數
p_scope:同addListener的override參數
返回值類型:無
功能:當DOM第一次可用時執行響應函數。
YAHOO.util.Event.preventDefault ( event)
參數:
event:事件對象
返回值類型:無
功能:阻止事件的缺省行爲發生。
YAHOO.util.Event.getListeners ( el , sType )
參數:
el:HTML element
sType:事件類型,String類型
返回值類型:Object{
type:事件類型
}
功能:阻止事件的缺省行爲發生。
YAHOO.util.Event.getTime( event)
參數:
event:事件對象
返回值類型:Date對象
功能:獲取事件發生時的時間。
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.
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
l
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 |
|
container |
按鈕的父id |
使用新建方式時會用到 |
srcelement |
使用替換方式時 |
|
menu |
按鈕對應的菜單YAHOO.widget.menu |
|
title |
按鈕title |
沒有指定label時使用title |
href |
按鈕導航URL |
僅在按鈕類型爲link時有效 |
target |
<a>中的target |
僅在按鈕類型爲link時有效 |
tabindex |
按tab切換焦點時的順序號 |
|
onclick |
click事件的響應函數 |
onclick:{
|
|
|
|
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
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) {
}
3
l
data = ["AAA","BBB","BCC"];
var myDataSource = new YAHOO.widget.DS_JSArray(data);
可以通過DWR的方式調用java方法獲得一字符串數組作爲查詢的下拉框,並在回調函數中可以直接使用,如:
l
l
對於JSArray方式取數時,AutoComplete可以自動根據輸入的內容查在JSArray中查找符合條件的結果項,但在使用XHR方式時,YUI並沒有提供默認的查找功能,必須由用戶通過控制URL參數方式來實現這一功能。
JSON方式:
使用JSON格式時,創建數據源YAHOO.widget.DS_XHR時第一個參數爲請求的URL,第二個參數爲一數組,這一數組的第一條記錄表示結果集在JSON對象的哪個對象屬性下,如類似於下面結構的JSON對象
{
Result:{
data:[
{username:”Jack”,oldname:”Jack”,age:16”}
]
}
}
如果是要查詢username則結果集應該表示爲”Result.data”,
第二條記錄爲搜索的主鍵,同上面的例子中如果是要查找出符合條件的username,則第二個數組應爲”username”,如果返回的結果集中還需要返回oldname屬性,則應該指名數組的第三條記錄”oldname”,後面還可以指定更多的需要返回的屬性。
因此第二個數組對象參數可以用以下方法表示:
[結果對象,搜索的主鍵,額外的返回屬性1,…額外的返回屬性N]
function initAutocomplete(){
"./queryUsername.action",
["data","username"]);
"usernameContainer", myDataSource1);
function(oSelf,sQuery){
myDataSource1.scriptQueryParam = "username";
});
}
XML方式:
應用方式與JSON方式類似,只是將reponseType指定爲
myDataSource1.responseType = YAHOO.widget.DS_XHR.TYPE_XML
FlatData方式: