初めてのjQueryプラグインを作成してみました

最近、jQueryやBootstrapなどに触れています。把握しきれないくらいたくさんのライブラリやプラグインが作成されていて、圧倒されていたりします。それで、興味が湧いてきて、jQueryプラグインの作成方法について、少し調べて見ました。jQuery公式サイトに載っていて、かなり簡単に作成できるようですので、ひとつ作ってみました。

元にしたjQueryプラグインのひな形

jQuery公式サイトから次のようなひな形をコピペして作成しました。いくつかひな形のパターンがあるようですが、一番使う機会が多そうなパターンにしました。

• Plugins/Authoring - jQuery Wiki

(function( $ ){

  $.fn.tooltip = function( options ) {  

    // Create some defaults, extending them with any options that were provided
    var settings = $.extend( {
      'location'         : 'top',
      'background-color' : 'blue'
    }, options);

    return this.each(function() {        

      // Tooltip plugin code here

    });

  };
})( jQuery );

$('div').tooltip({
  'location' : 'left'
});

作成したjQueryプラグイン

実用性はありませんが、次のように背景に色を付けてくれるプラグインを作成しました。

実装方法

次のようなHTMLのDiv要素に対して、CSSで色を付けるようにしました。

<div>
    Hello, World!
</div>

自作したjQueryプラグインです。

(function( $ ){
  $.fn.tooltip = function( options ) {  

    // Create some defaults, extending them with any options that were provided
    var settings = $.extend( {
      'location'         : 'top',
      'background-color' : 'blue'
    }, options);

    return this.each(function() {        
      // Tooltip plugin code here
      $(this).css('location', settings['location']);
      $(this).css('background-color', settings['background-color']);
    });

  };
})( jQuery );

プラグインを呼び出している処理です。

  $('div').tooltip({
    'location' : 'left',
    'background-color' : 'lightgreen'
  });

非常に簡単に作成できるのですね！

動作確認環境

• OS : Mac OS X 10.7 Lion
• ブラウザ : Firefox 15.0.1
• ライブラリ : jQuery 1.8.0