寫自己的jquery外掛程式非常容易,按照下面的原則來做,可以讓其他人也容易地結合使用你的外掛程式
為你的外掛程式取乙個名字,在這個例子裡面我們叫它"foobar".
建立乙個像這樣的檔案:jquery.[yourpluginname].js,比如我們建立乙個jquery.foobar.js
建立乙個或更多的外掛程式方法,使用繼承jquery物件的方式,如:
4. jquery.fn.foobar = function() ;
可選的:建立乙個用於幫助說明的函式,如:
7. jquery.foobar = ,
10. checkdependencies = function()
};你現在可以在你的外掛程式中使用這些幫助函式了:
jquery.fn.foobar = function() ;
可選的l:建立乙個預設的初始引數配置,這些配置也可以由使用者自行設定,如:
12.jquery.fn.foobar = function(options) ;
18. if(options)
};現在可以無需做任何配置地使用外掛程式了,預設的引數在此時生效:
$("...").foobar();
或者加入這些引數定義:
$("...").foobar();
如果你release你的外掛程式, 你還應該提供一些例子和文件,大部分的外掛程式都具備這些良好的參考文件.
現在你應該有了寫乙個外掛程式的基礎,讓我們試著用這些知識寫乙個自己的外掛程式.
很多人試著控制所有的radio或者checkbox是否被選中,比如:
$("input[type='checkbox']").each(function() );
注：在jquery1.2及以上版本中，選擇所有checkbox應該使用 input:checkbox , 因此以上**第一行可寫為:
$('input:checkbox').each(function() );
};這個外掛程式現在可以這樣用:
$('input:checkbox').check();
注：在jquery1.2及以上版本中，選擇所有checkbox應該使用 input:checkbox 原文為：$("input[type='checkbox']").check();
現在你應該還可以寫出uncheck()和togglecheck()了.但是先停一下,讓我們的外掛程式接收一些引數.
$.fn.check = function(mode)
});};
這裡我們設定了預設的引數,所以將"on"引數省略也是可以的,當然也可以加上"on","off", 或 "toggle",如:
$("input[type='checkbox']").check();
$("input[type='checkbox']").check('on');
$("input[type='checkbox']").check('off');
$("input[type='checkbox']").check('toggle');
如果有多於乙個的引數設定會稍稍有點複雜,在使用時如果只想設定第二個引數,則要在第乙個引數位置寫入null.
從上一章的tablesorter外掛程式用法我們可以看到,既可以省略所有引數來使用或者通過乙個 key/value 對來重新設定每個引數.
作為乙個練習,你可以試著將 第四章的功能重寫為乙個外掛程式.這個外掛程式的骨架應該是像這樣的:
$.fn.rateme = function(options) ;
if(options)
// ...
// rest of the code
// ...
return this; // if possible, return "this" to not break the chain
});
jquery外掛程式製作
旁白 最近做專案，經同事指點，對jquery大有改觀，亦有醍醐灌頂之感，今天特來研究下jquery外掛程式製作，在此分享一篇部落格。正題 jquery外掛程式豐富，很多也很好用的，這裡jquery外掛程式製作其實很簡單，介紹如下 1.jquery外掛程式的基本格式 function var opti...
jquery外掛程式製作
jquery外掛程式豐富，很多都是很好用的，最近學習了一下如何製作jquery外掛程式，發現jquery外掛程式製作其實很簡單，這裡介紹一下。jquery外掛程式的基本格式 function var options extend defaults,options this.each function...
個人製作jQuery滾動外掛程式
第一次寫部落格，寫的不好請見諒！試寫.演示位址1 演示位址2 這是我根據自己之前的工作經驗寫的兩個外掛程式，現在將它們分享出來，希望可以幫助其他人，也希望大家指正缺點，共同進步！功能分析 主要實現的切換方式有五種 左右切換，上下切換和隱藏顯示 引數 leftbtn 左邊切換按鈕 right btn ...