YUI中文文檔
根據(jù)網(wǎng)上別人的說(shuō)明和綜合各方面資料，網(wǎng)上說(shuō)的要么結(jié)構(gòu)不是很清楚，要么不是很全，呵呵，借別人的輪子總結(jié)一下哈，不用造輪子了，我對(duì)YUI的文檔作一個(gè)總結(jié)，共同學(xué)習(xí)。.
打算從零開(kāi)始學(xué)習(xí)YUI 。AJAX類庫(kù)那么多，為什么我要學(xué)習(xí)YUI呢？首先，因?yàn)?/span>YUI很強(qiáng)大；其次因?yàn)?/span>YUI是Yahoo! 的。雖然Yahoo!現(xiàn)在好像沒(méi)落了,但聽(tīng)同事說(shuō)了YUI的強(qiáng)大，抑制不住學(xué)習(xí)的興奮，今天就來(lái)學(xué)習(xí)一下！學(xué)習(xí)的東西很多，今天只是走馬觀花的看一個(gè)大概的說(shuō)明，即每個(gè)控件有什么功能，具體怎么用就是后面的事情了。
Yahoo發(fā)表了一系列的Ajax設(shè)計(jì)模式. Yahoo的這些工具包是Yahoo在收購(gòu)了多個(gè)Web2.0網(wǎng)站后推出的Ajax工具包，代碼的注釋也寫的很好，文檔也很豐富和詳盡。
YUI分為兩個(gè)大類,一個(gè)是Ajax組件,里面包括對(duì)底層javascript包裝后的幾個(gè)工具包,分別是connection,event, dom,animation,dnd.還包括一組高級(jí)的javascript控件，目前包括AutoComplete,Calendar, Container,Menu,Slider,TreeView.
另一類是幾個(gè)很有用的幾個(gè)CSS文件，一個(gè)是CSS Page Grids，用它可以很方便的布局你的網(wǎng)頁(yè)。另外兩個(gè)是Standard CSS Fonts和Standard CSS Reset,利用這兩個(gè)CSS可以對(duì)字體等在不同瀏覽器中獲得一致的效果.
一、YUI Utilities(Connection Manager)
Yahoo的javascript文件都有一個(gè)注釋的很好的，格式化很好的版本和一個(gè)去掉注釋和空格的版本，學(xué)習(xí)看源代碼當(dāng)然用前者，而最后在網(wǎng)頁(yè)上使用的時(shí)候就可以選用后者。
Connection的引入：
<!-- Dependency -->
build/yahoo/yahoo-min.js
<!—可選項(xiàng): 用到事件時(shí)引入 -->
build/event/event-min.js
build/connection/connection-min.js
1. Connection Manager
這個(gè)工具包用來(lái)管理XMLHttpRequest,通過(guò)這個(gè)工具包可以查詢正在執(zhí)行的請(qǐng)求的狀態(tài)，可以注冊(cè)正確返回的回調(diào)函數(shù)，錯(cuò)誤處理的回調(diào)函數(shù)，還可以根據(jù)提供的表單Id方便的收集和發(fā)送表單字段。下面給出的代碼是基本調(diào)用形式
var callback =
{
success: function(res) {/*success handler code*/}, //正常返回處理函數(shù)
failure: function(res) {/*failure handler code*/}, //出錯(cuò)返回處理函數(shù)
argument: [argument1, argument2, argument3] //可以在success函數(shù)和failure函數(shù)中訪問(wèn)的變量
}
var transaction = YAHOO.util.Connect.asyncRequest(’GET’, sUrl, callback, null);
說(shuō)明：
1、第一個(gè)參數(shù)：指明http請(qǐng)求的方式，可用的方式包括GET、POST、HEAD、PUT、DELETE，但PUT和DELETE可能在一些A級(jí)瀏覽器上不支持。
第二個(gè)參數(shù)：請(qǐng)求的URL
第三個(gè)參數(shù)：回調(diào)函數(shù)，用于服務(wù)器返回?cái)?shù)據(jù)時(shí)調(diào)用的客戶端處理程序
第四個(gè)參數(shù)：POST方式時(shí)，提供給URL的POST參數(shù)信息。
定義回調(diào)函數(shù)
2、在異步事物中，可以創(chuàng)建回調(diào)函數(shù)處理服務(wù)器的響應(yīng)和相關(guān)數(shù)據(jù)，如果你不關(guān)心服務(wù)器的返回信息，也可以忽略這些回調(diào)函數(shù)，所有這些回調(diào)函數(shù)對(duì)象都是可選的，然而在大多數(shù)情況下，應(yīng)該至少提供以下三個(gè)回調(diào)函數(shù)：
success：服務(wù)器做出有效響應(yīng)時(shí)的回調(diào)函數(shù)
failure：服務(wù)器響應(yīng)了但提供了錯(cuò)誤信息時(shí)的回調(diào)函數(shù)
argument：success和failure為了處理返回信息需要的參數(shù)，可以是對(duì)象、字符串、數(shù)字或者包含了數(shù)據(jù)的數(shù)組。
3、下面的表給出的是通過(guò)正確返回時(shí)res參數(shù)可以獲得的屬性值。
屬性名 描述
tId 該Http請(qǐng)求的事務(wù)表示
status 返回的Http狀態(tài)碼
statusText 對(duì)應(yīng)狀態(tài)碼的字符串表示
getResponseHeader[label] 返回label名稱標(biāo)識(shí)的Http頭的值
getAllResponseHeader 所有的Http頭的字符串表示，用”"n”分隔
responseText 返回內(nèi)容的字符串表示
responseXML 返回內(nèi)容的XML表示
argument 回調(diào)函數(shù)中傳入的變量
錯(cuò)誤返回時(shí)可以通過(guò)res返回的屬性
屬性名 描述
tId 該Http請(qǐng)求的事務(wù)表示
status 0
statusText “communication failure”
argument 回調(diào)函數(shù)中傳入的變量
4、在使用YAHOO.util.Connect.setForm上載文件時(shí)，需要定義upload回調(diào)函數(shù)代替success和failure
5、在回調(diào)函數(shù)中this將失去作用范圍，這種情況下需要通過(guò)一個(gè)指向父對(duì)象的引用的數(shù)來(lái)訪問(wèn)對(duì)象的成員。為了能夠使用對(duì)象的方法作為回調(diào)函數(shù)，并維持成員的作用范圍，需要定義回調(diào)函數(shù)對(duì)象的成員scope，作為this的值。
6、如果想發(fā)送的是表單數(shù)據(jù)，那么使用下面的代碼就可以了：
YAHOO.util.Connect.setForm(formId);
var cObj = YAHOO.util.Connect.asyncRequest(’POST’, ‘http://www.yahoo.com’, callback);
查看請(qǐng)求是否已經(jīng)處理完
var cObj = YAHOO.util.Connect.asyncRequest(’GET’,''http://www.yahoo.com’,callback);
var callStatus = YAHOO.util.Connect.isCallInProgress(cObj);
超時(shí)取消請(qǐng)求
var cObj = YAHOO.util.Connect.asyncRequest(’GET’, sUrl, callback);
setTimeout(”YAHOO.util.Connect.abort(cObj)”,10000);
二、YUI Utilities(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工具包可以簡(jiǎn)化瀏覽器端的事件驅(qū)動(dòng)程序的開(kāi)發(fā)，通過(guò)使用簡(jiǎn)單的接口可以訂制響應(yīng)DOM事件的代碼，同時(shí)獲得瀏覽器Event對(duì)象的各種屬性也很方便。通過(guò)Event工具包我們還可以訂制自己的事件，這樣頁(yè)面組件可以接收這些事件并做出響應(yīng)。
Event工具集提供的方法
YAHOO.util.Event.addListener(element,eventType,fn,obj,override)
參數(shù)：
element：為綁定事件的元素id，可以是一個(gè)數(shù)組，以支持批量操作
eventType：為事件類型
fn：為事件響應(yīng)的回調(diào)函數(shù)
obj：當(dāng)override為true時(shí)，為回調(diào)函數(shù)傳入的參數(shù)對(duì)象；當(dāng)override為false時(shí)，該參數(shù)被忽略。
override：
返回值類型：Boolean
功能：給指定的element綁定事件響應(yīng)函數(shù)
YAHOO.util.Event.removeListener:function(element,eventType,fn)
參數(shù)：
element：為綁定事件的元素id,
eventType：事件類型
fn：為事件響應(yīng)函數(shù)
返回值類型：Boolean
功能：給指定的element解除綁定事件
YAHOO.util.Event.purgeElement ( el , recurse , sType )
參數(shù)：
el：為綁定事件的元素id,
recurse：Boolean值，是否解除子節(jié)點(diǎn)的事件綁定
sType：事件類型
返回值類型：Boolean
功能：給指定的element解除綁定的同一類型的事件，也可以解除子節(jié)點(diǎn)上綁定的這一類型的事件
YAHOO.util.on
addListener的函數(shù)別名
YAHOO.util.Event.onAvailable ( p_id , p_fn , p_obj , p_override )
參數(shù)：
p_id：為綁定事件的元素id,
p_fn：為事件響應(yīng)函數(shù)
p_obj：同addListener的obj參數(shù)
p_override：同addListener的override參數(shù)
返回值類型：無(wú)
功能：當(dāng)指定的element的p_id出現(xiàn)時(shí)，執(zhí)行事件響應(yīng)函數(shù)。如果在頁(yè)面初始化之前執(zhí)行這一函數(shù)，當(dāng)頁(yè)面加載時(shí)（可能還未完成時(shí)），就會(huì)執(zhí)行響應(yīng)的事件響應(yīng)函數(shù)；如果放在頁(yè)面加載之后執(zhí)行這一函數(shù)，將以固定的時(shí)間輪詢，當(dāng)element可用時(shí)響應(yīng)這一事件。這個(gè)輪詢的的時(shí)間是可以配置的，缺省的時(shí)間是10秒一次。
YAHOO.util.Event.onContentReady ( p_id , p_fn , p_obj , p_override )
參數(shù)：
p_id：為綁定事件的元素id,
p_fn：為事件響應(yīng)函數(shù)
p_obj：同addListener的obj參數(shù)
p_override：同addListener的override參數(shù)
返回值類型：無(wú)
功能：與onAvailable類似，但不同的是事件響應(yīng)函數(shù)是等到element可以安全的修改的時(shí)候才響應(yīng)。
YAHOO.util.Event.onDOMReady ( p_fn , p_obj , p_scope )
參數(shù)：
p_fn：為事件響應(yīng)函數(shù)
p_obj：同addListener的obj參數(shù)
p_scope：同addListener的override參數(shù)
返回值類型：無(wú)
功能：當(dāng)DOM第一次可用時(shí)執(zhí)行響應(yīng)函數(shù)。
YAHOO.util.Event.preventDefault ( event)
參數(shù)：
event：事件對(duì)象
返回值類型：無(wú)
功能：阻止事件的缺省行為發(fā)生。
YAHOO.util.Event.getListeners ( el , sType )
參數(shù)：
el：HTML element
sType：事件類型，String類型
返回值類型：Object{
type：事件類型
fn：addListener添加的事件響應(yīng)函數(shù)
obj：提供給事件響應(yīng)函數(shù)的參數(shù)對(duì)象
adjust：否獲取缺省的事件監(jiān)聽(tīng)器
index：UI事件監(jiān)聽(tīng)器列表中的位置
}
功能：阻止事件的缺省行為發(fā)生。
YAHOO.util.Event.getTime( event)
參數(shù)：
event：事件對(duì)象
返回值類型：Date對(duì)象
功能：獲取事件發(fā)生時(shí)的時(shí)間。
YAHOO.util.Event.getTarget(ev , resolveTextNode)
參數(shù)：
evt：事件對(duì)象
resolveTextNode：
返回值類型： HTML element
功能：獲取事件發(fā)生時(shí)的頁(yè)面標(biāo)簽。對(duì)于IE即window.event.srcElement
基本的事件代碼
var oElement = document.getElementById(”elementid”);//獲得事件源
function fnCallback(e) { alert(”click”); }//定義回調(diào)函數(shù)
YAHOO.util.Event.addListener(oElement, “click”, fnCallback);//注冊(cè)回調(diào)函數(shù)，當(dāng)oElement的click事件發(fā)生的時(shí)候，fnCallback函數(shù)將被調(diào)用。
//或者更簡(jiǎn)單的直接傳遞Id YAHOO.util.Event.addListener(”elementid”, “click”, fnCallback);
注冊(cè)響應(yīng)多個(gè)頁(yè)面元素的事件
var ids = [”el1〃, “el2〃, “el3〃];//該數(shù)組中可以包括元素ID，元素的引用，或者兩者混合的情況。
function fnCallback(e) { alert(this.id); }
YAHOO.util.Event.addListener(ids, “click”, fnCallback);
Yui的Event包解決了一些比較實(shí)際的問(wèn)題，第一頁(yè)面元素通常在Javacript注冊(cè)事件代碼后載入，這個(gè)時(shí)候Yui會(huì)正確延遲注冊(cè)，直到指定Id的元素可以訪問(wèn)。第二微軟的ＩＥ瀏覽器在事件處理函數(shù)中的this指向的是Window對(duì)象，而不是發(fā)生事件的那個(gè)元素，YUI也會(huì)正確的傳遞事件發(fā)生的源元素。第三可以把任意的對(duì)象傳遞給事件處理函數(shù)。
創(chuàng)建和使用自定義的事件
1.使用CustomerEvent對(duì)象創(chuàng)建自己的事件
function TestObj(name) {
this.name = name;
this.event1 = new YAHOO.util.CustomEvent(”event1〃, this);
}
YAHOO.util.CustomEvent = function(type, oScope);
type表示事件類型的字符串
2。注冊(cè)對(duì)自定義事件的響應(yīng)函數(shù)
function Consumer(name, testObj) {
this.name = name;
this.testObj = testObj;
this.testObj.event1.subscribe(this.onEvent1, this);
}
3。響應(yīng)函數(shù)
Consumer.prototype.onEvent1 = function(type, args, me) {
alert(” this: ” + this +
“"n this.name: ” + this.name +
“"n type: ” + type +
“"n args[0].data: ” + args[0].data +
“"n me.name: ” + me.name);
}
4。觸發(fā)自定義事件
function TestData(data) {
this.data = data;
}
var t1 = new TestObj(”mytestobj1〃);
var c1 = new Consumer(”mytestconsumer1〃, t1);
var d1 = new TestData(”mydata1〃);
t1.event1.fire(d1);
三、YUI(Dom Collection)
YUI的dom工具包屏蔽了各種瀏覽器的差別，使用dom工具包可以方便的的操作頁(yè)面元素，包括控制元素的坐標(biāo)，以及改變?cè)氐?/span>CSS風(fēng)格。
1、Element的查找
YAHOO.util.Dom.get(element)
調(diào)用document.getElementById(element)，獲取指定的頁(yè)面元素。
YAHOO.util.Dom.getElementsBy(method,tagName,rootNode)
在rootNode的子節(jié)點(diǎn)中按照用戶提供的method方法在所有標(biāo)簽為tagName的element中查找符合條件的節(jié)點(diǎn)。rootNode不指定則在整個(gè)Document中查找，method是一個(gè)method(elementID)類型的函數(shù)對(duì)象，該函數(shù)對(duì)象的返回值為Boolean值。
YAHOO.util.Dom.getElementsByClassName(className, tagName, rootNode)
返回指定根節(jié)點(diǎn)下所有標(biāo)簽為tagName,class為className的DOM節(jié)點(diǎn)數(shù)組。根節(jié)點(diǎn)為可選參數(shù)，不指定時(shí)在整個(gè)頁(yè)面中查找
YAHOO.util.Dom.inDocument (el)
判斷元素el是否在當(dāng)前的DOM中，支持批量操作。
2、樣式控制和訪問(wèn)
YAHOO.util.Dom.hasClass(element, className)
判斷element標(biāo)簽上是否指明了className的class，支持批量操作
YAHOO.util.Dom.addClass(element, className)
給指定標(biāo)簽增加名為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)
設(shè)置element的style的property屬性為pValue，支持批量操作
注：本節(jié)中的class指的是CSS中定義的class。
3、位置控制和訪問(wèn)
位置控制的相關(guān)函數(shù)
YAHOO.util.Dom.setX
YAHOO.util.Dom.setY
YAHOO.util.Dom.setXY
YAHOO.util.Dom.getX
YAHOO.util.Dom.getXY 返回元素坐標(biāo) [ left,top ]
YAHOO.util.Dom.getRegion
獲取元素的坐標(biāo)Region對(duì)象{left,top,right,bottom}
可支持批量操作
獲取頁(yè)面可視面積的高度和寬度
YAHOO.util.Dom.getClientWidth
YAHOO.util.Dom.getClientHeight
獲取Document的高度和寬度
YAHOO.util.Dom.getDocumentWidth
YAHOO.util.Dom.getDocumentHeight
獲取頁(yè)面可視區(qū)域的高度和寬度（不包含滾動(dòng)條）
YAHOO.util.Dom.getViewportHeight
YAHOO.util.Dom.getViewportWidth
Region對(duì)象：{left,top,right,bottom}
YUI提供的一個(gè)對(duì)象，用于完成多個(gè)矩形區(qū)域間的計(jì)算（如相交，包含。
YAHOO.util.Region.contains(region)
判斷是否包含了region區(qū)域
YAHOO.util.Region.getArea
計(jì)算面積
YAHOO.util.Region.intersect(region)
計(jì)算與region區(qū)域的交迭區(qū)域
YAHOO.util.Region.union(region)
計(jì)算與region區(qū)域求并集（即包含兩個(gè)區(qū)域的最小區(qū)域）
Point對(duì)象：{x,y}
YUI提供的對(duì)象，用于定義坐標(biāo)點(diǎn)。
例：
獲得和設(shè)置元素坐標(biāo)
var pos = YAHOO.util.Dom.getXY(’test’);
YAHOO.util.Dom.setXY(’target’, pos);
設(shè)置元素的CSS屬性
YAHOO.util.Dom.setStyle([’test’, ‘test2′], ‘opacity’, 0.5);
var opacity = YAHOO.util.Dom.getStyle(’test2′, ‘opacity’);
獲得顯示當(dāng)前文檔的窗口的大小。
var viewport = [
YAHOO.util.Dom.getViewportWidth(),
YAHOO.util.Dom.getViewportHeight()
];
獲取和設(shè)置與CSS相關(guān)的屬性
getElementByClassName(className,tagName,rootNode)
hasClass(element,className)
addClass(element,className)
removeClass(element,className)
replaceClass(element,oldClassName,newClassName)
四 YUI提供的CSS樣式
Fonts 字體的規(guī)范樣式，需要引入build/fonts/fonts-min.css
Rese 規(guī)范了所有HTML element的缺省樣式，需要引入build/fonts/reset-min.css
Grids 提供了用于頁(yè)面排版的CSS樣式，需要引入build/fonts/grids-min.css
五、YUI提供的element工具
YUI提供了一組操作頁(yè)面element的工具，是對(duì)標(biāo)準(zhǔn)HTML elements的一種封裝，能夠直接通操作element的實(shí)例，使得增加監(jiān)聽(tīng)器，操作DOM，設(shè)置/獲取element的屬性等工作變得很簡(jiǎn)單。部分方法是直接調(diào)用YUI的DOM工具集提供的方法，如對(duì)class操作的相關(guān)方法、獲取element的相關(guān)方法等等，在此不再重復(fù)。
YAHOO.util.Element(elementId)
創(chuàng)建element，如果elementId在Document中還不存在，仍然可以通過(guò)YUI對(duì)他進(jìn)行屬性設(shè)置，增加監(jiān)聽(tīng)器等操作， Element工具集會(huì)自動(dòng)等到該elementId可用后執(zhí)行這些操作，實(shí)際上真正的操作是等到contentReady事件發(fā)生后才進(jìn)行的。
YAHOO.util.Element.appendChild(child)
在DOM結(jié)構(gòu)中element下增加子節(jié)點(diǎn)
YAHOO.util.Element.getElementsByTagName (tag)
獲取tagName為tag的所有頁(yè)面元素
YAHOO.util.Element.hasChildNodes
判斷是否具有子節(jié)點(diǎn)
YAHOO.util.Element.insertBefore (element, before)
在元素before前插入element
YAHOO.util.Element.removeChild(child)
刪除DOM中元素的child子節(jié)點(diǎn)
YAHOO.util.Element.replaceChild (newNode , oldNode)
替換子節(jié)點(diǎn)oldNode為newNode
六、其它高級(jí)控件
1、Button
對(duì)象定義：YAHOO.widget.Button
與傳統(tǒng)HTML Form的按鈕類似，不同的是它的label可以與 value不一致。還可以創(chuàng)建帶菜單的按鈕，或者radio button、checkbox
分類：
可以創(chuàng)建幾種類型的按鈕：
button:普通的下壓式按鈕，可以在按鈕按下時(shí)執(zhí)行用戶指定的代碼
link:按下時(shí)導(dǎo)航至相應(yīng)的URL
submit:作用相當(dāng)于form的提交按鈕
reset:form的reset按鈕
checkbox:
radio:
menubutton:按下時(shí)顯示隱藏按鈕
splitbutton:按下時(shí)執(zhí)行命令或顯示菜單的按鈕
使用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的構(gòu)造器首先根據(jù)sourceElementId 在DOM中查找<input>，一旦找到，就通過(guò)DOM的 replaceChild方法替換掉<input>
2．使用新建的方式
constructor:YAHOO.widget.Button({配置集})
這種情況下根據(jù)配置集中指明的父id(Container)創(chuàng)建按鈕，如果配置集中沒(méi)有指明按鈕則使用YAHOO.Dom.generateId生成button的ID,
Button的配置集
|
屬性名稱
|
含義
|
備注
|
|
id
|
替換后的新的element id
|
|
|
label
|
按鈕上顯示的文字
|
|
|
check
|
按鈕選中/未選中的狀態(tài)
|
checkbox用到
|
|
type
|
指明button的類型
|
缺省為button
|
|
container
|
按鈕的父id
|
使用新建方式時(shí)會(huì)用到
|
|
srcelement
|
使用替換方式時(shí)
|
|
|
menu
|
按鈕對(duì)應(yīng)的菜單YAHOO.widget.menu
|
|
|
title
|
按鈕title
|
沒(méi)有指定label時(shí)使用title
|
|
href
|
按鈕導(dǎo)航URL
|
僅在按鈕類型為link時(shí)有效
|
|
target
|
<a>中的target
|
僅在按鈕類型為link時(shí)有效
|
|
tabindex
|
按tab切換焦點(diǎn)時(shí)的順序號(hào)
|
|
|
onclick
|
click事件的響應(yīng)函數(shù)
|
onclick:{
fn: Function, // 事件的響應(yīng)函數(shù).
obj: Object, // An object to pass back to the handler.
scope: Object // The object to use for the scope of the handler.
} }
|
|
|
|
2、 ButtonGroup
對(duì)象定義：YAHOO.widget.ButtonGroup
ButtonGroup是一組按鈕，同組中只能有一個(gè)按鈕被選中。根節(jié)點(diǎn)為<div>
3、 AutoComplete
用戶在文本輸入框中輸入文字時(shí)，該組件通過(guò)輸入的內(nèi)容查找符合輸入條件的內(nèi)容，并顯示出所有符合條件的內(nèi)容，供用戶能夠很快的完成正確的輸入。
AutoComplete的引入
<!-- 必須引入 -->
build/yahoo-dom-event/yahoo-dom-event.js
<!-- 可選: Connection(用到 XHR數(shù)據(jù)源時(shí)需要的引入) -->
build/connection/connection-min.js
<!--可選: 用到動(dòng)畫效果時(shí)需要的引入 -->
build/animation/animation-min.js
<!-- Source file -->
build/autocomplete/autocomplete-min.js
控制AutoComplete的配置集
|
屬性名稱
|
含義
|
備注
|
|
animVert
|
控制下拉框向下展開(kāi)的動(dòng)畫效果
|
|
|
animHoriz
|
控制下拉框水平方向展開(kāi)的動(dòng)畫效果
|
|
|
animSpeed
|
控制動(dòng)畫的速度
|
|
|
delimChar
|
一行顯示多條記錄時(shí)的分隔符，可以是字符串?dāng)?shù)組或字符串
|
|
|
maxResultsDisplayed
|
結(jié)果集的最大顯示行數(shù)
|
|
|
minQueryLength
|
進(jìn)行查詢前的輸入的字符個(gè)數(shù)
|
|
|
queryDelay
|
用戶鍵入字符后多少秒開(kāi)始查詢，默認(rèn)0.5
|
|
|
autoHighlight
|
查詢出來(lái)的結(jié)果集顯示后，是否高亮顯示第一條，默認(rèn)為true
|
|
|
highlightClassName
|
高亮顯示的樣式名，默認(rèn)為yui-ac-highlight
|
|
|
prehightlightClassName
|
鼠標(biāo)移動(dòng)到下拉框的一行上時(shí)，那一行的樣式，默認(rèn)為yui-ac-prehighlight
|
|
|
useShadow
|
下拉框是否有陰影
|
|
|
useIFrame
|
下拉框欠套在一個(gè)iframe中，用于解決IE中覆蓋<select>的問(wèn)題
|
|
|
forceSelection
|
限制輸入內(nèi)容必須為查詢結(jié)果中的內(nèi)容，如果不是則輸入內(nèi)容被刪除
|
|
|
typeAhead
|
是否自動(dòng)根據(jù)查詢結(jié)果的第一條補(bǔ)齊到autocomplete中
|
|
|
allowBrowserAutocomplete
|
是否允許瀏覽器提供的輸入框記憶功能，默認(rèn)為false
|
|
|
alwaysShowContainer
|
是否始終顯示查詢結(jié)果的下拉框，默認(rèn)為false
|
|
AutoComplete的使用
1 自定義事件(CustomEvent)
AutoComplete除了默認(rèn)的事件外，還有自定義的事件，以下為AutoComplete用到的各種CustomEvent
|
事件回調(diào)函數(shù)
|
含義
|
備注
|
|
textboxFocusEvent
|
輸入框獲得焦點(diǎn)的事件
|
textboxFocus
|
|
textboxKeyEvent
|
按鍵彈起時(shí)的事件
|
textboxKey
|
|
dataRequestEvent
|
發(fā)出數(shù)據(jù)查詢請(qǐng)求時(shí)的事件
|
dataRequest
|
|
dataReturnEvent
|
數(shù)據(jù)查詢請(qǐng)求返回時(shí)的事件
|
dataReturn
|
|
dataErrorEvent
|
返回結(jié)果為空時(shí)的事件
|
dataError
|
|
containerExpandEvent
|
展開(kāi)下拉框時(shí)的事件
|
containerExpand
|
|
typeAheadEvent
|
符合條件的結(jié)果自動(dòng)用到第一條記錄補(bǔ)齊時(shí)的事件
|
typeAhead
|
|
itemMouseOverEvent
|
鼠標(biāo)移動(dòng)到結(jié)果項(xiàng)上的事件
|
itemMouseOver
|
|
itemMouseOutEvent
|
鼠標(biāo)移出結(jié)果項(xiàng)的事件
|
itemMouseOut
|
|
itemArrowToEvent
|
移動(dòng)到某一選擇項(xiàng)時(shí)的事件
|
itemArrowTo
|
|
itemArrowFromEvent
|
移出某一選擇項(xiàng)時(shí)的事件
|
itemArrowFrom
|
|
itemSelectEvent
|
選中某一選擇項(xiàng)的事件
|
itemSelect
|
|
unmatchedItemSelectEvent
|
forceSelection為false時(shí)，如果輸入了不符合查詢結(jié)果的內(nèi)容時(shí)觸發(fā)本事件。
|
unmatchedItemSelect
|
|
selectionEnforceEvent
|
強(qiáng)制從結(jié)果集中選擇輸入項(xiàng)時(shí)觸發(fā)的事件
|
selectionEnforce
|
|
containerCollapseEvent
|
下拉框收縮時(shí)的事件
|
containerCollapse
|
|
textboxBlurEvent
|
輸入框失去焦點(diǎn)時(shí)的事件
|
textboxBlur
|
可以根據(jù)需要重載自定義的事件
例：輸入框獲得焦點(diǎn)時(shí)自動(dòng)進(jìn)行查詢，可以重載textboxFocusEvent
myAutoComp.textboxFocusEvent.subscribe(
//發(fā)送一個(gè)查詢條件為空的查詢請(qǐng)求
function(){myAutoComp.sendQuery("");}
);
2 格式化下拉框的輸出
如果返回的結(jié)果集中有多個(gè)屬性，可以通過(guò)重載formatResult來(lái)格式化結(jié)果項(xiàng)的輸出
oAutoComp.formatResult = function(oResultItem, sQuery) {
var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")" ;
return (sMarkup);
}
3 AutoComplete的數(shù)據(jù)源
l DS_JSArray
data = ["AAA","BBB","BCC"];
var myDataSource = new YAHOO.widget.DS_JSArray(data);
可以通過(guò)DWR的方式調(diào)用java方法獲得一字符串?dāng)?shù)組作為查詢的下拉框，并在回調(diào)函數(shù)中可以直接使用，如：
l DS_JSFunction
l DS_XHR
對(duì)于JSArray方式取數(shù)時(shí)，AutoComplete可以自動(dòng)根據(jù)輸入的內(nèi)容查在JSArray中查找符合條件的結(jié)果項(xiàng)，但在使用XHR方式時(shí)，YUI并沒(méi)有提供默認(rèn)的查找功能，必須由用戶通過(guò)控制URL參數(shù)方式來(lái)實(shí)現(xiàn)這一功能。
JSON方式：
使用JSON格式時(shí)，創(chuàng)建數(shù)據(jù)源YAHOO.widget.DS_XHR時(shí)第一個(gè)參數(shù)為請(qǐng)求的URL，第二個(gè)參數(shù)為一數(shù)組，這一數(shù)組的第一條記錄表示結(jié)果集在JSON對(duì)象的哪個(gè)對(duì)象屬性下，如類似于下面結(jié)構(gòu)的JSON對(duì)象
{
Result:{
data:[ {username:”Tom”,oldname:”Tom”,age:12”},
{username:”Jack”,oldname:”Jack”,age:16”}
]
}
}
如果是要查詢username則結(jié)果集應(yīng)該表示為”Result.data”，
第二條記錄為搜索的主鍵，同上面的例子中如果是要查找出符合條件的username，則第二個(gè)數(shù)組應(yīng)為”username”,如果返回的結(jié)果集中還需要返回oldname屬性，則應(yīng)該指名數(shù)組的第三條記錄”oldname”,后面還可以指定更多的需要返回的屬性。
因此第二個(gè)數(shù)組對(duì)象參數(shù)可以用以下方法表示：
[結(jié)果對(duì)象,搜索的主鍵,額外的返回屬性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方式：
應(yīng)用方式與JSON方式類似，只是將reponseType指定為
myDataSource1.responseType = YAHOO.widget.DS_XHR.TYPE_XML
收集一下有關(guān)YUI的技術(shù)資料
英文：
Y! DN
學(xué)習(xí)YUI看這一個(gè)就夠了，因?yàn)樯厦娴馁Y料和示例非常齊全，以至于很少有人再針對(duì)YUI寫什么教程！
中文：
1. 臺(tái)灣YDN
現(xiàn)在只是漢化了一小部分內(nèi)容，不過(guò)至少有個(gè)像樣點(diǎn)的中文站點(diǎn)
2.Yahoo! 使用者介面函示庫(kù)（YUI）
臺(tái)灣開(kāi)發(fā)者寫得一篇介紹YUI的好文
3. TW YUI@無(wú)名小站
暫時(shí)資料不多，好像是臺(tái)灣 YUI 的blog
4. YAHOO工具庫(kù)
一些YUI API文檔的翻譯
相對(duì)于YDN上的那些英文資料，感覺(jué)中文資料實(shí)在是太少了，甚至都沒(méi)有一篇像樣的簡(jiǎn)體中文資料！這讓我沒(méi)想到。以后我學(xué)習(xí)的時(shí)候盡量多寫點(diǎn)學(xué)習(xí)筆記好了，雖然可能很簡(jiǎn)單，但于己可以加深印象，對(duì)和我一樣的初學(xué)者可能也有點(diǎn)用
posted on 2009-04-21 11:15
重慶理工小子 閱讀(10653)
評(píng)論(1) 編輯 收藏 所屬分類:
ajax編程