jQueryのプラグインを使うと短時間で思いのものが実装出来たりして便利ですよね。
ですが、凝ったものを作ろうとしたりすると既存のプラグインでは手が届かない所が出てくることも事実です。
既存のプラグインをうまく改良できる人は改良してしまえば良いのですが（もちろんライセンスの問題はないものとして）、下手にいじってしまうと場合によってはバグだらけとなってしまう場合もあります。
そんな時はオリジナルのプラグインを書いてしまったほうが短時間で済むときもあります。
ということで、オリジナルのjQueryのプラグインを作ってみましょう！
テンプレート
jQueryプラグインのテンプレートをネット上で探せば、いくつか出てきますが私はいつも以下を使っています。
;(function($){
var pluginName = 'pluginname';
$.fn[pluginName] = function(options){
$.fn[pluginName].defaults = {
// ここにオプションの設定を記述
};
var opt = $.extend($.fn[pluginName].defaults, options);
return this.each(function(i){
// ここに処理を記述
});
};
})(jQuery);
実行コード
プラグインを実行するコードはこちらです。
$('.selector').pluginname();
オプションの設定
このテンプレートを使えばオプションの設定も可能です。
4行目付近でオプションの設定が出来ます。
$.fn[pluginName].defaults = {
defualtVal: 500,
imgPath: '/common/img/logo.png',
option1: true,
option2: false
};
オプションを定義することで、プラグインを実行する際にオプションの変更をする事ができるで多少の応用がきくプラグインを書くことが出来ます。
$('selector').pluginname({
defualtVal: 1000,
imgPath: '/img/icon.png'
});
サンプル
実際動作しないコードのみではよくわからないと思うので、サンプルとして画像ホバー時に、画像を切り替えるプラグインを書いてみました。
オプションでは、画像をプリロードするか否か、接尾辞の変更が出来ます。
プラグイン
;(function($){
var pluginName = 'imgHover';
$.fn[pluginName] = function(options){
$.fn[pluginName].defaults = {
preLoad: false,
suffix: {
on: '-on',
off: '-off'
}
};
var opt = $.extend($.fn[pluginName].defaults, options);
return this.each(function(i){
var thisElm = $(this);
if(opt.preLoad){
var imgObj = new Image();
imgObj.src = thisElm.attr('src').replace(opt.suffix.off, opt.suffix.on);
}
thisElm.hover(function(){
var hoverElm = $(this);
hoverElm.attr({'src': hoverElm.attr('src').replace(opt.suffix.off, opt.suffix.on)});
}, function(){
var hoverElm = $(this);
hoverElm.attr({'src': hoverElm.attr('src').replace(opt.suffix.on, opt.suffix.off)});
});
});
};
})(jQuery);
実行コード
jQuery(function($){
// オプションはデフォルト値を使用
$('.hoverImg').imgHover();
// オプションをデフォルト値から変更して使用
$('.hoverImg2').imgHover({
preLoad: true,
suffix: {
on: '_on',
off: '_off'
}
});
});
HTMLコード
<p><img src="a-off.png" width="320" height="280" alt="" class="hoverImg" /></p> <p><img src="a_off.png" width="320" height="280" alt="" class="hoverImg2" /></p>
サンプルをjsdo.itで公開しているので、どんな動きをしているか確認出来ます。
余談
テンプレートの最初にある「;」（セミコロン）ですが、これは無くてもいいのですが、ざっくり説明すると思わぬバグを防ぐためのおまじないです。
以下のサイトで詳しく説明されているので、興味のある方は読んでみてください！
自作プラグインでできることは無限大！