以下為在寫JQuery的Plug-In時，常使用的其中一種寫法(只是舉例，寫法因人而異)：
(function($){
//這裡可設制function或變數
$.fn.extend({
//這裡可設制function或變數
myPlugInFun1 : function(options){
//這裡可設制function或變數，跟Java或C很不一樣的是，
//JavaScript的function也算一種Object，所以可以在function裡設
//function屬性
var defaultOptions1 = {
option1 : "option1" ,
option2 : "option2"
};
return this.each(function(){
$.extend(defaultOptions,options);
//..........Do something
});
} ,
myPlugInFun2 : function(options){
...以此類推
}
});
})(jQuery);
下面我們來寫一個簡單的jQuery Plug-In，叫做twinkle()，其作用是讓選取的jQuery物件可以依自訂(當然也可以預設)的次數及間隔時間閃爍，且也可以設定執行完後的callback function及擁有串接的特性，相關的說明註解都在程式碼中，直接看程式碼：
Twinkle jQuery Plun-In :
//自製jQuery Plug-In
//使用括弧來圍住function($){}來避免與外界變數衝突，
//例如不圍往的話外界可能會不小心用到了Plug-In裡的變數
//使用(function($){})(jQuery)來表示function中的$都用jQuery代表， 避免外界用了
//jQuery.noConflict()來設定了不同的jQuery符號來取代$符號
(function ($) {
$.fn.extend({
//閃爍範例
twinkle: function (options) {
//預設參數
var defaultOptions = {
times: 5, //閃爍次數(先亮再暗算一次)
period: 500, //閃爍間隔(亮與暗的間隔)
callback: function (target) {} //執行完閃爍後要執行的callback
};
$.extend(defaultOptions, options); //覆蓋自訂的參數到預設參數中
//使用return傳回jQuery物件，使其Plug-In使用時擁有串接特性
return this.each(function () { //這裡的this是jQuery物件，each()裡的是
//JavaScript的DOM物件
var target = $(this); //取得各別DOM物件的jQuery物件
var originalVisibilityStatus = $(this).css('visibility'); //取得原來的visibility css屬性
var currentTimes = 0; //現在的回數
startTwinkle();
function startTwinkle() {
if (currentTimes < defaultOptions.times) {
lighten();
//間隔一段時間後變暗，回數加一
setTimeout(function () {
darken();
currentTimes++;
//間隔一段時間後遞迴呼叫自己startTwinkle
setTimeout(function () {
startTwinkle();
}, defaultOptions.period);
}, defaultOptions.period);
} else {
//將target的visibility css屬性設回原來的值，執行callback function
target.css('visibility', originalVisibilityStatus);
defaultOptions.callback(target);
}
}
function lighten() {
target.css('visibility', 'visible');
}
function darken() {
target.css('visibility', 'hidden');
}
});
}
});
})(jQuery);
使用方法範例：
$('p').twinkle({
times: 10,
period: 100,
callback: function (target) {
target.html('Twinkle Done!');
}
}).css('color','blue');
影片演示：
線上程式實作演示：
http://jsfiddle.net/w4u7vn8n/1/
參考資料：
沒有留言 :
張貼留言