前回つくったタブパネルスクリプトをもとにして、タブプラグインを作ってみましょう。プラグインを作る、というと何か難しいことのように聞こえるかもしれません。前回作ったタブパネルスクリプトのように、なにも難しいことはありません。プラグインについて少し考えてみましょう。jQueryプラグインについて前回の始めに言及したように、プラグインとは、既に完成しているJavaScriptファイルを読み込み、実行するだけで簡単に利用できるものを指すことにします。jQueryプラグインは通常以下のようにして実行できるようになっていると思います。対象のjQueryオブジェトに対してメソッドを実行する});$('div.tabArea')に対して、tabPanelというメソッドを実行するという意味ですね。メソッドを実行するだけで、ある程度の機能を提供できれば、それは立派なプラグインです。function関数とメソッドfunction関数まずはメソッドについておさらいをしましょう。JavaScriptでは、何か機能をまとめるときに、functionという関数を使います。簡単なfunctionは以下のようなものです。world」という文字列が表示されるはずです。実行結果メソッドメソッドとは、あるオブジェクトに対して実行する関数を指します。jQueryプラグインにおけるメソッドの特徴として、関数と違うのは、あるオブジェクトをthisというキーワードで受け取ることができる、ということです。});jQueryのメソッドや処理を実行する場合は、この中に記入します。Readyの段階で処理が実行されます。})(jQuery);カプセル化(隠蔽)と言い、最初の($)を一番最後の(jQuery)として認識させます。実行するものはjQuery(function($){});にまとめて入れてしまえばいいのですが、プラグインなど、そのファイル単体で実行予定がないものはjQuery(function($){});に入れる必要はありません。そのまま書いてしまうと、他の場所で$を使っている場合に干渉してしまうので、jQueryプラグインを作成する際には、(function($){})(jQuery);内に入れると、その中では$はjQueryとして認識され、安全に定義することができます。}});このスクリプトをメソッドにすればいいだけの話なのです。function関数にするメソッドにする前に、functionにしてみましょう。funcName(){}で囲うだけですが、それだけでは拡張性がないので、タブ関数を実行する対象を渡すことにします。今は、div.tabAreaに対してのみしか実行することができませんが、これを変えることができるようになります。}}上から2行を見てください。対象にする要素を引数で渡すことができます。渡す要素は前回決めたルールに則っていることが前提条件になります。このfunction関数を実行するには以下のようにします。tabPanel('div.tabArea');});jQueryオブジェクトのメソッドにするでは準備ができたところで、いよいよjQueryオブジェクトのメソッドにしてみましょう。jQueryオブジェクトのメソッドを作るときの作法を知る必要があります。いっても、とても簡単で以下のようにするだけです。$('div.tabArea').tabPanel();});上記の例では、tabPanelメソッド内では、div.tabAreaをthisとして扱うことができます。先ほど作ったtabPanel関数では引数で渡していた、対象要素を引数を使わずに、thisとして扱うことができます。これをもとに、tabPanel関数をtabPanelメソッドに書き換えてみましょう。$('div.tabArea').tabPanel();});機能の拡張1)複数のタブパネルに対応するメソッド化までが終わりました。これでプラグインは完成・・・ではなく、もう少し突っ込んで考えてみましょう。このメソッドは、現在はひとつのタブパネルしか作ることができません。jQueryオブジェクトに複数のdiv.tabAreaが入っていたとしても、その数分実行する、という処理が入っていないためです。複数のタブパネルに対応するための処理を追加してみましょう。複数の要素を含んだjQueryオブジェクトに対して、その数分同じ処理を行う場合は、eachメソッドを使うのでした。eachメソッドを加えるだけです。注意しておくべき点は、eachメソッドの中ではthisはeachメソッドを実行しているjQueryオブジェクトを指すので、tabPanelを実行する対象の要素とは異なるということです。$('div.tabArea').tabPanel();});当然、対象にする要素はタブパネルのマークアップルールに則っている必要があります。2)タブ切り替え時にエフェクトを追加するオプションを実装する現在のタブパネルメソッドは、タブの切り替え時は、特にエフェクトなどなく、表示非表示を切り替えているだけです。jQueryを使っているので、もともとあるメソッドのfadeInを使って、切り替え時にエフェクトを選べるようにしてみましょう。選べるようにするには、オプションとして引数で渡し、キーとパラメータがあればそちらで実行し、なければ元々の表示非表示で実行する、といった形を取るのがベストです。引数に入る値が、必須またはなくても影響が内場合は問題ないですが、オプション自体必須ではないので、以下のように複数の引数として扱うのは、あまりいい方法とは言えません。$('div.tabArea').tabPanel('fadeIn',400);});もし、option2だけを指定したい場合はどうすればいいでしょうか。上記の方法では、option1は実質省略することができません。どちらかだけを指定したい、という場合にも有効なのは以下のような書き方です。});});showとhideに、それぞれデフォルト値を用意しておくことで、optionsにその値があれば上書き、なければ何もせずデフォルトの値を使うようになっています。オプションの渡し方は、引数に{}を使ってパラメータを渡します。書き方は、CSSのようにキー:値というようにします。後は値によって、動作を変える、という部分を書き換えます。show()となっているところを、オプションでfadeInを渡している場合は、fadeIn(duration)にすればいいということになります。メソッドの呼び出し方メソッドの呼び出し方は、今まで見てきた方法では、$(object).method()でした。JS$(object).fadeIn(400);しかし、この方法ではmethodをオプションの値によって変えるということができないので、$(object)[method]()という呼び出し方に変えています。JS$(object)['fadeIn'](400);どちらでも同じ意味です。後者では、method部分が、show、fadeInのどちらでも対応することができます。前者ではそれができないのです。$(object).fadeIn(400)と同じあとは、上記に併せて切り替え部分のshowを書き換えるだけです。実際に書き換えてみましょう。});});以上でタブパネルプラグインが完成しました。オプションでfadeInを渡さずに、slideDownを渡してもいいかもしれませんね。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します⁠。個別にライセンスが設定されている記事等はそのライセンスに従います。