jQueryプラグイン--表が行を隔てて変色する
2093 ワード
プラグインは2種類あります.
・クラスレベルコンポーネント開発:
---JQueryネーミングスペースに新しいグローバル関数を追加します.静的メソッドとも呼ばれます.形式は次のとおりです.
例:$.ajax(options); $.type();
・オブジェクトレベルコンポーネント開発
---JQueryプロトタイプの下に掛けられたメソッドであり、セレクタによって取得されたJQueryオブジェクトインスタンスがこのメソッドを共有することができ、動的メソッドと呼ばれる.形式は次のとおりです.
例:addClass(); .attr();
同時に、プラグインもJQueryチェーン呼び出しの特性を維持しなければならない.チェーン呼び出しの形式は以下の通りである.
$.fn.myPlugin = function (){
return this.each(function()/returnチェーン呼び出しを実現
//do something
});
};
---------------------------------------以上がプラグインメカニズムです---------------------------------------------
簡単な表の行を隔てて変色するプラグインを次に示します.
・クラスレベルコンポーネント開発:
---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);