最近要寫個網頁項目，需要很多動態功能，本來想用自己非常熟悉的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