jquery.widget開發(1)

http://blog.sina.com.cn/s/blog_4a60ba9c01014dea.html

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這個檔案的。這個檔案提供了一個工廠方法來建立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的時候要重寫的。

_create() 這個方法就是建立widget的方法，在頁面調用widget的時候，就會執行此方法，來建構widget。Widget的絕大大多數行為和結構都是在這裡建立的。

_init() 這個方法大多數時候不會被重寫，這個方法在建構widget的時候在_create後執行。從相關的文檔上查詢到：

_create()方法在widget建構的時候執行，而_init()方法在建構和重新初始化的時候執行。而destroy方法則是在移除widget的時候被執行。在widget中，所有的私有方法都将加以"_"字首

_setOption():此方法提供了options的屬性的設定，一般情況下如果options裡面的參數不需要特殊處理（校驗，類型轉換，以及設定屬性的時候觸發某一操作等）的時候不需要對此方法進行重寫

事件

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

例如：

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

jQuery編寫widget的一些竅門

在編寫widget的時候，一般我們需要綁定一些事件，最好将這些widget的綁定事件加上目前widget的命名空間。如果同一個jQuery對象，使用了兩個widget，而兩個widget都綁定了相同的事件名稱，可能會出現問題。在銷毀widget的時候，去除綁定事件也很友善，隻需要unbind（”.namespace“）就可以了。

在寫jQuery的時候，因為jQuery對象是支援連寫的。譬如：$(obj).css("height","20px").attr("title","abc")....