自定義jQuery插件

jQuery編寫插件的兩種方法

1.添加jQuery對象級的插件，是給jQuery類添加方法

寫法： 

1. (function($){  

2.     $.fn.extend({  

3.         "函數名":function(自定義參數){  

4.             //這裏寫插件代碼  

5.         }  

6.     });  

7. })(jQuery);  

8. 或者  

9. (function($){  

10.     $.fn.函數名=function(自定義參數){  

11.         //這裏寫插件代碼  

12.     }  

13. })(jQuery);  

調用方法：$("#id").函數名(參數);

2.jQuery類級別的插件，至關於添加靜態方法

1. (function($){  

2.     $.extend({  

3.         "函數名":function(自定義參數){  

4.             //這裏寫插件代碼  

5.         }  

6.     });  

7. })(jQuery);  

8. 或者  

9. (function($){  

10.     $.函數名=function(自定義參數){  

11.         //這裏寫插件代碼  

12.     }  

13. })(jQuery);  

調用方法：$.函數名(參數);

1，先想好作個什麼功能

這是第一步，也是很重要的一步，鑑於我們都是剛學習寫jQuery插件，因此，這個功能必定要簡單一些。不要想一口就吃個胖子，咱也吃不了。咱仍是撿個瘦的下手吧。可是，這個功能也不能太無聊，若是無聊到幾乎沒用處，就算作好了也是扔到馬桶裏，不會持續更新，也便不會持續進步了。

我最終選擇的是：美化表格，讓表格的奇偶行顏色不一樣，而後鼠標移到某行上，某行能夠高亮顯示。功能簡單又實用，不錯，不錯。呵呵～～

2，不急着寫，先想一想實現原理

還不急，先想一想實現原理。必要的時候，先寫出簡單的實現的原型。

個人這個美化表格的例子，實現原理卻是簡單，無非就是找到表格的奇偶行，而後添加不一樣的class，活動行高亮顯示也很簡單，只要判斷mouseover事件，而後添加一個class，mouseout的時候，再去掉這個class便可。

3，一個通用的框架

在動手寫本身的jQuery插件以前，天然是先研究一下別人寫的插件了。其實寫jQuery也基本有一個通用的框架。行，那咱也把這框架照搬過來吧。

(function($){

    $.fn.yourName = function(options){

        //各類屬性、參數

        }

        var options = $.extend(defaults, options);

        this.each(function(){

        //插件實現代碼

        });

    };

})(jQuery);

有了這個，咱就能夠往裏面套東西了。

4，名號、參數和屬性

好不容易開始闖蕩江湖了，必定要有一個響亮的名號才行，這樣走在江湖上，纔可以屌，夠威風。不信，你聽聽人家「中國牙防組」！因此，咱這裏必定要起個響亮的名號，必定要簡單、明瞭、夠權威。因此，決定了，就叫作「tableUI」了！

參數和屬性也很簡單，無非就是三個class的名稱。就叫作：evenRowClass、oddRowClass和activeRowClass吧。

因此，上面的框架，咱就把上半身給填上了。

(function($){

    $.fn.tableUI = function(options){

        var defaults = {

            evenRowClass:"evenRow",

            oddRowClass:"oddRow",

            activeRowClass:"activeRow"

        }

        var options = $.extend(defaults, options);

        this.each(function(){

            //實現代碼

        });

    };

})(jQuery);

這裏重點說一下這一句：

var options = $.extend(defaults, options);

看上去很屌的一句，其實就是合併多個對象爲一個。這裏就是，若是你在調用的時候寫了新的參數，就用你新的參數，若是沒有寫，就用默認的參數。想進一步瞭解的朋友，能夠參考jquery的官方文檔： http://api.jquery.com/jQuery.extend/

5，開始下半身吧

ok，上半身填補完了，咱就能夠填補下半身吧。無非就是找到基數行和偶數行（感謝jQuery提供了相似tr:even這種寫法，使其及其簡單），而後添加上相應的class。而後再給全部的tr，綁定mouseover和mouseout事件便可。下半身代碼以下：

(function($){

    $.fn.tableUI = function(options){

        var defaults = {

            evenRowClass:"evenRow",

            oddRowClass:"oddRow",

            activeRowClass:"activeRow"

        }

        var options = $.extend(defaults, options);

        this.each(function(){

            var thisTable=$(this);

            //添加奇偶行顏色

            $(thisTable).find("tr:even").addClass(options.evenRowClass);

            $(thisTable).find("tr:odd").addClass(options.oddRowClass);

            //添加活動行顏色

            $(thisTable).find("tr").bind("mouseover",function(){

                $(this).addClass(options.activeRowClass);

            });

            $(thisTable).find("tr").bind("mouseout",function(){

                $(this).removeClass(options.activeRowClass);

            });

        });

    };

})(jQuery);

6，最重要的一步！

也許有些朋友以爲這樣就算是完成了。可是切切相反，咱們還有最重要的一步沒有完成，那就是必定要在插件上方，寫上插件的名稱、版本號、完成日期、做者，做者的聯繫方式、出生日期、三圍……等等。由於只有這樣才能顯的這個插件夠專業。

/*

 * tableUI 0.1

 * Copyright (c) 2009 JustinYoung  http://justinyoung.cnblogs.com/

 * Date: 2010-03-30

 * 使用tableUI能夠方便地將表格提示使用體驗。先提供的功能有奇偶行顏色交替，鼠標移上高亮顯示

 */

(function($){

    $.fn.tableUI = function(options){

        var defaults = {

            evenRowClass:"evenRow",

            oddRowClass:"oddRow",

            activeRowClass:"activeRow"

        }

        var options = $.extend(defaults, options);

        this.each(function(){

            var thisTable=$(this);

            //添加奇偶行顏色

            $(thisTable).find("tr:even").addClass(options.evenRowClass);

            $(thisTable).find("tr:odd").addClass(options.oddRowClass);

            //添加活動行顏色

            $(thisTable).find("tr").bind("mouseover",function(){

                $(this).addClass(options.activeRowClass);

            });

            $(thisTable).find("tr").bind("mouseout",function(){

                $(this).removeClass(options.activeRowClass);

            });

        });

    };

})(jQuery);