Jqueryプラグイン学習例1 プラグイン作成手順とtableUI最適化

Jqueryプラグイン学習例1 プラグイン作成手順とtableUI最適化_jquery

WBOY

リリース： 2016-05-16 18:30:44

オリジナル

1035 人が閲覧しました

1. jQuery 生成メソッドから始めましょう。jQuery には、拡張機能を開発するための 2 つのメソッドが用意されています。
jQuery.extend(object); jQuery クラス自体を拡張するには、新しいメソッドをクラスに追加します。
jQuery.fn.extend(object); jQuery オブジェクトにメソッドを追加します。
1.1、jQuery.fn.extend(object):
例については、jQuery リファレンスマニュアルを参照できます:

コードをコピーコードは次のとおりです。

 
$.fn.extend({ 
check: function() { 
return this.each(function() { this.checked = true; }); 
}, 
uncheck: function() { 
return this.each(function() { this.checked = false; }); ; 

 
使用: 

コードをコピーコードは次のとおりです:

$(" input[type=checkbox]").check();

$("input[type=radio]").uncheck(); 

1.2、jQueryjQuery .extend(object)

jQuery オブジェクト自体を拡張します。新しい関数を jQuery 名前空間に追加するために使用されます。
jQuery コード:

コードをコピーコードは次のとおりです:

$.extend ({

min: function(a, b) { return a < b ? a : b; }, 
max: function(a, b) { return a > b ? a : b; } 
} ; >$.min(2,3); // => 2 
$.max(4,5);具体的なプラグインの例 コードは次のとおりです: 

コードをコピー

コードは次のとおりです: /* * tableUI 0.2

* 著作権については書きません、笑

* 日付: 4/1/2010 
* tableUI を使用すると、ユーザー エクスペリエンスのためにテーブル プロンプトを簡単に表示できます。提供される最初の機能は、奇数行と偶数行の色の交互であり、マウスを上に移動すると強調表示されます 
* バージョン 0.2 では、25 のヒントに基づいて「政治委員」用にいくつかの最適化が行われています。学習目的でご利用ください。正してください。 
*/ 

(function($) {
$.fn.tableUI = function(options) {
//デフォルトパラメータ

var defaults = { evenRowClass: "evenRow" , oddRowClass: "oddRow", activeRowClass: "activeRow" } //渡されたパラメーターでデフォルト値をオーバーライドします options = $.extend(defaults, options);

//テーブルオブジェクト

var thisTable = $(this); 
//奇数行と偶数行の色を追加します
thisTable.find("tr:even").addClass(options.evenRowClass); 
thisTable.find("tr:odd").addClass(options.oddRowClass); 
//マウス移動イベントをバインドします。イベントを各行にバインドする必要はありません。 Mouseover", function(e) { 
//マウスが指すターゲット オブジェクトの親 tr を取得します 
$(e.target).parent().addClass(options.activeRowClass); 
/ /イベントのバブリングを防止します
return false; 
}).live("mouseout", function(e) { 
$(e.target).parent().removeClass(options.activeRowClass); 
 false を返します。
}); 
})(jQuery);