lexy

          支持開源,尊重他人的勞動!

            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理 ::
            17 隨筆 :: 0 文章 :: 9 評論 :: 0 Trackbacks

          Yahoo YUI的Ajax工具包

          YUI簡介

          雅虎前不久推出了稱為YUI的Ajax工具包,同時Yahoo發表了一系列的Ajax設計模式. Yahoo的這些工具包是Yahoo在收購了多個Web2.0網站后推出的Ajax工具包,代碼的注釋也寫的很好,文檔也很豐富和詳盡。

          YUI的組件也在不斷的增加中,yahoo為YUI設了一個Yahoo用戶組,里面的郵件很活躍,問的問題基本都有人回答,而且比較細致和具體。

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

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

          Yahoo的Ajax設計模式是在目前的WEB2.0網站中常用的一些改善用戶體驗,增強交互效果的文章,格式和Design Pattern類 似.有時會提供一些例子網站或網頁,當然都是yahoo自己的幾個網站,上面的javascript可能還沒有整理到YUI里面去,但是 也都是格式化很 好的javascript,也沒有混淆.

          YUI Utilities(Connection Manager)

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

          1. Connection Manager
          這個工具包用來管理XMLHttpRequest,通過這個工具包可以查詢正在執行的請求的狀態,可以注冊正確返回的回調函數,錯誤處理的回調函數,還可以根據提供的表單Id方便的收集和發送表單字段。下面給出的代碼是基本調用形式

          var callback =
          {
          success: function(res) {/*success handler code*/}, //正常返回處理函數
          failure: function(res) {/*failure handler code*/}, //出錯返回處理函數
          argument: [argument1, argument2, argument3] //可以在success函數和failure函數中訪問的變量
          }
          var transaction = YAHOO.util.Connect.asyncRequest(’GET’, sUrl, callback, null); 

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

          屬性明 描述
          tId 該Http請求的事務表示
          status 返回的Http狀態碼
          statusText 對應狀態碼的字符串表示
          getResponseHeader[label] 返回label名稱標識的Http頭的值
          getAllResponseHeader 所有的Http頭的字符串表示,用”\n”分隔
          responseText 返回內容的字符串表示
          responseXML 返回內容的XML表示
          argument 回調函數中傳入的變量

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

          屬性明 描述
          tId 該Http請求的事務表示
          status 0
          statusText “communication failure”
          argument 回調函數中傳入的變量

          如果想發送的是表單數據,那么使用下面的代碼就可以了:

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

          查看請求是否已經處理完

          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)

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

          基本的事件代碼

          var oElement = document.getElementById(”elementid”);//獲得事件源
          function fnCallback(e) { alert(”click”); }//定義回調函數

          YAHOO.util.Event.addListener(oElement, “click”, fnCallback);//注冊回調函數,當oElement的click事件發生的時候,fnCallback函數將被調用。
          //或者更簡單的直接傳遞Id YAHOO.util.Event.addListener(”elementid”, “click”, fnCallback); 

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

          var ids = [”el1″, “el2″, “el3″];//該數組中可以包括元素ID,元素的引用,或者兩者混合的情況。
          function fnCallback(e) { alert(this.id); }
          YAHOO.util.Event.addListener(ids, “click”, fnCallback);

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

          創建和使用自定義的事件

          1.使用CustomerEvent對象創建自己的事件

          function TestObj(name) {
          this.name = name;
          this.event1 = new YAHOO.util.CustomEvent(”event1″, this);
          }

          YAHOO.util.CustomEvent = function(type, oScope);
          type表示事件類型的字符串

          2。注冊對自定義事件的響應函數

          function Consumer(name, testObj) {
          this.name = name;
          this.testObj = testObj;
          this.testObj.event1.subscribe(this.onEvent1, this);
          }

          3。響應函數

          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。觸發自定義事件

          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工具包可以方便的的操作頁面元素,包括控制元素的坐標,以及改變元素的CSS風格。

          獲得和設置元素坐標
          var pos = YAHOO.util.Dom.getXY(’test’);
          YAHOO.util.Dom.setXY(’target’, pos);

          設置元素的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()
          ];

          獲取和設置與CSS相關的屬性
          getElementByClassName(className,tagName,rootNode)
          hasClass(element,className)
          addClass(element,className)
          removeClass(element,className)
          replaceClass(element,oldClassName,newClassName)



          <摘自:http://hi.baidu.com/0pawpaw/blog/item/59810dd71a863bdda044df3b.html>

          posted on 2007-11-19 09:29 lexy 閱讀(1079) 評論(0)  編輯  收藏

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


          網站導航:
           
          主站蜘蛛池模板: 平昌县| 敦煌市| 新巴尔虎左旗| 泰来县| 白水县| 榆社县| 罗源县| 黎川县| 余江县| 浦东新区| 怀仁县| 八宿县| 化州市| 大安市| 温宿县| 鹰潭市| 高雄市| 宝丰县| 衡水市| 宁国市| 永清县| 闸北区| 呼图壁县| 漠河县| 汶川县| 阿图什市| 石渠县| 岳普湖县| 海宁市| 陵水| 宜兰县| 阜平县| 涿鹿县| 苗栗县| 克拉玛依市| 洛浦县| 望谟县| 华宁县| 新泰市| 鄄城县| 唐海县|