jQueryプラグインを作ってみる
Bài đăng này đã không được cập nhật trong 9 năm
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});
是非試してください
All rights reserved