自分でもjQueryを使ってjsを書くので、これをプラグイン化できたらいいなと思うこともあります。という訳で大枠の構成だけですが、基本的な作り方を調べてみました。（あとは引数で設定を変えるのがかっこいいと思ったので作ってみたかったのもあります。）
無名関数
他の領域に干渉しないされないように以下の記述で囲みます。jQueryを引数として指定しているので、この中でも$表記が使えます。
(function($) {
//中身
})(jQuery);
メソッドを追加する
ここが実際に処理するコードを書いていく場所です。「$.fn.hogehoge」のhogehogeの部分がメソッド名になります。
(function($) {
$.fn.hogehoge = function(options){
//プラグインの中身
}
})(jQuery);
使用する
実行のコードです。プラグインを使うときによく見る記述ですね。これを書かないと動きません。
記述する場所は「このプラグインを使うHTMLページ」「他のjsファイル」などでも大丈夫です。今回は解りやすいようにプラグインの下にそのまま書いてます。
(function($) {
$.fn.hogehoge = function(options){
//プラグインの中身
}
})(jQuery);
$(function(){
$("classやidなど").hogehoge();
});
またこれで先ほどのプラグインの中身に、「$(“classやidなど”)」で指定した箇所をthisとして扱えます。
引数の設定
プラグインの実行コードの各箇所に設定や機能追加用のあれこれを指定する引数を書くことがあると思います。その場合はこのように記述します。
デフォルトの値
もし、引数が指定していない場合の値としてデフォルトの値を設定しておきます。デフォルトと実行コードの引数を見て、引数がない場合はデフォルトの値を設定します。
(function($) {
$.fn.hogehoge = function(options){
var defaults = {
type : 'left'
};
var setting = $.extend(defaults,options);
//プラグインの中身
})(jQuery);
$(function(){
$("classやidなど").hogehoge();
});
サンプルコードは例でtypeのleftという値を入れています。
実行コード
何か設定をしたい場合は引数をいれます。
(function($) {
$.fn.hogehoge = function(options){
var defaults = {
type : 'left'
};
var setting = $.extend(defaults,options);
//プラグインの中身
})(jQuery);
$(function(){
$("classやidなど").hogehoge({type:'right'});
});
ここではtypeにrightを入れて、デフォルトの値を上書きしています。
引数があった場合の処理
上記のように引数があった場合は、以下のようなコードで処理を分けて実行させます。
(function($) {
$.fn.hogehoge = function(options){
var defaults = {
type : 'left'
};
var setting = $.extend(defaults,options);
if(setting.type == 'right'){
//rightの場合の処理
}
})(jQuery);
$(function(){
$("classやidなど").hogehoge({type:'right'});
});
これを複数書けば引数の値によって分けられます。
あとは処理をグリグリと書いていけばいいと思います。というわけで、jQueryでプラグインを作る際の大枠の作り方と引数の設定のやり方でした。
コメント
[…] jQueryプラグインの作り方の初歩 […]