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狀態的樣式
.ui-state-focus:元素為focus狀態的樣式
.ui-state-active:元素為active狀態（一般為滑鼠選中）的樣式
.ui-state-hightlight:需要高亮狀態的樣式
.ui-state-error:元素為錯誤狀態（一般描述錯誤資訊）的樣式
.ui-state-error-text:描述錯誤文字的樣式
.ui-state-disabled:元素被禁用的樣式
.ui-priority-primary:被應用於層級為第一級的button，如果button需要區分曾記的話。將應用加粗字型
.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，但是他提供了很好的機制來建立widget。在jQuery css framework中包含了基本的css樣式（視覺和感覺諸如顏色，字型大小，表徵圖等），而在ui的css中，則需要定義構建widget結構的css，比如margin，padding，position等。在開發widget的時候也要盡量遵循這一原則，這樣才能很好的利用jquery theme roller來應用樣式，從而在整體上保持一致，在前面的文章中簡單的 介紹了jquery css framework。下面就簡單的介紹下jquery ui 的開發指引。
Jquery的官方文檔中對此寫的很清晰。一般來說，jquery ui都是繼承自jquery.ui.widget.js這個檔案的。這個檔案提供了一個Factory 方法來建立widget對象。其方法是$.widget(String name, Options prototype).下面簡單介紹下這個類提供的方法和屬性。在建立widget的時候將重寫這些。
destroy()：將widget執行個體從dom對象上移除，在開發widget的時候一般此方法是必須的。就是移除你自己在dom element上添加的樣式和行為以及dom結構
options：在這裡面儲存的是widget的配置資訊，在建立widget的時候需要設定一些配置參數。
element：就是widget作用的dom對象。
enable()和disable():這兩個方法就是禁用和啟用widget的。其實是修改options.disabled。
還有兩個私人方法是建立widget的時候要重寫的。在widget中，所有的私人方法都將加以"_"首碼。
_create(): 這個方法就是建立widget的方法，在頁面調用widget的時候，就會執行此方法，來構建widget。Widget的絕大大多數行為和結構都是在這裡建立的。
_init(): 這個方法大多數時候不會被重寫，這個方法在構建widget的時候在_create後執行。
從相關的文檔上查詢到：
_create(): 方法在widget構建的時候執行，而_init()方法在構建和重新初始化的時候執行。而destroy方法則是在移除widget的時候被執行。
_setOption(): 此方法提供了options的屬性的設定，一般情況下如果options裡面的參數不需要特殊處理（校正，類型轉換，以及設定屬性的時候觸發某一操作等）的時候不需要對此方法進行重寫。
下面這段代碼說明了_create()方法和_init()方法的不同：
複製代碼 代碼如下:$(function(){
// _create() 和 _init() 在第一次調用的時候被執行
$("div").mywidget();
// widget已經執行個體化到div上了，此時只執行_init()方法
$("div").mywidget();
// 銷毀widget
$("div").mywidget("destroy");
// 因為widget已經被銷毀，此時_create()和_init()方法都將被執行
$("div").mywidget();
});
事件
如果有自訂的事件，可以採用widget為我們封裝好的方法_trigger()來處理，其調用方法為 this._trigger(type, event, data)，第一個參數為時間類型，第二個參數為事件event對象，第三個參數為事件要傳遞的參數。
接下來會用一個簡單的jquery ui widget代碼，來說明如何開發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也就是調用此widget的元素
var e = this.element;
//ui-widget widget基本的樣式，ui-state-default。預設狀態的樣式；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兩個檔案
在調用的時候採用$("***"). textboxdecorator();來調用此widget。
