thinking

          one platform thousands thinking

          YUI學習筆記

          最近要寫個網頁項目,需要很多動態功能,本來想用自己非常熟悉的AS3來做,后來無意中了解了YUI,發現其實現的功能非常強大,而且架構和AS3很接近。于是花了兩個小時到其官方網站http://developer.yahoo.com/yui/上深入學習了一下,解決了項目中一些原來非常棘手的問題。

          這里是些學習筆記:

          ================連接類==================
          1- YUI connect:
          var callback =
          {
          success: function(res) {}, //正常返回處理函數
          failure: function(res) {}, //出錯返回處理函數
          argument: [argument1, argument2, argument3] //可以在success函數和failure函數中訪

          問的變量
          }
          var transaction = YAHOO.util.Connect.asyncRequest(’GET’, sUrl, callback,

          null);

          2- 發送表單:
          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);

          ================事件類==================
          3- 事件偵聽
          YAHOO.util.Event.addListener(element,eventType,fn,obj,override)
          參數:
          element:為綁定事件的元素id,可以是一個數組,以支持批量操作
          eventType:為事件類型
          fn:為事件響應的回調函數
          obj:當override為true時,為回調函數傳入的參數對象;當override為false時,該參數被

          忽略。
          override:
          返回值類型:Boolean
          功能:給指定的element綁定事件響應函數

          4- 刪除事件偵聽
          YAHOO.util.Event.removeListener:function(element,eventType,fn)
          參數:
          element:為綁定事件的元素id,
          eventType:事件類型
          fn:為事件響應函數
          返回值類型:Boolean
          功能:給指定的element解除綁定事件

          5- 偵聽裝載完成
          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可以安全的修改的時候

          才響應。

          6- 偵聽DOM第一次可用時執行響應函數
          YAHOO.util.Event.onDOMReady ( p_fn , p_obj , p_scope )
          參數:
          p_fn:為事件響應函數
          p_obj:同addListener的obj參數
          p_scope:同addListener的override參數
          返回值類型:無
          功能:當DOM第一次可用時執行響應函數。

          7- 返回偵聽對象
          YAHOO.util.Event.getListeners ( el , sType )
          參數:
          el:HTML element
          sType:事件類型,String類型
          返回值類型:Object{
          type:事件類型
           fn:addListener添加的事件響應函數
           obj:提供給事件響應函數的參數對象
           adjust:否獲取缺省的事件監聽器
           index:UI事件監聽器列表中的位置
          }

          來源:(http://blog.sina.com.cn/s/blog_5d41b3800100gmap.html) - YUI學習筆記_千峰_新浪博客

          8- 獲取事件發生時的時間
          YAHOO.util.Event.getTime( event)
          參數:
          event:事件對象
          返回值類型:Date對象

          9- 獲取事件發生時的頁面標簽。對于IE即window.event.srcElement
          YAHOO.util.Event.getTarget(ev , resolveTextNode)
          參數:
          evt:事件對象
          resolveTextNode:
          返回值類型: HTML element

          10- 創建和使用自定義的事件
          A.使用CustomerEvent對象創建自己的事件
          function TestObj(name) {
          this.name = name;
          this.event1 = new YAHOO.util.CustomEvent(”event1〃, this);
          }
          YAHOO.util.CustomEvent = function(type, oScope);
          type表示事件類型的字符串
          B.注冊對自定義事件的響應函數
          function Consumer(name, testObj) {
          this.name = name;
          this.testObj = testObj;
          this.testObj.event1.subscribe(this.onEvent1, this);
          }
          C.響應函數
          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);
          }

          11- 當。。。時處理
          YAHOO.util.Event.on("toolbar", "focusin", function(e) {  
             YAHOO.log("target: " + e.target.id);  
          });  
          或者:
          YAHOO.util.Event.on("btn", "click", move);
          var move = function(e){...};
          <button id="btn">確認</button>

          12- 獲取當前鼠標位置
          var move=function(e){
             YAHOO.util.Dom.setXY('foo', YAHOO.util.Event.getXY(e));
          };

          ============YAHOO.lang工具===========
          包含了語言工具

          ============YAHOO.widget組件工具===========
          包含了很多小的工具,如月歷,菜單,表格,對話框,進度條,文本編輯框,樹型表,

          Uploader等等。(類似于flash的組件)
          1- YAHOO.widget.Button
          2- YAHOO.widget.ButtonGroup
          3- YAHOO.widget.AutoComplete//自動填寫表單,將數據或遠程數據寫入數組
          4- YAHOO.widget.Calendar//日歷
          5- YAHOO.widget.Carousel//圖片預覽顯示
          6- YAHOO.widget.ColorPicker
          7- YAHOO.widget.Container//包含Module, Overlay, Panel, Tooltip, Dialog,

          SimpleDialog)
          8- YAHOO.widget.DataTable//類似EXCEL的數據表格
          9- YAHOO.widget.ImageCropper//圖像裁剪器
          10- YAHOO.widget.LayoutManager
          11- YAHOO.widget.Menu
          12- YAHOO.widget.Paginator//分頁顯示器
          13- YAHOO.widget.ProgressBar
          14- YAHOO.widget.Editor/SimpleEditor//可以做成網頁編輯器,功能很多
          15- YAHOO.widget.Slider
          16- YAHOO.widget.Tab//標簽頁
          17- YAHOO.widget.TreeView
          18- YAHOO.widget.Uploader//文件上傳組件,要和swf一起使用
          19- YAHOO.widget.Charts//圖表,生成flash圖表

          ============YAHOO.lang.JSON工具===========

          ============YAHOO.util.Element工具===========
          1- 新建元素
          var el = new YAHOO.util.Element('foo');//新建一個id為foo的元件
          el.setStyle("color", "#f00");//設置style
          el.on('click', function(e){alert(e.target.getStyle('color'));});//設置事件偵聽
          el.get('id');//獲取id屬性
          el.get('childNodes');//獲取子節點數目
          el.get('firstChild');//獲取第一個節點
          el.hasChildNodes();//檢測是否有子節點
          el.removeChild(el.get('firstChild'));//刪除第一個子節點
          el.appendChild(child);//增加節點
          el.getElementsByTageName(tag);//獲取tagName為tag的所有元素
          el.insertBefore(element,before);//在元素before前插入element
          el.replaceChild(newNode,oldNode);//替換節點

          ============YAHOO.util.Dom工具===========
          //----元素訪問----
          YAHOO.util.Dom.get(element);//==document.getElementById(element);
          YAHOO.util.Dom.getElementsBy(method,tagName,[rootNode]);//在指定子節點下,通過指

          定的方式method找元素
          YAHOO.util.Dom.getElementsByClassName(className, tagName, [rootNode]);//根據

          class和id找元素
          YAHOO.util.Dom.inDocument(el);//判斷元素是否在當前DOM中
          //----class樣式訪問和控制-----
          YAHOO.util.Dom.hasClass(element, className);//判斷element上是否使用了className的

          class
          YAHOO.util.Dom.addClass(element, className);//給指定element增加class
          YAHOO.util.Dom.removeClass(element,className);//刪除element上名為className的

          class
          YAHOO.util.Dom.replaceClass(element, oldClassName, newClassName);//更新
          YAHOO.util.Dom.getStyle(element, property);//獲取element的style中指定的屬性值
          YAHOO.util.Dom.setStyle(element, property, value);//設定屬性值
          //----元素位置訪問和控制----
          YAHOO.util.Dom.setX('element', value);
          YAHOO.util.Dom.setY
          YAHOO.util.Dom.setXY('element', point:Point);
          YAHOO.util.Dom.getX
          YAHOO.util.Dom.getXY('element');//返回Point對象
          YAHOO.util.Dom.getRegin;//獲取Region對象{left,top,right,bottom}
          YAHOO.util.Dom.getClientWidth;//獲取頁面可視面積的高度和寬度
          YAHOO.util.Dom.getClientHeight;//
          YAHOO.util.Dom.getDocumentWidth;//獲取文檔的高度和寬度
          YAHOO.util.Dom.getDocumentHeight;//
          YAHOO.util.Dom.getViewportHeight;//獲取頁面可視區域的高度和寬度(不含滾動條)
          YAHOO.util.Dom.getViewportWidth;
          //----Regin對象----
          YAHOO.util.Region.contains(region);//判斷是否包含了region區域
          YAHOO.util.Region.getArea;//計算面積
          YAHOO.util.Region.intersect(region);//計算相交區域
          YAHOO.util.Region.union(region);//計算兩個區域并集
          //----Point對象{x,y}----
          可以使用數組一次性操作多個元素,如:
          YAHOO.util.Dom.setStyle(['el1','el2'],'opacity',0.5);

          ============YAHOO.util.Resize尺寸變化工具===========

          Source from http://blog.sina.com.cn/s/blog_5d41b3800100gmap.html

          posted on 2010-06-29 16:55 lau 閱讀(1016) 評論(0)  編輯  收藏 所屬分類: Web

          主站蜘蛛池模板: 钦州市| 栾川县| 黄山市| 博湖县| 长宁区| 达州市| 沅陵县| 临桂县| 梁山县| 济南市| 洛浦县| 诸城市| 洪湖市| 新营市| 利川市| 凉城县| 左贡县| 湖口县| 宜良县| 丰县| 雅安市| 淄博市| 电白县| 昌江| 永春县| 韶山市| 安龙县| 且末县| 保德县| 盘锦市| 宁武县| 汾阳市| 珲春市| 乌兰察布市| 保德县| 陕西省| 鄢陵县| 灵石县| 扶绥县| 县级市| 长宁区|