jQueryプラグインの作り方の変更点 - 闘うITエンジニアの覚え書き

追加された行はこの色です。
削除された行はこの色です。
jQueryプラグインの作り方へ行く。

[[jQueryメモ]] > jQueryプラグインの作り方
* jQueryプラグインの作り方 [#zb88821c]
#setlinebreak(on)

** ファイル名 [#q4430426]
#html(<div style="margin-left:10px;">)
jquery.xxxx.js
※xxxx の部分はプラグイン名。
#html(</div>)

** 基本的な構成 [#q4430426]
#mycode{{
;(function($){

	$.fn.hoge = function(options){

		// デフォルトオプションと指定されたオプションをマージ
		var opts = $.extend({}, $.fn.hoge.defaults, options);

		// 対象の要素全てに処理を適用
		var elements = this;
		elements.each(function(){
			// ここに各要素に適用する処理を記述
		});

		// メソッドチェイン用に自身への参照を返却
		return this;
	};

	/* 公開静的メソッド用の領域確保 */
	$.hoge = {};

	/* 公開静的メソッド1 */
	$.hoge.method1 = function(){
		・
		・
	};

	/* 公開静的メソッド2 */
	$.hoge.method2 = function(){
		・
		・
	};

	/* デフォルトオプション */
	$.fn.hoge.defaults = {
		 option1      : "test1"
		,option2      : "test2"
		,option3      : "test3"
	};

})(jQuery);
}}

** 使用方法 [#zaa731d4]
#mycode{{
&lt;script type="text/javascript"&gt;
$(function(){
    $("p").hoge({option1:"abcdefg"});
});
&lt;/script&gt;
}}

jQueryプラグインの作り方 の変更点 - 闘うITエンジニアの覚え書き

jQueryプラグインの作り方の変更点 - 闘うITエンジニアの覚え書き