基于jQuery UI CSS Framework開發(fā)Widget的經(jīng)驗

更新時間：2010年08月21日 12:23:47 作者：

jQuery UI CSS Framework是jQuery UI中的一個樣式框架，可以利用jQuery Theme roller 來生成自己想要的css樣式效果。我們可以利用jQuery UI的一些框架來開發(fā)出基于jQuery UI CSS Framework效果的插件來。

jQuery UI中兩大核心的css文件是ui.core.css和ui.theme.css.這兩個css樣式貫穿整個基于jQuery ui的界面上，并且可以通過jQuery ui ThemeRoller來生成自己的樣式。
.ui-helper-hidden :為元素應用display:none
.ui-helper-hidden-accessible：將元素的絕對位置設置為不可見
.ui-helper-clearfix:適用于浮動包裹父元素的屬性
. ui-helper-zfix:適用于修復iframe元素覆蓋的問題
.ui-state-default:元素的默認樣式
.ui-state-hover:元素為hover狀態(tài)的樣式
.ui-state-focus:元素為focus狀態(tài)的樣式
.ui-state-active:元素為active狀態(tài)（一般為鼠標選中）的樣式
.ui-state-hightlight:需要高亮狀態(tài)的樣式
.ui-state-error:元素為錯誤狀態(tài)（一般描述錯誤信息）的樣式
.ui-state-error-text:描述錯誤文字的樣式
.ui-state-disabled:元素被禁用的樣式
.ui-priority-primary:被應用于級別為第一級的button，如果button需要區(qū)分曾記的話。將應用加粗字體
.ui-priority-secondary:被應用于級別為第二級的button，和上一場景相對應，將應用一般粗細的字體，并且相對于元素輕度透明
Icon types:css framework提供了一套默認的圖標，這些圖標適用于大多場景，一般使用的方式是“ui-icon ui-icon-****”來指定icon
.ui-corner-tl:左上角圓角，基于css3，ie不支持
.ui-corner-tr:右上角圓角，基于css3，ie不支持
.ui-corner-bl:左下角圓角，基于css3，ie不支持
.ui-corner-br:右下角圓角，基于css3，ie不支持
.ui-corner-top:上面兩個角圓角，基于css3，ie不支持
.ui-corner-bottom:底部兩個角圓角，基于css3，ie不支持
.ui-corner-right:右部兩個角圓角，基于css3，ie不支持
.ui-corner-left:左部兩個角圓角，基于css3，ie不支持
.ui-corner-all:全部角圓角，基于css3，ie不支持
.ui-widget-overlay:遮罩
.ui-widget-shadow:陰影
在寫jQuery ui widget的時候合適的利用這些css就可以做出和jQuery ui theme兼容的自定義ui來。
jQuery ui 提供了一些基本的widget，但是他提供了很好的機制來創(chuàng)建widget。在jQuery css framework中包含了基本的css樣式（視覺和感覺諸如顏色，字體大小，圖標等），而在ui的css中，則需要定義構建widget結(jié)構的css，比如margin，padding，position等。在開發(fā)widget的時候也要盡量遵循這一原則，這樣才能很好的利用jquery theme roller來應用樣式，從而在整體上保持一致，在前面的文章中簡單的介紹了jquery css framework。下面就簡單的介紹下jquery ui 的開發(fā)指引。
Jquery的官方文檔中對此寫的很清晰。一般來說，jquery ui都是繼承自jquery.ui.widget.js這個文件的。這個文件提供了一個工廠方法來創(chuàng)建widget對象。其方法是$.widget(String name, Options prototype).下面簡單介紹下這個類提供的方法和屬性。在創(chuàng)建widget的時候?qū)⒅貙戇@些。
destroy()：將widget實例從dom對象上移除，在開發(fā)widget的時候一般此方法是必須的。就是移除你自己在dom element上添加的樣式和行為以及dom結(jié)構
options：在這里面保存的是widget的配置信息，在創(chuàng)建widget的時候需要設置一些配置參數(shù)。
element：就是widget作用的dom對象。
enable()和disable():這兩個方法就是禁用和啟用widget的。其實是修改options.disabled。
還有兩個私有方法是創(chuàng)建widget的時候要重寫的。在widget中，所有的私有方法都將加以"_"前綴。
_create(): 這個方法就是創(chuàng)建widget的方法，在頁面調(diào)用widget的時候，就會執(zhí)行此方法，來構建widget。Widget的絕大大多數(shù)行為和結(jié)構都是在這里創(chuàng)建的。
_init(): 這個方法大多數(shù)時候不會被重寫，這個方法在構建widget的時候在_create后執(zhí)行。
從相關的文檔上查詢到：
_create(): 方法在widget構建的時候執(zhí)行，而_init()方法在構建和重新初始化的時候執(zhí)行。而destroy方法則是在移除widget的時候被執(zhí)行。
_setOption(): 此方法提供了options的屬性的設置，一般情況下如果options里面的參數(shù)不需要特殊處理（校驗，類型轉(zhuǎn)換，以及設置屬性的時候觸發(fā)某一操作等）的時候不需要對此方法進行重寫。
下面這段代碼說明了_create()方法和_init()方法的不同：

復制代碼代碼如下:

 
$(function(){ 
// _create() 和 _init() 在第一次調(diào)用的時候被執(zhí)行 
$("div").mywidget(); 
// widget已經(jīng)實例化到div上了，此時只執(zhí)行_init()方法 
$("div").mywidget(); 
// 銷毀widget 
$("div").mywidget("destroy"); 
// 因為widget已經(jīng)被銷毀，此時_create()和_init()方法都將被執(zhí)行 
$("div").mywidget(); 
}); 

事件
如果有自定義的事件，可以采用widget為我們封裝好的方法_trigger()來處理，其調(diào)用方法為 this._trigger(type, event, data)，第一個參數(shù)為時間類型，第二個參數(shù)為事件event對象，第三個參數(shù)為事件要傳遞的參數(shù)。

接下來會用一個簡單的jquery ui widget代碼，來說明如何開發(fā)widget。

復制代碼代碼如下:

 
//此widget是將textbox進行修飾一下的。自身沒有css，采用的是jquery ui css framework的樣式 
(function($){ 
//ui默認采用jquery的ui前綴，后面的是widget名稱 
$.widget("ui.textboxdecorator", { 
//此widget中沒有options 
options:{ 
}, 
_init: function(){ 
//驗證是否是需要裝飾的元素 
if (!(this.element.attr("tagName").toLowerCase() === "input" || this.element.attr("tagName").toLowerCase() === "textarea")) { 
return; 
} 
if (!(this.element.attr("type").toLowerCase() === "text" || this.element.attr("type").toLowerCase() === "password")) { 
if (this.element.attr("tagName").toLowerCase() === "input") 
return; 
} 
//this.element也就是調(diào)用此widget的元素 
var e = this.element; 
//ui-widget widget基本的樣式，ui-state-default。默認狀態(tài)的樣式；ui- corner-all 圓角（基于css3，ie下不起作用） 
this.element.addClass("ui-widget ui-state-default ui-corner-all"); 
//添加hover效果和active效果 
this.element.mouseover(function(){ 
e.addClass("ui-state-hover"); 
}).mouseout(function(){ 
e.removeClass("ui-state-hover"); 
}).mousedown(function(){ 
e.addClass("ui-state-active"); 
}).mouseup(function(){ 
e.removeClass("ui-state-active"); 
}); 
}, 
//銷毀時，移除widget增加的樣式 
destroy:function(){ 
this.element.removeClass("ui-widget ui-state-default ui-corner-all ui-state-hover ui-state-active"); 
} 
}) 
})(jQuery) 

在使用該widget的時候，需要引用jquery，jquery.ui.core.js,jquery.ui.widget.js文件，css文件需要jquery.ui.core.css和jquery.ui.theme.css兩個文件
在調(diào)用的時候采用$("***"). textboxdecorator();來調(diào)用此widget。