最近要寫(xiě)個(gè)網(wǎng)頁(yè)項(xiàng)目，需要很多動(dòng)態(tài)功能，本來(lái)想用自己非常熟悉的AS3來(lái)做，后來(lái)無(wú)意中了解了YUI，發(fā)現(xiàn)其實(shí)現(xiàn)的功能非常強(qiáng)大，而且架構(gòu)和AS3很接近。于是花了兩個(gè)小時(shí)到其官方網(wǎng)站http://developer.yahoo.com/yui/上深入學(xué)習(xí)了一下，解決了項(xiàng)目中一些原來(lái)非常棘手的問(wèn)題。
這里是些學(xué)習(xí)筆記：
================連接類==================
1- YUI connect:
var callback =
{
success: function(res) {}, //正常返回處理函數(shù)
failure: function(res) {}, //出錯(cuò)返回處理函數(shù)
argument: [argument1, argument2, argument3]
//可以在success函數(shù)和failure函數(shù)中訪
問(wèn)的變量
}
var transaction = YAHOO.util.Connect.asyncRequest(’GET’, sUrl,
callback,
null);
2- 發(fā)送表單：
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);
================事件類==================
3- 事件偵聽(tīng)
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ù)
4- 刪除事件偵聽(tīng)
YAHOO.util.Event.removeListener:function(element,eventType,fn)
參數(shù)：
element：為綁定事件的元素id,
eventType：事件類型
fn：為事件響應(yīng)函數(shù)
返回值類型：Boolean
功能：給指定的element解除綁定事件
5- 偵聽(tīng)裝載完成
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)。
6- 偵聽(tīng)DOM第一次可用時(shí)執(zhí)行響應(yīng)函數(shù)
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ù)。
7- 返回偵聽(tīng)對(duì)象
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)器列表中的位置
}
來(lái)源：(http://blog.sina.com.cn/s/blog_5d41b3800100gmap.html) - YUI學(xué)習(xí)筆記_千峰_新浪博客
8- 獲取事件發(fā)生時(shí)的時(shí)間
YAHOO.util.Event.getTime( event)
參數(shù)：
event：事件對(duì)象
返回值類型：Date對(duì)象
9- 獲取事件發(fā)生時(shí)的頁(yè)面標(biāo)簽。對(duì)于IE即window.event.srcElement
YAHOO.util.Event.getTarget(ev , resolveTextNode)
參數(shù)：
evt：事件對(duì)象
resolveTextNode：
返回值類型： HTML element
10- 創(chuàng)建和使用自定義的事件
A.使用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表示事件類型的字符串
B.注冊(cè)對(duì)自定義事件的響應(yīng)函數(shù)
function Consumer(name, testObj) {
this.name = name;
this.testObj = testObj;
this.testObj.event1.subscribe(this.onEvent1, this);
}
C.響應(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);
}
11- 當(dāng)。。。時(shí)處理
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">確認(rèn)</button>
12- 獲取當(dāng)前鼠標(biāo)位置
var move=function(e){
YAHOO.util.Dom.setXY('foo',
YAHOO.util.Event.getXY(e));
};
============YAHOO.lang工具===========
包含了語(yǔ)言工具
============YAHOO.widget組件工具===========
包含了很多小的工具，如月歷，菜單，表格，對(duì)話框，進(jìn)度條，文本編輯框，樹(shù)型表，
Uploader等等。（類似于flash的組件）
1- YAHOO.widget.Button
2- YAHOO.widget.ButtonGroup
3- YAHOO.widget.AutoComplete//自動(dòng)填寫(xiě)表單，將數(shù)據(jù)或遠(yuǎn)程數(shù)據(jù)寫(xiě)入數(shù)組
4- YAHOO.widget.Calendar//日歷
5- YAHOO.widget.Carousel//圖片預(yù)覽顯示
6- YAHOO.widget.ColorPicker
7- YAHOO.widget.Container//包含Module, Overlay, Panel, Tooltip,
Dialog,
SimpleDialog)
8- YAHOO.widget.DataTable//類似EXCEL的數(shù)據(jù)表格
9- YAHOO.widget.ImageCropper//圖像裁剪器
10- YAHOO.widget.LayoutManager
11- YAHOO.widget.Menu
12- YAHOO.widget.Paginator//分頁(yè)顯示器
13- YAHOO.widget.ProgressBar
14- YAHOO.widget.Editor/SimpleEditor//可以做成網(wǎng)頁(yè)編輯器，功能很多
15- YAHOO.widget.Slider
16- YAHOO.widget.Tab//標(biāo)簽頁(yè)
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');//新建一個(gè)id為foo的元件
el.setStyle("color", "#f00");//設(shè)置style
el.on('click',
function(e){alert(e.target.getStyle('color'));});//設(shè)置事件偵聽(tīng)
el.get('id');//獲取id屬性
el.get('childNodes');//獲取子節(jié)點(diǎn)數(shù)目
el.get('firstChild');//獲取第一個(gè)節(jié)點(diǎn)
el.hasChildNodes();//檢測(cè)是否有子節(jié)點(diǎn)
el.removeChild(el.get('firstChild'));//刪除第一個(gè)子節(jié)點(diǎn)
el.appendChild(child);//增加節(jié)點(diǎn)
el.getElementsByTageName(tag);//獲取tagName為tag的所有元素
el.insertBefore(element,before);//在元素before前插入element
el.replaceChild(newNode,oldNode);//替換節(jié)點(diǎn)
============YAHOO.util.Dom工具===========
//----元素訪問(wèn)----
YAHOO.util.Dom.get(element);//==document.getElementById(element);
YAHOO.util.Dom.getElementsBy(method,tagName,[rootNode]);//在指定子節(jié)點(diǎn)下，通過(guò)指
定的方式method找元素
YAHOO.util.Dom.getElementsByClassName(className, tagName,
[rootNode]);//根據(jù)
class和id找元素
YAHOO.util.Dom.inDocument(el);//判斷元素是否在當(dāng)前DOM中
//----class樣式訪問(wèn)和控制-----
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);//設(shè)定屬性值
//----元素位置訪問(wèn)和控制----
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對(duì)象
YAHOO.util.Dom.getRegin;//獲取Region對(duì)象{left,top,right,bottom}
YAHOO.util.Dom.getClientWidth;//獲取頁(yè)面可視面積的高度和寬度
YAHOO.util.Dom.getClientHeight;//
YAHOO.util.Dom.getDocumentWidth;//獲取文檔的高度和寬度
YAHOO.util.Dom.getDocumentHeight;//
YAHOO.util.Dom.getViewportHeight;//獲取頁(yè)面可視區(qū)域的高度和寬度（不含滾動(dòng)條）
YAHOO.util.Dom.getViewportWidth;
//----Regin對(duì)象----
YAHOO.util.Region.contains(region);//判斷是否包含了region區(qū)域
YAHOO.util.Region.getArea;//計(jì)算面積
YAHOO.util.Region.intersect(region);//計(jì)算相交區(qū)域
YAHOO.util.Region.union(region);//計(jì)算兩個(gè)區(qū)域并集
//----Point對(duì)象{x,y}----
可以使用數(shù)組一次性操作多個(gè)元素，如：
YAHOO.util.Dom.setStyle(['el1','el2'],'opacity',0.5);
============YAHOO.util.Resize尺寸變化工具===========
Source from http://blog.sina.com.cn/s/blog_5d41b3800100gmap.html