jQueryプラグインの作り方

jQueryって便利ですね。

jQueryというものを知って以来、もうこれ無しでは何も作りたくないと思うほど手放せないものになってしまっています。

この記事では、jQueryプラグンの作り方を解説していきたいと思います。 意外と難しくはありませんのでマイプラグインを作成してみてはいかがでしょうか？

jQueryプラグインの雛形

jQueryプラグインを作る場合の雛形は次のようにできます。

(function($){
  $.fn.sample = function(options){
    /*
     *
     * プラグインの内容を記述
     *
     */
  };
})(jQuery);

そして、このプラグインの使い方は

$('#target').sample();

こんな感じで他のjQueryプラグイン同様に使うことができます。

jQueryプラグインを作るときのテクニック

jQueryプラグインを作るときに使われるテクニックを紹介

デフォルトオプション

jQueryプラグインにはオプションで動作を指定できるものも多いと思います。

$('#target').sample({color: red});

これを実装するには$.extendを使うのが便利だと思います。

var settings = $.extend({color: blue, size: 20}, options);

この場合、最終的には

var settings = {color: red, size: 20};

という風に解釈されます。

jQueryプラグインのサンプル

最後に、jQueryカスタムプラグインのサンプルとして、画像のスライドショーのサンプル紹介したいと思います。

指定されたオブジェクトの子オブジェクトを順に切り替えて表示するだけの単純なサンプルです。

HTMLの実装

<script type="text/javascript">
  $(document).ready(function(){
    $('#my-sample').sample({duration: 2000});
  });
</script>
<div id="my-sample">
  <a href="01.jpg"><img src="01.jpg" width="400" height="300"></a>
  <a href="02.jpg"><img src="02.jpg" width="400" height="300"></a>
  <a href="03.jpg"><img src="03.jpg" width="400" height="300"></a>
  <a href="04.jpg"><img src="04.jpg" width="400" height="300"></a>
  <a href="05.jpg"><img src="05.jpg" width="400" height="300"></a>
  <a href="06.jpg"><img src="06.jpg" width="400" height="300"></a>
  <a href="07.jpg"><img src="07.jpg" width="400" height="300"></a>
</div>

JavaScriptの実装

(function($){
  $.fn.sample = function(options){
    var settings = $.extend({ duration: 1000 }, options);

    var a = $(this).children().map(function(i, e){ return $(e); })

    $(this).html(a.get(0));
    var o = { this: $(this), i: 0 };

    setInterval(function(){
      if(++o.i == a.length) o.i = 0;
      o.this.html(a.get(o.i));
    }, settings['duration']);
  };
})(jQuery);

jquery-sample.js

デモページはこちらからどうぞ。
jQueryプラグインのサンプル