製作自己的 jQuery Plugin

jQuery學習筆記 第一堂（軟體安裝、文字格式修改）

https://pjchender.blogspot.tw/2015/03/jquery.html

推薦 Adobe Brackets

寫jQuery Mobile好工具–WebMatrix 2

http://vmiv.blogspot.tw/2012/06/jquery-mobilewebmatrix-2.html

練習 jQuery的小工具–jQueryPad
http://kevintsengtw.blogspot.tw/2012/02/jqueryjquerypad.html


jQuery 練習題：三層式連動下拉選單（無後端整合）
http://kevintsengtw.blogspot.tw/2012/05/jquery_29.html

參考開發工具
http://jqmdesigner.appspot.com/designer.html#id=1467797822436

10个最棒的jQuery和HTML所见即所得编辑器插件
http://webres.wang/10-best-html-wysiwyg-plugins/

-----------------------------------------------
http://coyanlee.blogspot.tw/2012/04/jquery-plugin-produce.html

Plugin 命名

取一個自己高興的名字，不過當然最好是能夠看的出來 plugin 功能的名稱。建議格式為 jquery.[自訂的 plugin 名稱].js。
如，jquery.foobar.js。

自訂方法

擴充 jQuery 物件，建立一個或多個 plugin 方法 (method)，如：
Create one or more plugin methods by extending the jQuery object, eg.:

?

1 2 3

jQuery.fn.foobar = function() {    // do something  };

建立以上的方法後，我們將可以這樣存取這個方法：

?

1	$(...).foobar();

預設設定

建立一些可讓使用者自訂的預設設定：

?

1 2 3 4 5

jQuery.fn.foobar = function(options) {    var settings = jQuery.extend({      value: 5, name: "pete", bar: 655    }, options);  };

我們將可以不做任何設定 (使用預設值) 來呼叫這個方法：

?

1	$("...").foobar();

或者可以設定 value、name、bar 這三個選項中任意個的值：

?

1	$("...").foobar({ value: 123, bar: 9 });

文件

如果打算將自己做的 plugin 發佈出去給別人使用，最好可以提供一些使用例子和說明文件，這樣可以幫助別人理解 plugin 的功能與用法。

實例

舉一個 checkbox 的例子。

我們在做表單時，時常會使用到 checkbox 或 radio button，然後我們可能會希望在某個事件發生時，其可以被選取或者被不選取。

先將這個例子簡化，假設我們要做一個可以選取 checkbox 的 plugin：

?

1 2 3 4 5

jQuery.fn.check = function() {    return this.each(function() {      this.checked = true;    });  };

注意上例中的 this 指的是所選取的元素 (element)，此 plugin 可以這樣使用：

?

1	$(":checkbox").check();

這時候 this 所指的就是文件中所有 checkbox。

接著我們利用上面這個 plugin 來延伸出反選取和切換選取的功能(選取切換成未選取，以及反之)。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

jQuery.fn.check = function(mode) {    // 如果沒有傳入 mode 參數，則預設使用 on    var mode = mode || 'on';         return this.each(function() {      switch(mode) {        case 'on':          this.checked = true;          break;        case 'off':          this.checked = false;          break;        case 'toggle':          this.checked = !this.checked;          break;      }    });  };

用法如下：

?

1 2 3 4

$(":checkbox").check();  $(":checkbox").check('on');  $(":checkbox").check('off');  $(":checkbox").check('toggle');

當然上述都是很簡單的例子，因此可能看不出製作成 plugin 的好處，但是較為複雜卻常用的功能，只要多花一點點時間改寫為 plugin，就可以節省很多重複開發的時間了。