jQuery自定义插件教程-CSDN博客

1、jQuery插件编写准备

要使用jQuery进行自定义插件的编写，首先应该的是了解jQuery的插件机制或者说是通过jQuery库本身提供的哪些函数进行插件的编写，主要涉及的两个函数是：jQuery.extend(object)和jQuery.fn.extend(object)，其具体作用可以通过查找jQuery的API文档得到，这里也把API简单转过来：

A、 jQuery.extend(object)

扩展jQuery对象本身，用来在jQuery命名空间上增加新函数。

例如：

     Js代码   
     
   
 jQuery.extend({  
   min: function(a, b) { return a < b ? a : b; },  
   max: function(a, b) { return a > b ? a : b; }  
 });   

使用方法：

    Js代码   
    
  
 jQuery.min(2,3);  //=> 2  
 $.max(4,5);         //=>5  

B、jQuery.fn.extend(object)

扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。具体实例将在下面进行一个简单的示例来进行了解。

2、简单的jQuery插件的编写

A、jQuery插件的基本格式

    Js代码   
    
  
 /* 
  * digitClocker 
  * @author: zhoucl 
  * @date  : 08/11/2011 
  */  
 (function($, undefined){      
       ...  
       //code here  
       ...  
 })(jQuery);  

B、将原来直接javascript编写的一个电子时钟改写为jQuery插件使用，代码如下：

    Java代码   
    
  
 /* 
  * digitClocker 
  * @author: zhoucl 
  * @date  : 03/11/2011 
  */  
 (function($, undefined){      
     $.extend($.fn, {  
         digitclocker: function(settings){  
             var params = $.extend({  
                 baseURL: '../js/jquery/custom_plugins/',  
                 imgPath: 'digits/'  
             }, settings);  
               
             for(var i = 1; i < 9; i++) {  
                 if(i % 3 == 0) $(this).append("<img alt='0' src='" + params.baseURL + params.imgPath + "colon.gif'>");  
                 else $(this).append("<img class='clockImage' alt='0' src='" + params.baseURL + params.imgPath + "0.gif'>");  
             }  
               
             new DigitClock(params, $(this));  
         }  
     });  
       
     setInterval(function(){  
         DigitClock.reDraw();  
     }, 1000);  
       
     DigitClock = function(params, container) {  
         this.params = params;  
         this.container = container;  
           
         DigitClock.clocks.push(this);  
         DigitClock.reDraw();  
     }  
       
     DigitClock.clocks=[];  
       
     DigitClock.reDraw = function() {  
         var d=new Date();  
         for (var i = 0; i < this.clocks.length; i++) {  
             this.clocks[i].setTime(d.getHours(),d.getMinutes(),d.getSeconds());  
         }  
     }  
       
     DigitClock.preZero = function(n, pos) {  
         return ("0"._digitClockRepeat(pos-1)+n).slice(-pos);  
     }  
       
     DigitClock.prototype = {  
         setTime : function(h, i ,s) {  
             this.setImage(  
                 DigitClock.preZero(h,2) + DigitClock.preZero(i,2) + DigitClock.preZero(s,2)  
             )  
         },  
           
         setImage: function(s) {  
             s = s.split("");  
             var baseURL = this.params.baseURL;  
             var imgPath = this.params.imgPath;  
             var i = 0;  
             $(".clockImage", this.container).each(function(){  
                 $(this).attr("src", baseURL + imgPath + s[i++] +".gif");  
             });  
         }  
     }  
       
     String.prototype._digitClockRepeat = function(n) {  
         return new Array(n+1).join(this);  
     }  
 })(jQuery);  

引用上述js文件，在页面中得调用代码如下：

    Html代码   
    
  
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
 <html>  
   <head>  
     <title>simple_test.html</title>  
     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
     <meta http-equiv="description" content="this is my page">  
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
     <!--调用jQuery的库：jquery-1.5.2.js-->  
     <script src="../js/jquery/jquery-1.5.2.js" type="text/javascript"></script>  
     <script src="../js/jquery/custom_plugins/jquery.clzps.digitclock.js" type="text/javascript"></script>  
     <script>  
       $(function(){  
           $('#digitClock').digitclocker({  
         baseURL: '../js/jquery/custom_plugins/',  
         imgPath: 'digits/'  
       });  
       });  
     </script>  
   </head>  
     
   <body>  
      <div id="digitClock"></div>  
   </body>  
 </html>  