自己筆記 - JQuery Plugin 的寫法－小雕雕的家

有夠詳細的參考資料 : http://www.jaceju.net/blog/?p=336
好像很有趣就模仿來寫一個簡單的玩玩

Step 1 :

首先為了要能夠很快樂的在 plugin 裡面使用 $
所以建立一個空的匿名函數,然後傳入jQuery 物件並且呼叫它

(function($){

// 空低

})(jQuery); // <---呼叫並傳入 jQuery

Step 2: 然後利用 jQuery.fn 來註冊這個 plugin,名稱叫 haha

(function($){
   $.fn.haha = function(){

   }
})(jQuery);

Step 3:加入Plugin 的傳入參數,與預設值

(function($){
   $.fn.haha = function(settings){
   var defaultSettings = {
   //然後在裡面新增一個 callback 方法
  callback : function(){

}
   };
   }
})(jQuery);

Step 4:將傳入的settings 覆蓋預設的 defaultSettings

(function($){
   $.fn.haha = function(settings){
   var defaultSettings = {
callback : function(){

}
   };
   var _settings = $.extend(defaultSettings,settings)
   }
})(jQuery);

Step 5: return 回去,this 指的是外面的 jQuey 物件
  ex : $("#test").haha(); <---- $("#test")
  順便加入 bind 屬性為 mouseover

(function($){
   $.fn.haha = function(settings){
   var defaultSettings = {
   bind :'mouseover',
callback : function(){

}
   };
   var _settings = $.extend(defaultSettings,settings);
   return this.each(function() {
   $(this).bind(_settings.bind, _settings.callback);
   });
   }
})(jQuery);

Step 6:稍微改一下 callback 要做的事

(function($){
   $.fn.haha = function(settings){
   var defaultSettings = {
   bind : 'mouseover',
callback : function(){
$(this).animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 3000,function(){
   $("span").html('').append($(this).html() + '完成!').show().fadeOut(1000);
   });
}
   };
   var _settings = $.extend(defaultSettings,settings);
   return this.each(function() {
   $(this).bind(_settings.bind, _settings.callback);
   });
   }
})(jQuery);

這樣就寫完了簡單到不行的小plugin~~

然後是測試,可以到這邊來 http://www.darkthread.net/minijquerylab/

把以下的 code 貼上去 run 即可

CSS
====================================
div {
   width:50px;
   height:50px;
   background-color:#FFCC99;
   border:1px solid black;
   position:relative;
   float:left;
}

Body HTML
====================================
<div>1</div>
<div>2</div>
<div>3</div>
<span></span>

Script
====================================
(function($){
   $.fn.haha = function(settings){
   var defaultSettings = {
   bind : 'mouseover',
callback : function(){
$(this).animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 3000,function(){
   $("span").html('').append($(this).html() + '完成!').show().fadeOut(1000);
   });
}
   };
   var _settings = $.extend(defaultSettings,settings);
   return this.each(function() {
   $(this).bind(_settings.bind, _settings.callback);
   });
   }
})(jQuery);

$(document).ready(function(){
   $("div").haha();
});