外部ファイル化

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

jQuery script

  1.  
  2. 	$(function() {
  3. 		$('#hide-btn').click(function(){
  4. 			$('#view').fadeOut(1000);
  5. 		});
  6. 	});
  7.

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

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

jquery.hoge.js

  1.  
  2. 	;(function($) {
  3. 		$.fn.hoge = function() {
  4. 			$('#hide-btn').click(function(){
  5. 				$('#view').fadeOut(1000);
  6. 			});
  7. 		}
  8. 	})(jQuery);
  9.

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

html

  1. 	<script type="text/javascript" src="jquery1.5.1.js"></script>
  2. 	<script type="text/javascript" src="jquery.hoge.js"></script>
  3. 	<script type="text/javascript">
  4. 	$(function() {
  5. 		$('#hide-btn').hoge();
  6. 	});
  7. 	</script>
  8.

柔軟性のあるスクリプト

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

jquery.hoge.js

  1.  
  2. 	$.fn.hoge = function() {
  3. 		$(this).click(function(){
  4. 			$('#view').fadeOut(1000);
  5. 		});
  6. 	}
  7.

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

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

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

html

  1. 	$(function() {
  2. 		$('#hide-btn').hoge({
  3. 			fadeSpeed: 5000
  4. 		});
  5. 	});
  6.

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

jquery.hoge.js

  1. 	$.fn.hoge = function(options) {
  2. 		alert(options.fadeSpeed);
  3. 	};
  4.

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

jquery.hoge.js

  1. 	$.fn.hoge = function(options) {
  2. 		var opts = $.extend({}, $.fn.hoge.defaults, options);
  3. 		$(this).click(function(){
  4. 			$('#view').fadeOut(opts.fadeSpeed);
  5. 		});
  6. 	};
  7. 	$.fn.hoge.defaults = {
  8. 		fadeSpeed: 1000
  9. 	};
  10.

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

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

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

html

  1. 	$(function() {
  2. 		$('#hide-btn').hoge({
  3. 			fadeSpeed: 5000,
  4. 			hideEle: '#view2'
  5. 		});
  6. 	});
  7.

jquery.hoge.js

  1. 	$.fn.hoge = function(options) {
  2. 		var opts = $.extend({}, $.fn.hoge.defaults, options);
  3. 		$(this).click(function(){
  4. 			$(opts.hideEle).fadeOut(opts.fadeSpeed);
  5. 		});
  6. 	};
  7. 	$.fn.hoge.defaults = {
  8. 		fadeSpeed: 1000,
  9. 		hideEle: '#view'
  10. 	};
  11.

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