Edited at

jQueryプラグインを作成してみる

More than 3 years have passed since last update.

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


なぜjQueryのプラグイン


  • コードを明るく書ける

  • 1回だけ書いて、どこでも使える(DRY)


新規のプラグインの定義


myPlugin.jp

(function(){

// 内容
})(jQuery);


functionの定義


myPlugin.jp

$.fn.<function> = function(userOptions){

...
};


defaultオプションの定義


myPlugin.jp

$.fn.<function> = function(userOptions){

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



functionのマイン内容


myPlugin.jp

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

...
});


 例:


myPlugin.jp

$.fn.fade_anime = function(userOptions){

var options = {
interval: 500,
opacity: 0.5
}
$.extend(options, userOptions);
return $(this).each(function(){
var container = $(this);
var fadeIn = true;
var timerId = setInterval(function(){
if (fadeIn){
container.fadeTo("fast", options.opacity);
fadeIn = false;
} else {
container.fadeTo("fast", 1);
fadeIn = true;
}
}, options.interval);
});
}(jQuery);


呼び出すの例


main.js

$("#div1").fade_anime();

$("#div2").fade_anime({interval: 1000, opacity: 0.3});


是非試してください