タブプラグインを作ってみよう

最近ではWebサイトを制作する際によく使われるのが，既に完成しているJavaScriptファイルを読み込み，実行するだけで簡単に利用できるプラグインやライブラリといったものです。

jQueryの場合，プラグインと呼ばれますが，そのプラグインだけでも，数え切れないくらい多くのものが公開されています。

代表的なものでは，jQueryオフィシャルのUIプラグインなどが挙げられます。この連載ではプラグインの紹介は行いませんが，第7回・8回では実際にプラグインを作成してみましょう。

今回の第7回では，タブパネルを実装するスクリプトを書くところまでを紹介し，次回の第8回は今回実装したタブパネルスクリプトを元にプラグイン化するところまでを紹介していきます。

タブパネルを実装するスクリプトを書いてみよう

タブパネルの実装について，考えてみましょう。タブパネルUIは様々なシーンで使われますが，タブパネルは見ての通りとても簡単なもので，タブ部分をクリックすることで，対応するパネルを表示する，というものです。

実装方法は様々ですが，本連載では，ul要素をタブグループ，その子要素のliをタブとして，さらにその子要素aが持つhref属性に#idという形でリンクを用意しておき，それ以下に存在するブロック要素に対応するidを付けて実装していくことにします。具体的には以下のHTMLをベースに実装していきます。

タブパネルを実装するにあたって，マークアップに若干のルールを作っておく必要があります。タブパネル全体をdiv.tabAreaで囲い，その中にタブを識別するためのul.tab，それぞれに対応するdiv#tab1, div#tab2などのようにidを付与する，ということです。

<div class="tabArea">
    <ul class="tab">
        <li><a href="#tab1">tab1</a></li>
        <li><a href="#tab2">tab2</a></li>
    </ul>
    <div id="tab1" class="tabPanel">
        tab1tab1tab1tab1tab1tab1tab1<br />
        tab1tab1tab1tab1tab1tab1tab1<br />
        tab1tab1tab1tab1tab1tab1tab1<br />
        tab1tab1tab1tab1tab1tab1tab1<br />
        tab1tab1tab1tab1tab1tab1tab1<br />
        tab1tab1tab1tab1tab1tab1tab1
    </div>
    <div id="tab2" class="tabPanel">
        tab2tab2tab2tab2tab2tab2tab2<br />
        tab2tab2tab2tab2tab2tab2tab2<br />
        tab2tab2tab2tab2tab2tab2tab2<br />
        tab2tab2tab2tab2tab2tab2tab2<br />
        tab2tab2tab2tab2tab2tab2tab2<br />
        tab2tab2tab2tab2tab2tab2tab2
    </div>
</div>

タブパネルの初期化

順を追って見ていきましょう。

まずは，tabArea，tabPanel，tabをそれぞれ取得しておきます。

var tabArea = $('div.tabArea');
var tabPanel = $('div.tabPanel',tabArea);
var tab = $('ul.tab li',tabArea);

次に，最初のタブパネル以外を非表示にします。タブパネルは先ほど取得しているので，「⁠最初以外の」と「非表示にする」を組み合わせるだけです。「⁠～以外を」は.not(セレクタ)で絞れるので，「⁠最初の」を選択する「:first」セレクタを用いて，「⁠最初以外の」を取得します。「⁠非表示にする」は.hide()をつけるだけです。

tabPanel.not(':first').hide();

続いて，最初のタブパネルは選択された状態にするので，タブ自体も選択された状態にしておく必要があります。これはclass属性にactiveを指定することで，CSSを用いて選択されている状態を実現します。

タブも先ほど取得しているので，「⁠最初の」と「classにactiveを追加する」を組み合わせるだけです。「⁠最初の」は.eq(0)で，「⁠classにactiveを追加する」は.addClass('active')でそれぞれ行います。

tab.eq(0).addClass('active');

ここまでで，タブパネルの初期化が終わりました。最初以外のタブパネルが非表示になり，最初のタブが選択された状態になっているはずです。サンプルを確認してみてください。

タブをクリックしたときの動作を追加する

タブをクリックしたときに，パネルが入れ替わるので，.click()を使います。

tab.click(function(){ /* ここに処理を書いていく */ });

まずは，クリックされたタブに対応するパネルのidを取得します。タブのa要素のhrefには「#tabId」が，対象のタブパネルのidには「tabId」が入っている，というルールを決めたのを思い出してください。また$(セレクタ)はidを指定するときには$('#id')という形で指定できるので，クリックされたタブのa要素から「#id」部分を抜き出して，それをそのまま$()にあてはめれば対象のタブパネルを取得できます。「⁠#id」を抜き出すには，.attr('hash')を使います。hashとはhref属性に含まれる「#～～を指します。

試しにconsoleで見てみるとよいでしょう。

consoleには「#tabId」が表示されているはずです。

tab.click(function(){
    var targetTabId = $('a',this).attr('hash');
    console.log(targetTabId);
});

ここまでくればもう完成したようなもので，残っている処理は，

• 現在表示されているタブパネルを非表示にして，
• 選択状態のタブからactiveを取り除き
• クリックされたタブにactiveを追加
• 取得した「#tabId」のタブパネルを表示する

の4つです。

実際には，表示しているタブをわざわざ取得するよりも，全てのタブパネルを非表示にしてから，対象のタブパネルを表示した方が効率的ですし，同じく，選択状態のタブをわざわざ取得するよりも，タブ全体からactiveを取り除いて，クリックされたタブにactiveを追加する方が効率的です。例えば，.removeClass()は指定したclassが含まれない場合は，その処理を無視してくれるので，特に何も気にする必要はありません。

以上をふまえると，残っている処理は以下のように記述するだけです。

tab.removeClass('active');
tabPanel.hide();
$(this).addClass('active');
$(targetTabId).show();

これらを先ほどのものと合わせて，最後にタブをクリックすると，子要素のa要素をクリックしたことにもなりますが，そうするとa要素のhref属性の挙動（リンク先に移動する挙動）とかぶってしまうので，return falseを追加することで，クリックイベントがa要素に伝播するのを防ぐことができます。

tab.click(function(){
    var targetTabId = $('a',this).attr('hash');
	
    tab.removeClass('active');
    tabPanel.hide();
    $(this).addClass('active');
    $(targetTabId).show();
	
    return false;
});

では，書いてきたスクリプトを合わせて確認してみましょう。

jQuery(function($){
    var tabArea = $('div.tabArea');
    var tabPanel = $('div.tabPanel',tabArea);
    var tab = $('ul.tab li',tabArea);
	
    tabPanel.not(':first').hide();
	
    tab.eq(0).addClass('active');
    tab.click(function(){
        var targetTabId = $('a',this).attr('hash');
		
        tab.removeClass('active');
        tabPanel.hide();
        $(this).addClass('active');
        $(targetTabId).show();
		
        return false;
    });
});