有夠詳細的參考資料 : 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();
});

 

mouseover 的時候就會有效果

Clipboard01.jpg  

 

 

再練習一下~~用 google chart API 顯示圓餅圖

哈~~好像只有多了參數傳接,而且好像有點多此一舉~


(function($){
   $.fn.haha = function(settings){
      var _settings = settings;
      var _handler = function(){
          var _data = _settings.data;
          var _label = _settings.label;
          $(this).html('<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:' + _data + '0&chs=250x100&chl=' + _label +'"/>')
      }
      return this.each(_handler)
   }  
})(jQuery);

 

使用

====================================

$(document).ready(function(){

   $("div").haha({
      'data':'50,150,200',
      'label':'我是50|我是150|我是200',
   })
});

 


Clipboard01.jpg  

    全站熱搜

    小雕 發表在 痞客邦 留言(0) 人氣()