jQueryプラグイン--表が行を隔てて変色する

2093 ワード

プラグインは2種類あります.
・クラスレベルコンポーネント開発:
---JQueryネーミングスペースに新しいグローバル関数を追加します.静的メソッドとも呼ばれます.形式は次のとおりです.
jQuery.myPlugin = function (){           //do something};

例:$.ajax(options); $.type();
 
・オブジェクトレベルコンポーネント開発
---JQueryプロトタイプの下に掛けられたメソッドであり、セレクタによって取得されたJQueryオブジェクトインスタンスがこのメソッドを共有することができ、動的メソッドと呼ばれる.形式は次のとおりです.
//$.fn == $.prototype$.fn.myPlugin = function () {          //do somthing};

例:addClass(); .attr();
 
同時に、プラグインもJQueryチェーン呼び出しの特性を維持しなければならない.チェーン呼び出しの形式は以下の通りである.
$.fn.myPlugin = function (){
         return this.each(function()/returnチェーン呼び出しを実現
                         //do something 
         });
};
---------------------------------------以上がプラグインメカニズムです---------------------------------------------
簡単な表の行を隔てて変色するプラグインを次に示します.
 //        ,      (function($){
    $.fn.tableUI = function(options){        var defaults = {
            evenRowClass:"evenRow",
            oddRowClass:"oddRow",
            activeRowClass:"activeRow",
            clickRowClass:"clickRow"
        }        var options = $.extend(defaults, options);//$.extend(option...)      .
        //        , return    
        return this.each(function(){            //  this
            var thisTable = $(this);
            $(thisTable).find("tr:even").addClass(options.evenRowClass);
            $(thisTable).find("tr:odd").addClass(options.oddRowClass);
            $(thisTable).find("tr").bind("mouseover",function(){
                $(this).removeClass(options.clickRowClass).addClass(options.activeRowClass);
            });
            $(thisTable).find("tr").bind("mouseout",function(){
                $(this).removeClass(options.clickRowClass).removeClass(options.activeRowClass);
            });
            $(thisTable).find("tr").bind("click",function(){
                $(this).addClass(options.clickRowClass);
            });
        });
    };
})(jQuery);