B.K. 先前介紹了如何使用jQuery進行一個包含Methods及Options的Plugin。
今天，一樣要做一個Plugin，當然也是源自於jQuery體系。想要帶大家實作的是透過jQuery UI Widget Factory來達到一個Plugin。

應該會有人想到一樣都是Plugin，沒事弄出這麼多變化做啥？其實透過jQuery的$.fn與jQuery UI Widget Factory的$.widget所做出來的Plugin有一些本質上的差異。
    1.stateless與stateful：$.fn所做出來的Plugin屬於stateless，而$.widget的Plugin是stateful。要運用stateless或stateful，當然爾是依照自己需求（程式始終來自於需求）。其實要去應用stateful也是使用$.widget來開發plugin的主因之一。
    2. $.fn所做出來的Plugin的一些method大多都需自己去實作，但透過$.widget去實作的Plugin本身就extend了許多原有的methods可以使用如_init()、_create()、_destrory()…等等。使用底線開頭的為private的方法，其同時也是來自於$.widget的基礎方法。所以，使用上會比較有彈性。
    3. $.fn的Plugin依賴開發時jQuery的版本，而$.widget的Plugin則必要依賴於開發時jQuery UI的版本。意即未來Plugin可以在相對jQuery或jQuery UI在改版時，要有適當的調整。

那，就可以開始實作第一個透過$.widget的Plugin囉。
當然，還是要先想一想實作情節。
這邊目的去做一個由DIV模擬出的Progress Bar。
所以，需要有可設定值的選項以及可以取值的方法；而當然初始的方法也必然要有。
透過$.widget所實作的Plugin會符合以下的模式
$.widget("my.progressbar", {
......
});
其中的my.progressbar，分別是Plugin的NameSpace及Plugin的名稱。
第一個$.widget所實作的Plugin如下： options用以記錄進度的比例，預設為100。
getValue這個方法是要實作取得Plugin的真實values究竟是多少。
而_create是Plugin去實體化時的預設執行段落。

這個例子用了三個DIV
Div1直接引用plugin，其效果是100%的進度。
Div2引用plugin，並設定了50，故其效果是50%的進度。
Div2引用plugin，並設定了70，故其效果是70%的進度。
透過下面的使用方法。
$(function() {
    $('#div1').progressbar();
    $('#div2').progressbar({value: 50});
    $('#div3').progressbar({value: 70});
    console.log($('#div1').progressbar('getValue'));
    console.log($('#div2').progressbar('getValue'));
});
至於console.log($('#div1').progressbar('getValue')) 及console.log($('#div2').progressbar('getValue'))就展現了stateful的效果。可以直接使用getValue取得已實作progressbar的div1及div2的實際設定的value值。

都明白B.K.所寫的內容後，恭喜您，您已經踏出實作$.widget的Plugin的第一步囉。
一樣感謝您的觀看。

參考：Widget Factory API