WEBOPIXEL

自作のjQueryスクリプトをプラグイン化しよう

Posted: 2011.06.13 / Category: javascript / Tag: ,

自作したjQueryコードは作成した本人なら簡単にパラメーターの調整などを行いカスタマイズできると思いますが、Webに公開して他の人に使用してもらう場合はなかなかむずかしかったりしますよね。
そこでプラグイン化をすることで誰でも簡単に扱えるようにしてみましょう。

Sponsored Link

外部ファイル化

たとえば「#hide-btn」をクリックすると「#view」がフェードアウトして消えるという簡単なスクリプトがあります。

jQuery script

 
	$(function() {
		$('#hide-btn').click(function(){
			$('#view').fadeOut(1000);
		});
	});
	

まずは外部ファイル化しましょう。
jQueryプラグインは「jquery.プラグイン名.js」というファイル名にするのが基本なようです。
ここでは「jquery.hoge.js」としました。

上記のコードをそのまま外部ファイルにしただけだと、読み込むだけで実行されてしまうので、jQuery.fn拡張しメソッドで実行できるようにします。

jquery.hoge.js

 
	;(function($) {
		$.fn.hoge = function() {
			$('#hide-btn').click(function(){
				$('#view').fadeOut(1000);
			});
		}
	})(jQuery);
	

先頭に「;」があるのは他のプラグインと併用した場合に、最後に「;」を付けてないプラグインがまれにあるそうで、それが原因でのエラーを回避できます。
「$.fn.」の後に続くのがメソッド名です。これで「jquery.hoge.js」を読み込み「hoge」を呼び出せばこのスクリプトが実行されます。

html

	<script type="text/javascript" src="jquery1.5.1.js"></script>
	<script type="text/javascript" src="jquery.hoge.js"></script>
	<script type="text/javascript">
	$(function() {
		$('#hide-btn').hoge();
	});
	</script>
	

柔軟性のあるスクリプト

「$(‘#hide-btn’).hoge();」としていますが、実際は何を指定しても「#hide-btn」をクリックしないと実行されないのであまり柔軟性がよろしくないですね。
html側で動作するボタンを指定するにはスクリプトの「$(‘#hide-btn’)」を「$(this)」に変更します。

jquery.hoge.js

 
	$.fn.hoge = function() {
		$(this).click(function(){
			$('#view').fadeOut(1000);
		});
	}
	

こうすることで「$(‘#hide-btn2’).hoge();」と指定すれば、「#hide-btn2」から実行できるようになります。

オプションを変更できるようにする

サンプルのスクリプトは「fadeOut(1000)」とフェードアウトの速度を直接指定しています。
こういった設定はhtml側で変更できた方がいいですよね。
たとえばhtmlで「fadeSpeed」というオプションを設定します。

html

	$(function() {
		$('#hide-btn').hoge({
			fadeSpeed: 5000
		});
	});
	

この値を使用するには下記のようになります。

jquery.hoge.js

	$.fn.hoge = function(options) {
		alert(options.fadeSpeed);
	};
	

しかし受け取った値をそのまま使用すると、必ずオプションを設定しないといけないので、使用側としてはめんどくさいですね。
できればオプションを記述しないでも動作して、さらにオプションを指定することができるようにしたいものです。
そのために、デフォルトオプションというのを作成します。
で、そのデフォルトオプションと指定されたオプションを「extend」でマージするということを行います。

jquery.hoge.js

	$.fn.hoge = function(options) {
		var opts = $.extend({}, $.fn.hoge.defaults, options);
		$(this).click(function(){
			$('#view').fadeOut(opts.fadeSpeed);
		});
	};
	$.fn.hoge.defaults = {
		fadeSpeed: 1000
	};
	

こうすることで何も指定がなかった場合「$.fn.hoge.defaults」がデフォルトの値として使用されることになります。

複数のオプションを変更できるようにする

複数のオプションを設定するには「,」で区切るだけです。
「#view」を非表示していましたが、これも変更できるようにしてみましょう。

html

	$(function() {
		$('#hide-btn').hoge({
			fadeSpeed: 5000,
			hideEle: '#view2'
		});
	});
	

jquery.hoge.js

	$.fn.hoge = function(options) {
		var opts = $.extend({}, $.fn.hoge.defaults, options);
		$(this).click(function(){
			$(opts.hideEle).fadeOut(opts.fadeSpeed);
		});
	};
	$.fn.hoge.defaults = {
		fadeSpeed: 1000,
		hideEle: '#view'
	};
	

これくらい単純なスクリプトだとあまり意味ないですが、これを機に積極的にプラグイン化していきたいなとか。
ということで以上です。

COMMENTS

天 2012-04-08 17:59 

$(function() {
$(‘#hide-btn’).hoge();
});

の内容は外部化できないのでしょうか?

webOpixel 2012-04-10 10:32 

定義したファイルの後に読み込ませないとだめかもしれませんが、できますよ。

シマダ 2012-06-04 07:28 

> html側で動作するボタンを指定するにはスクリプトの「$(‘#hide-btn’)」を「$(this)」に変更します。

プラグインの関数内部ではthisがjQueryオブジェクトなので、「$(this)」ではなく「this」でOKです。

参照:http://docs.jquery.com/Plugins/Authoring#Context

webOpixel 2012-06-05 13:19 

ご指摘ありがとうございます。
参考ページも含め勉強になりました。

LEAVE A REPLY

コードを書く場合は<pre>で囲んでください。