jQuery插件制作方法詳解jQuery插件制作方法詳解

jquery插件給我的感覺清一色的清潔，簡單。如Jtip，要使用它的功能，隻需要在你的元素的class上加 上Jtip,并引入jtip.js及其樣式即可以了。其他事情插件全包。我喜歡jquery的一個重要原因是發現她已經有了很多很好，很精彩的插件。寫一 個自己的jQuery插件是非常容易的,如果你按照下面的原則來做,可以讓其他人也容易地結合使用你的插件.

為你的插件取一個名字,在這個例子裡面我們叫它"foobar". 

建立一個像這樣的檔案:jquery.[yourpluginname].js,比如我們建立一個jquery.foobar.js 

建立一個或更多的插件方法,使用繼承jQuery對象的方式,如:

可選的:建立一個用于幫助說明的函數,如:

你現在可以在你的插件中使用這些幫助函數了:

可選的l:建立一個預設的初始參數配置,這些配置也可以由使用者自行設定,如:

現在可以無需做任何配置地使用插件了,預設的參數在此時生效:

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

或者加入這些參數定義:

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

如果你release你的插件, 你還應該提供一些例子和文檔,大部分的插件都具備這些良好的參考文檔.現在你應該有了寫一個插件的基礎,讓我們試着用這些知識寫一個自己的插件.很多人試着控制所有的radio或者checkbox是否被選中,比如:

無論何時候，當你的代碼出現each時，你應該重寫上面的代碼來構造一個插件,很直接地:

這個插件現在可以這樣用:

現在你應該還可以寫出uncheck()和toggleCheck()了.但是先停一下,讓我們的插件接收一些參數.

這裡我們設定了預設的參數,是以将"on"參數省略也是可以的,當然也可以加上"on","off", 或 "toggle",如:

如果有多于一個的 參數設定會稍稍有點複雜,在使用時如果隻想設定第二個參數,則要在第一個參數位置寫入null.從上一章的tablesorter插件用法我們可以看到, 既可以省略所有參數來使用或者通過一個 key/value 對來重新設定每個參數.作為一個練習,你可以試着将 第四章 的功能重寫為一個插件.這個插 件的骨架應該是像這樣的: