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

jQueryメモ > jQueryプラグインの作り方

jQueryプラグインの作り方 †

ファイル名 †

基本的な構成 †

;(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);

使用方法 †

<script type="text/javascript">
$(function(){
    $("p").hoge({option1:"abcdefg"});
});
</script>