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

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

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

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

最新評論