shenang博客技術(shù)文檔


          理論不懂就實踐,實踐不會就學理論!

          posts - 35,comments - 55,trackbacks - 0
           

          YUI中文文檔

           

          根據(jù)網(wǎng)上別人的說明和綜合各方面資料,網(wǎng)上說的要么結(jié)構(gòu)不是很清楚,要么不是很全,呵呵,借別人的輪子總結(jié)一下哈,不用造輪子了,我對YUI的文檔作一個總結(jié),共同學習。.

          打算從零開始學習YUI AJAX類庫那么多,為什么我要學習YUI呢?首先,因為YUI很強大;其次因為YUIYahoo! 的。雖然Yahoo!現(xiàn)在好像沒落了,但聽同事說了YUI的強大,抑制不住學習的興奮,今天就來學習一下!學習的東西很多,今天只是走馬觀花的看一個大概的說明,即每個控件有什么功能,具體怎么用就是后面的事情了。

          Yahoo發(fā)表了一系列的Ajax設(shè)計模式. Yahoo的這些工具包是Yahoo在收購了多個Web2.0網(wǎng)站后推出的Ajax工具包,代碼的注釋也寫的很好,文檔也很豐富和詳盡。

          YUI分為兩個大類,一個是Ajax組件,里面包括對底層javascript包裝后的幾個工具包,分別是connection,event, dom,animation,dnd.還包括一組高級的javascript控件,目前包括AutoComplete,Calendar, Container,Menu,Slider,TreeView.

          另一類是幾個很有用的幾個CSS文件,一個是CSS Page Grids,用它可以很方便的布局你的網(wǎng)頁。另外兩個是Standard CSS FontsStandard CSS Reset,利用這兩個CSS可以對字體等在不同瀏覽器中獲得一致的效果.

          一、YUI Utilities(Connection Manager)

              Yahoojavascript文件都有一個注釋的很好的,格式化很好的版本和一個去掉注釋和空格的版本,學習看源代碼當然用前者,而最后在網(wǎng)頁上使用的時候就可以選用后者。

          Connection的引入:

          <!-- Dependency -->

          build/yahoo/yahoo-min.js

          <!—可選項: 用到事件時引入 -->

          build/event/event-min.js

          build/connection/connection-min.js

          1. Connection Manager

          這個工具包用來管理XMLHttpRequest,通過這個工具包可以查詢正在執(zhí)行的請求的狀態(tài),可以注冊正確返回的回調(diào)函數(shù),錯誤處理的回調(diào)函數(shù),還可以根據(jù)提供的表單Id方便的收集和發(fā)送表單字段。下面給出的代碼是基本調(diào)用形式

          var callback =

          {

          success: function(res) {/*success handler code*/}, //正常返回處理函數(shù)

          failure: function(res) {/*failure handler code*/}, //出錯返回處理函數(shù)

          argument: [argument1, argument2, argument3] //可以在success函數(shù)和failure函數(shù)中訪問的變量

          }

          var transaction = YAHOO.util.Connect.asyncRequest(’GET’, sUrl, callback, null);

          說明:

          1、第一個參數(shù):指明http請求的方式,可用的方式包括GETPOSTHEADPUTDELETE,但PUTDELETE可能在一些A級瀏覽器上不支持。

          第二個參數(shù):請求的URL

          第三個參數(shù):回調(diào)函數(shù),用于服務器返回數(shù)據(jù)時調(diào)用的客戶端處理程序

          第四個參數(shù):POST方式時,提供給URLPOST參數(shù)信息。

          定義回調(diào)函數(shù)

          2在異步事物中,可以創(chuàng)建回調(diào)函數(shù)處理服務器的響應和相關(guān)數(shù)據(jù),如果你不關(guān)心服務器的返回信息,也可以忽略這些回調(diào)函數(shù),所有這些回調(diào)函數(shù)對象都是可選的,然而在大多數(shù)情況下,應該至少提供以下三個回調(diào)函數(shù):

          success:服務器做出有效響應時的回調(diào)函數(shù)

          failure:服務器響應了但提供了錯誤信息時的回調(diào)函數(shù)

          argumentsuccessfailure為了處理返回信息需要的參數(shù),可以是對象、字符串、數(shù)字或者包含了數(shù)據(jù)的數(shù)組。

          3下面的表給出的是通過正確返回時res參數(shù)可以獲得的屬性值。

          屬性名                   描述

          tId                      該Http請求的事務表示

          status                   返回的Http狀態(tài)碼

          statusText               對應狀態(tài)碼的字符串表示

          getResponseHeader[label] 返回label名稱標識的Http頭的值

          getAllResponseHeader     所有的Http頭的字符串表示,用”"n”分隔

          responseText             返回內(nèi)容的字符串表示

          responseXML              返回內(nèi)容的XML表示

          argument                 回調(diào)函數(shù)中傳入的變量

          錯誤返回時可以通過res返回的屬性

          屬性名           描述

          tId               該Http請求的事務表示

          status            0

          statusText       “communication failure”

          argument          回調(diào)函數(shù)中傳入的變量

          4、在使用YAHOO.util.Connect.setForm上載文件時,需要定義upload回調(diào)函數(shù)代替successfailure

          5、在回調(diào)函數(shù)中this將失去作用范圍,這種情況下需要通過一個指向父對象的引用的數(shù)來訪問對象的成員。為了能夠使用對象的方法作為回調(diào)函數(shù),并維持成員的作用范圍,需要定義回調(diào)函數(shù)對象的成員scope,作為this的值。

          6、如果想發(fā)送的是表單數(shù)據(jù),那么使用下面的代碼就可以了:

          YAHOO.util.Connect.setForm(formId);

          var cObj = YAHOO.util.Connect.asyncRequest(’POST’, ‘http://www.yahoo.com’, callback);

          查看請求是否已經(jīng)處理完

          var cObj = YAHOO.util.Connect.asyncRequest(’GET’,''http://www.yahoo.com’,callback);

          var callStatus = YAHOO.util.Connect.isCallInProgress(cObj);

          超時取消請求

          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

           EventCustom Event分別定義在YAHOO.util.EventYAHOO.util.CustomEvent

          使用Event工具包可以簡化瀏覽器端的事件驅(qū)動程序的開發(fā),通過使用簡單的接口可以訂制響應DOM事件的代碼,同時獲得瀏覽器Event對象的各種屬性也很方便。通過Event工具包我們還可以訂制自己的事件,這樣頁面組件可以接收這些事件并做出響應。

          Event工具集提供的方法

          YAHOO.util.Event.addListener(element,eventType,fn,obj,override)

          參數(shù):

          element:為綁定事件的元素id可以是一個數(shù)組,以支持批量操作

          eventType:為事件類型

          fn:為事件響應的回調(diào)函數(shù)

          obj:當overridetrue時,為回調(diào)函數(shù)傳入的參數(shù)對象;當overridefalse時,該參數(shù)被忽略。

          override

          返回值類型:Boolean

          功能:給指定的element綁定事件響應函數(shù)

          YAHOO.util.Event.removeListener:function(element,eventType,fn)

          參數(shù):

          element:為綁定事件的元素id,

          eventType:事件類型

          fn:為事件響應函數(shù)

          返回值類型:Boolean

          功能:給指定的element解除綁定事件

          YAHOO.util.Event.purgeElement ( el , recurse , sType )

          參數(shù):

          el:為綁定事件的元素id,

          recurseBoolean值,是否解除子節(jié)點的事件綁定

          sType:事件類型

          返回值類型:Boolean

          功能:給指定的element解除綁定的同一類型的事件,也可以解除子節(jié)點上綁定的這一類型的事件

          YAHOO.util.on

          addListener的函數(shù)別名

          YAHOO.util.Event.onAvailable ( p_id , p_fn , p_obj , p_override )

          參數(shù):

          p_id:為綁定事件的元素id,

          p_fn:為事件響應函數(shù)

          p_obj:同addListenerobj參數(shù)

          p_override:同addListeneroverride參數(shù)

          返回值類型:

          功能:當指定的elementp_id出現(xiàn)時,執(zhí)行事件響應函數(shù)。如果在頁面初始化之前執(zhí)行這一函數(shù),當頁面加載時(可能還未完成時),就會執(zhí)行響應的事件響應函數(shù);如果放在頁面加載之后執(zhí)行這一函數(shù),將以固定的時間輪詢,當element可用時響應這一事件。這個輪詢的的時間是可以配置的,缺省的時間是10秒一次。

          YAHOO.util.Event.onContentReady ( p_id , p_fn , p_obj , p_override )

          參數(shù):

          p_id:為綁定事件的元素id,

          p_fn:為事件響應函數(shù)

          p_obj:同addListenerobj參數(shù)

          p_override:同addListeneroverride參數(shù)

          返回值類型:

          功能:onAvailable類似,但不同的是事件響應函數(shù)是等到element可以安全的修改的時候才響應。

          YAHOO.util.Event.onDOMReady ( p_fn , p_obj , p_scope )

          參數(shù):

          p_fn:為事件響應函數(shù)

          p_obj:同addListenerobj參數(shù)

          p_scope:同addListeneroverride參數(shù)

          返回值類型:

          功能:DOM第一次可用時執(zhí)行響應函數(shù)。

          YAHOO.util.Event.preventDefault ( event)

          參數(shù):

          event:事件對象

          返回值類型:

          功能:阻止事件的缺省行為發(fā)生。

          YAHOO.util.Event.getListeners ( el , sType )

          參數(shù):

          elHTML element

          sType:事件類型,String類型

          返回值類型:Object{

          type:事件類型

           fnaddListener添加的事件響應函數(shù)

           obj:提供給事件響應函數(shù)的參數(shù)對象

           adjust:否獲取缺省的事件監(jiān)聽器

           indexUI事件監(jiān)聽器列表中的位置

          }

          功能:阻止事件的缺省行為發(fā)生。

          YAHOO.util.Event.getTime( event)

          參數(shù):

          event:事件對象

          返回值類型:Date對象

          功能:獲取事件發(fā)生時的時間。

          YAHOO.util.Event.getTarget(ev , resolveTextNode)

          參數(shù):

          evt:事件對象

          resolveTextNode

          返回值類型: HTML element

          功能:獲取事件發(fā)生時的頁面標簽。對于IEwindow.event.srcElement

          基本的事件代碼

           

          var oElement = document.getElementById(elementid);//獲得事件源

          function fnCallback(e) { alert(click); }//定義回調(diào)函數(shù)

          YAHOO.util.Event.addListener(oElement, click, fnCallback);//注冊回調(diào)函數(shù),當oElementclick事件發(fā)生的時候,fnCallback函數(shù)將被調(diào)用。

          //或者更簡單的直接傳遞Id YAHOO.util.Event.addListener(elementid, click, fnCallback);

          注冊響應多個頁面元素的事件

          var ids = [el1, el2, el3];//該數(shù)組中可以包括元素ID,元素的引用,或者兩者混合的情況。

          function fnCallback(e) { alert(this.id); }

          YAHOO.util.Event.addListener(ids, “click”, fnCallback);

          YuiEvent包解決了一些比較實際的問題,第一頁面元素通常在Javacript注冊事件代碼后載入,這個時候Yui會正確延遲注冊,直到指Id的元素可以訪問。第二微軟的IE瀏覽器在事件處理函數(shù)中的this指向的是Window對象,而不是發(fā)生事件的那個元素,YUI也會正確的傳遞事件發(fā)生的源元素。第三可以把任意的對象傳遞給事件處理函數(shù)。

          創(chuàng)建和使用自定義的事件

          1.使用CustomerEvent對象創(chuàng)建自己的事件

          function TestObj(name) {

          this.name = name;

          this.event1 = new YAHOO.util.CustomEvent(event1, this);

          }

          YAHOO.util.CustomEvent = function(type, oScope);

          type表示事件類型的字符串

          2。注冊對自定義事件的響應函數(shù)

          function Consumer(name, testObj) {

          this.name = name;

          this.testObj = testObj;

          this.testObj.event1.subscribe(this.onEvent1, this);

          }

          3。響應函數(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)

          YUIdom工具包屏蔽了各種瀏覽器的差別,使用dom工具包可以方便的的操作頁面元素,包括控制元素的坐標,以及改變元素的CSS風格。

               1Element的查找

          YAHOO.util.Dom.get(element)

          調(diào)用document.getElementById(element),獲取指定的頁面元素。

          YAHOO.util.Dom.getElementsBy(method,tagName,rootNode)

          rootNode的子節(jié)點中按照用戶提供的method方法在所有標簽為tagNameelement中查找符合條件的節(jié)點。rootNode不指定則在整個Document中查找,method是一個method(elementID)類型的函數(shù)對象,該函數(shù)對象的返回值為Boolean值。

          YAHOO.util.Dom.getElementsByClassName(className, tagName, rootNode)

          返回指定根節(jié)點下所有標簽為tagName,classclassNameDOM節(jié)點數(shù)組。根節(jié)點為可選參數(shù),不指定時在整個頁面中查找

          YAHOO.util.Dom.inDocument (el)

          判斷元素el是否在當前的DOM中,支持批量操作。

           2樣式控制和訪問

          YAHOO.util.Dom.hasClass(element, className)

          判斷element標簽上是否指明了classNameclass,支持批量操作

          YAHOO.util.Dom.addClass(element, className)

          給指定標簽增加名為classNameclass,支持批量操作.

          YAHOO.util.Dom.removeClass(element, className)

          刪除element上的名為classNameclass,支持批量操作

          YAHOO.util.Dom.replaceClass(element, oldClassName, newClassName)

          替換element上的oldClassName樣式為newClassName,支持批量操作

          YAHOO.util.Dom.getStyle(element, property)

          獲取elementstyle中的property屬性,支持批量操作

          YAHOO.util.Dom.setStyle(element,property,pValue)

          設(shè)置elementstyleproperty屬性為pValue,支持批量操作

          注:本節(jié)中的class指的是CSS中定義的class

           3位置控制和訪問

          位置控制的相關(guān)函數(shù)

          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

          獲取頁面可視區(qū)域的高度和寬度(不包含滾動條)

          YAHOO.util.Dom.getViewportHeight

          YAHOO.util.Dom.getViewportWidth

          Region對象:{left,top,right,bottom}

          YUI提供的一個對象,用于完成多個矩形區(qū)域間的計算(如相交,包含。

          YAHOO.util.Region.contains(region)

          判斷是否包含了region區(qū)域

          YAHOO.util.Region.getArea

          計算面積

          YAHOO.util.Region.intersect(region)

          計算與region區(qū)域的交迭區(qū)域

          YAHOO.util.Region.union(region)

          計算與region區(qū)域求并集(即包含兩個區(qū)域的最小區(qū)域)

          Point對象:{x,y}

          YUI提供的對象,用于定義坐標點。

          例:

          獲得和設(shè)置元素坐標

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

          獲得顯示當前文檔的窗口的大小。

          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   提供了用于頁面排版的CSS樣式,需要引入build/fonts/grids-min.css

           五、YUI提供的element工具

          YUI提供了一組操作頁面element的工具,是對標準HTML elements的一種封裝,能夠直接通操作element的實例,使得增加監(jiān)聽器,操作DOM,設(shè)置/獲取element的屬性等工作變得很簡單。部分方法是直接調(diào)用YUIDOM工具集提供的方法,如對class操作的相關(guān)方法、獲取element的相關(guān)方法等等,在此不再重復。

          YAHOO.util.Element(elementId)

          創(chuàng)建element,如果elementIdDocument中還不存在,仍然可以通過YUI對他進行屬性設(shè)置,增加監(jiān)聽器等操作, Element工具集會自動等到該elementId可用后執(zhí)行這些操作,實際上真正的操作是等到contentReady事件發(fā)生后才進行的。

          YAHOO.util.Element.appendChild(child)

          DOM結(jié)構(gòu)中element下增加子節(jié)點

          YAHOO.util.Element.getElementsByTagName (tag)

          獲取tagNametag的所有頁面元素

          YAHOO.util.Element.hasChildNodes

          判斷是否具有子節(jié)點

          YAHOO.util.Element.insertBefore (element, before)

          在元素before前插入element

          YAHOO.util.Element.removeChild(child)

          刪除DOM中元素的child子節(jié)點

          YAHOO.util.Element.replaceChild (newNode , oldNode)

          替換子節(jié)點oldNodenewNode

          六、其它高級控件

          1Button

          對象定義:YAHOO.widget.Button

          與傳統(tǒng)HTML Form的按鈕類似,不同的是它的label可以與 value不一致。還可以創(chuàng)建帶菜單的按鈕,或者radio buttoncheckbox

          分類:

          可以創(chuàng)建幾種類型的按鈕:

          button:普通的下壓式按鈕,可以在按鈕按下時執(zhí)行用戶指定的代碼

          link:按下時導航至相應的URL

          submit:作用相當于form的提交按鈕

          reset:formreset按鈕

          checkbox:

          radio:

          menubutton:按下時顯示隱藏按鈕

          splitbutton:按下時執(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

          <!—使用menubuttonsplitbutton要用到的 -->

          build/container/container_core-min.js

          build/menu/menu-min.js

          <!-- Source file -->

          build/button/button-beta-min.js

          初始化的方式:

          1使用替換<input><span>的方式

          constructorYAHOO.widget.Button(sourceElementId,{配置集})

          Button的構(gòu)造器首先根據(jù)sourceElementId DOM中查找<input>,一旦找到,就通過DOM replaceChild方法替換掉<input>

          2使用新建的方式

          constructor:YAHOO.widget.Button({配置集})

          這種情況下根據(jù)配置集中指明的父id(Container)創(chuàng)建按鈕,如果配置集中沒有指明按鈕則使用YAHOO.Dom.generateId生成buttonID,

          Button的配置集

          屬性名稱

          含義

          備注

          id

          替換后的新的element id

          label

          按鈕上顯示的文字

          check

          按鈕選中/未選中的狀態(tài)

          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事件的響應函數(shù)

          onclick:{
          fn: Function, //
          事件的響應函數(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

           

          對象定義:YAHOO.widget.ButtonGroup

          ButtonGroup是一組按鈕,同組中只能有一個按鈕被選中。根節(jié)點為<div>

          3     AutoComplete

          用戶在文本輸入框中輸入文字時,該組件通過輸入的內(nèi)容查找符合輸入條件的內(nèi)容,并顯示出所有符合條件的內(nèi)容,供用戶能夠很快的完成正確的輸入。

           AutoComplete的引入

          <!-- 必須引入 -->

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

          <!-- 可選: Connection(用到 XHR數(shù)據(jù)源時需要的引入) -->

          build/connection/connection-min.js

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

          build/animation/animation-min.js

          <!-- Source file -->

          build/autocomplete/autocomplete-min.js

           控制AutoComplete的配置集

          屬性名稱

          含義

          備注

          animVert

          控制下拉框向下展開的動畫效果

          animHoriz

          控制下拉框水平方向展開的動畫效果

          animSpeed

          控制動畫的速度

          delimChar

          一行顯示多條記錄時的分隔符,可以是字符串數(shù)組或字符串

          maxResultsDisplayed

          結(jié)果集的最大顯示行數(shù)

          minQueryLength

          進行查詢前的輸入的字符個數(shù)

          queryDelay

          用戶鍵入字符后多少秒開始查詢,默認0.5

          autoHighlight

          查詢出來的結(jié)果集顯示后,是否高亮顯示第一條,默認為true

          highlightClassName

          高亮顯示的樣式名,默認為yui-ac-highlight

          prehightlightClassName

          鼠標移動到下拉框的一行上時,那一行的樣式,默認為yui-ac-prehighlight

          useShadow

          下拉框是否有陰影

          useIFrame

          下拉框欠套在一個iframe中,用于解決IE中覆蓋<select>的問題

          forceSelection

          限制輸入內(nèi)容必須為查詢結(jié)果中的內(nèi)容,如果不是則輸入內(nèi)容被刪除

          typeAhead

          是否自動根據(jù)查詢結(jié)果的第一條補齊到autocomplete

          allowBrowserAutocomplete

          是否允許瀏覽器提供的輸入框記憶功能,默認為false

          alwaysShowContainer

          是否始終顯示查詢結(jié)果的下拉框,默認為false

          AutoComplete的使用

          1          自定義事件(CustomEvent)

          AutoComplete除了默認的事件外,還有自定義的事件,以下為AutoComplete用到的各種CustomEvent

          事件回調(diào)函數(shù)

          含義

          備注

          textboxFocusEvent

          輸入框獲得焦點的事件

          textboxFocus

          textboxKeyEvent 

          按鍵彈起時的事件

          textboxKey

          dataRequestEvent

          發(fā)出數(shù)據(jù)查詢請求時的事件

          dataRequest

          dataReturnEvent

          數(shù)據(jù)查詢請求返回時的事件

          dataReturn

          dataErrorEvent

          返回結(jié)果為空時的事件

          dataError

          containerExpandEvent

          展開下拉框時的事件

          containerExpand

          typeAheadEvent

          符合條件的結(jié)果自動用到第一條記錄補齊時的事件

          typeAhead

          itemMouseOverEvent

          鼠標移動到結(jié)果項上的事件

          itemMouseOver

          itemMouseOutEvent

          鼠標移出結(jié)果項的事件

          itemMouseOut

          itemArrowToEvent

          移動到某一選擇項時的事件

          itemArrowTo

          itemArrowFromEvent

          移出某一選擇項時的事件

          itemArrowFrom

          itemSelectEvent

          選中某一選擇項的事件

          itemSelect

          unmatchedItemSelectEvent

          forceSelectionfalse時,如果輸入了不符合查詢結(jié)果的內(nèi)容時觸發(fā)本事件。

          unmatchedItemSelect

          selectionEnforceEvent

          強制從結(jié)果集中選擇輸入項時觸發(fā)的事件

          selectionEnforce

          containerCollapseEvent

          下拉框收縮時的事件

          containerCollapse

          textboxBlurEvent

          輸入框失去焦點時的事件

          textboxBlur

          可以根據(jù)需要重載自定義的事件

          例:輸入框獲得焦點時自動進行查詢,可以重載textboxFocusEvent

          myAutoComp.textboxFocusEvent.subscribe(

                //發(fā)送一個查詢條件為空的查詢請求

          function(){myAutoComp.sendQuery("");}

          );

          2          格式化下拉框的輸出

          如果返回的結(jié)果集中有多個屬性,可以通過重載formatResult來格式化結(jié)果項的輸出

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

          可以通過DWR的方式調(diào)用java方法獲得一字符串數(shù)組作為查詢的下拉框,并在回調(diào)函數(shù)中可以直接使用,如:

          l         DS_JSFunction

          l         DS_XHR

          對于JSArray方式取數(shù)時,AutoComplete可以自動根據(jù)輸入的內(nèi)容查在JSArray中查找符合條件的結(jié)果項,但在使用XHR方式時,YUI并沒有提供默認的查找功能,必須由用戶通過控制URL參數(shù)方式來實現(xiàn)這一功能。

          JSON方式:

          使用JSON格式時,創(chuàng)建數(shù)據(jù)源YAHOO.widget.DS_XHR時第一個參數(shù)為請求的URL,第二個參數(shù)為一數(shù)組,這一數(shù)組的第一條記錄表示結(jié)果集在JSON對象的哪個對象屬性下,如類似于下面結(jié)構(gòu)的JSON對象

          {

          Result:{

          data:[   {username:”Tom”,oldname:”Tom”,age:12”},

          {username:”Jack”,oldname:”Jack”,age:16”}

          ]

          }

          }

          如果是要查詢username則結(jié)果集應該表示為”Result.data”

          第二條記錄為搜索的主鍵,同上面的例子中如果是要查找出符合條件的username,則第二個數(shù)組應為”username”,如果返回的結(jié)果集中還需要返回oldname屬性,則應該指名數(shù)組的第三條記錄”oldname”,后面還可以指定更多的需要返回的屬性。

          因此第二個數(shù)組對象參數(shù)可以用以下方法表示:

          [結(jié)果對象,搜索的主鍵,額外的返回屬性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

          收集一下有關(guān)YUI的技術(shù)資料

          英文:

          Y! DN
          學習YUI看這一個就夠了,因為上面的資料和示例非常齊全,以至于很少有人再針對YUI寫什么教程!

          中文:

          1. 臺灣YDN
          現(xiàn)在只是漢化了一小部分內(nèi)容,不過至少有個像樣點的中文站點

          2.Yahoo! 使用者介面函示庫(YUI
          臺灣開發(fā)者寫得一篇介紹YUI的好文

          3. TW YUI@無名小站
          暫時資料不多,好像是臺灣 YUI blog

          4. YAHOO工具庫
          一些YUI API文檔的翻譯

          相對于YDN上的那些英文資料,感覺中文資料實在是太少了,甚至都沒有一篇像樣的簡體中文資料!這讓我沒想到。以后我學習的時候盡量多寫點學習筆記好了,雖然可能很簡單,但于己可以加深印象,對和我一樣的初學者可能也有點用

           

           

          posted on 2009-04-21 11:15 重慶理工小子 閱讀(10661) 評論(1)  編輯  收藏 所屬分類: ajax編程

          FeedBack:
          # re: YUI中文文檔
          2009-04-21 21:07 | 與你同飛
          很詳盡,多謝分享。  回復  更多評論
            

          只有注冊用戶登錄后才能發(fā)表評論。


          網(wǎng)站導航:
           
          主站蜘蛛池模板: 集贤县| 石棉县| 赞皇县| 灌南县| 隆化县| 滨州市| 太仆寺旗| 通江县| 丰城市| 千阳县| 耒阳市| 大渡口区| 阿鲁科尔沁旗| 安宁市| 蓝田县| 河南省| 司法| 庄浪县| 阿鲁科尔沁旗| 札达县| 洱源县| 浦江县| 萝北县| 西青区| 广州市| 保康县| 静安区| 信宜市| 奇台县| 航空| 德庆县| 特克斯县| 广灵县| 银川市| 庆云县| 独山县| 搜索| 乌兰县| 奈曼旗| 武宣县| 海南省|