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

jQueryプラグインの作り方

ファイル名

jquery.xxxx.js
※xxxx の部分はプラグイン名。

基本的な構成

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

トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2013-07-21 (日) 04:14:47 (2373d)