jQueryプラグインの作成方法
今回は、jQueryプラグインの作成方法について、実際にサンプルコードを用いて、詳しく記載していこうと思います。
jQueryでは、自分で作成したオリジナルのメソッドをプラグイン化することが可能です。例えば前回ご紹介した、jQueryを利用したパブパネル、これをひとつのメソッドとしてしまえば「プラグイン」にすることができます。また、今回の内容では、タブパネルをメソッドにしてみますが、メソッドの作成方法は複数あります。Webデザインで利用するメソッドは、特定のオブジェクトに対して何かをする、というものがほとんどになります。
という事で、それでは今回はッ、
- ・jQueryプラグイン化メソッドの作成
- ・プラグイン化メソッドの利用方法
上記について記載していこうと思います…。
jQueryプラグイン化メソッドの作成
オブジェクト操作のためのメソッドを作成するには、下記のように記述します。
$.fn.メソッド名 = function(){
/* ここにメソッドの処理 */
}
上記のように作成したメソッドは、他のメソッドと同じように利用することができます。
例えば、作成したメソッド名がMkMethodの場合は、下記のような記述になります。
$(“#point”)MkMethod();
そしてここで指定したセレクタ、つまり上記では#pointが、メソッド内ではthisとして利用できます。
$.fn.MkMethod = function(){
/* #pointはthisとして利用することができる */
}
上記を踏まえ、前回記載いたしましたタブパネルを、ひとつのメソッドにまとめたものを記載してみます。
/* メソッドを作成 */
$.fn.jqueryTab = function(){——①
this.each(function(){
var tab = this;——②
var activePanel = $(“.active a”,tab).attr(“href”);ここから▼③以下
$(“.panel > div:not(” + activePanel + “)”, tab).hide();
$(” > ul a”,tab).click(function(){
$(” > ul li.active”,tab).removeClass(“active”);
$(“.panel > div”,tab).hide();
$(this).parent(“li”).addClass(“active”);
$($(this).attr(“href”)).show();
return false;
});ここまでが▲③上記
});
return this;——④
};
/* メソッドの実行 */
$(function(){
$(“#tab1,#tab2”).jqueryTab();
});
</script>
①の部分は、先ほどの説明通り、任意の名前を付けてメソッドとして定義する部分になります。今回はjqueryTabというメソッド名を付けています。そして複数のタブを設置することを念頭に、each()メソッドで囲んでおきます。
また、ここで使用されているthisは、$()で囲んでいません。プラグイン化のコードの中で渡されるthisは、はじめからjQueryオブジェクトになっています。そのため$(this)とする必要はありません。
続く②では、tabという変数を作成して、thisを代入しています。このthisはeach()メソッドの中なので、「現在処理中の#tab」ということになります。
そして③の部分のコードは、基本的に前回のコードと同じになります。ただセレクタで#tabとしていた部分を、変数tabに変更しています。
前回のコードとの変更点
var activePanel = $(“#tab .active a”).attr(“href”);
$(“#tab .panel > div:not(” + activePanel + “)”).hide();
var activePanel = $(“.active a”,tab).attr(“href”);
$(“.panel > div:not(” + activePanel + “)”, tab).hide(); /p>
基本的に上記と同様にセレクタ#tabを変数tabを使ったコードに修正しています。
プラグイン化メソッドの利用方法
上記まででタブパネルのコードをひとつのメソッドにまとめることができました。つまりプラグイン化になります。これを利用する場合は、他のメソッドと同じように、下記のように記述して利用します。
$(function(){
$(“#tab”).jqueryTab();
});
複数のタブを利用する場合は、グループセレクタで指定しても問題ありません。またeach()メソッドを利用しているので、下記のようにも記載できます。
$(function(){
$(“#tab,#tab2”).jqueryTab();
});
仮にeach()メソッドを利用していない場合は、下記のように複数記述することで、複数のタブを設置することも可能になります。
$(function(){
$(“#tab”).jqueryTab();
$(“#tab2”).jqueryTab();
});
今回と前回のサンプルでは、分かりやすいようにメソッドの作成コードとメソッドの実行コードを同じファイルに記述していましたが、作成したメソッドはjQuerysample.jsなどの名前を付けて、別ファイルにして外部化して読み込むことも可能です。また、外部化につきましては、多少、注意する点などがありますので、別記事にまとめようと思います。
といことで今回は、jQueryプラグインの作成方法について、サンプルコードを交え記載いたしました。
ご自身でオリジナルのメソッドを作成することができるようになり、ひとつのメソッドとしてまとめてしまう「プラグイン」まで出来るようになると、色々なサンプルを保存しておくことで、ページ作成でjQueryを使用する際、とても汎用性が広がることと思います。また、Web上には色々なjQueryのサンプルコードが散らばっていますので、そのコードを読み解くことで、スキルアップも望めることと思います。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
