もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第7回 タブパネルを実装する(前編)

この記事を読むのに必要な時間:およそ 6 分

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

最近では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を付与する,ということです。

タブパネルベースHTML

<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をそれぞれ取得しておきます。

タブパネル実装 - JS - 1

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

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

タブパネル実装 - JS - 2

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

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

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

タブパネル実装 - JS - 3

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

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

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

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

タブパネル実装 - JS - 4

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

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

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

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

タブパネル実装 - JS - 5

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

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

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

の4つです。

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

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

タブパネル実装 - JS - 6

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

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

タブパネル実装 - JS - 7

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

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

タブパネル実装 - JS - 8

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;
    });
});

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/

コメント

コメントの記入