jQueryプラグインを作ってみる

jQueryのプラグインの作成手順を共有します。

なぜjQueryのプラグイン

• コードを明るく書ける
• 1回だけ書いて、どこでも使える（DRY）

新規のプラグインの定義

(function(){
// 内容
})(jQuery);

functionの定義

$.fn.<function名> = function(userOptions){
...
};

defaultオプションの定義

$.fn.<function名> = function(userOptions){
var options = {
// defaultオプション
}
$.extend(options, userOptions); // オプションがuserOptionsで更新される
...
};

functionのマイン内容

return $(this).each(function(){ // 注：eachを必ず付けてください
...
});

例

(function(){
  $.fn.button_hover = function(userOptions){
    var options = {
      opacity: 0.8
    }
    $.extend(options, userOptions);
    return $(this).each(function(){
      var container = $(this);
      container.hover(function(){
        container.fadeTo("fast", options.opacity);
      }, function(){
        container.fadeTo("fast", 1);
      });
    });
  };
})(jQuery)

呼び出すの例

$("#div1").button_hover();
$("#div2").button_hover({opacity: 0.5});

是非試してください