このページの本文へ

jQueryでタブパネルを作るチュートリアル (1/3)

2009年10月19日 11時00分更新

文●西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

※この記事は「Web制作の現場で使えるjQuery UIデザイン入門」の第15回です。過去の記事もご覧ください。


 「タブパネル」はタブ(見出し)をクリックすると、パネル(タブの内容が書かれた部分)が切り替わるUIです。アコーディオンパネル(関連記事)と同じく、情報量に対して表示スペースが少ない場合に使われます。Yahoo!やlivedoorなどの大手ポータルサイトがトップページで採用していることもあり、現在では多くのユーザーが迷わず操作できるUIとして定着しています。

今回制作するサンプル

サンプル画面
「タブパネルUI」の完成画面。タブ部分をクリックすると、下のパネルの表示が切り替わる(画像クリックでサンプルページを表示します)


基本のタブパネルの作り方

 タブパネルのHTML/XHTML(以下、HTML)は、タブ部分(見出し)とパネル部分(表示する中身)をul/li要素を使って別々にマークアップし、タブのul要素には「tab」、パネルのul要素には「panel」というclass名を付けます。

 パネル部分は、タブが選択されたときに表示する内容をli要素で1つずつ記述していき(1タブ項目=1つのli要素)、それぞれに「tab1」「tab2」……といった連番のid名を設定します。

 タブ部分も同様に、タブの項目名を1つずつli要素で記述していきます。タブの項目名はa要素で包み、href属性には先ほどのパネルのid名に#を付けた値を設定します(ページ内リンクにする)。また、初期状態(ページが読み込まれた段階)で表示するタブには、a要素にclass属性「selected」を設定します。

サンプル01(HTML部分)


<div id="container">
    <ul class="tab">
        <li><a href="#tab1" class="selected">JavaScript</a></li>
        <li><a href="#tab2">CSS</a></li>
        <li><a href="#tab3">HTML</a></li>
        <li><a href="#tab4">jQuery</a></li>
        <li><a href="#tab5">XHTML</a></li>
    </ul>
    <ul class="panel">
        <li id="tab1">Lorem ...(中略)... ligula. </li>
        <li id="tab2">Nam...(中略)...ipsum. </li>
        <li id="tab3">Pellentesque ...(中略)... velit. </li>
        <li id="tab4">Vestibulum ...(中略)... magna. </li>
        <li id="tab5">Vestibulum ...(中略)... velit. </li>
    </ul>
</div>


 CSSは次のようになります。タブ部分(ul.tab li)はfloatを利用して横一列に並べ、a要素をdisplay:blockでブロックレベル要素に変更してクリックしやすくしています。また、タブが選択された状態のデザインを「a.selected」で定義してあります。ここでは、text-decoration:none;でリンクの下線を非表示に、cursor:default;でマウスカーソルの形状をデフォルトに、背景画像をタブ選択時用に作成した画像に変更しています。

サンプル01(CSS部分)


#container{
    width:500px;
    margin:50px auto;
}
ul.tab{
    padding:0;
}
ul.tab li{
    list-style-type:none;
    width:100px;
    height:40px;
    float:left;
}
ul.tab li a{
    outline:none;
    background:url("./images/tab.jpg");
    display:block;
    color:blue;
    line-height:40px;
    text-align:center;
}
ul.tab li a.selected{
    background:url("./images/tab_selected.jpg");
    text-decoration:none;
    color:#333;
    cursor:default;
}
ul.panel{
    clear:both;
    border:1px solid #9FB7D4;
    border-top:none;
    padding:0;
}
ul.panel li{
    list-style-type:none;
    padding:10px;
    text-indent:1em;
    color:#333;
}


 スクリプト部分は次のようになります。

サンプル01(スクリプト部分)


$(function(){
    $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide()
    $("ul.tab li a").click(function(){
        $("ul.tab li a").removeClass("selected")
        $(this).addClass("selected")
        $("ul.panel li").hide()
        $($(this).attr("href")).show()
        return false
    })
})


 1行ずつ処理の内容を見ていきましょう。最初の命令(2行目)では、タブパネルの初期表示状態を設定しています。HTMLとCSSの設定だけではすべてのパネル部分が展開した状態ですので、選択状態のパネル(a要素のclass属性が「selected」のタブに対応するパネル)以外をhide()を使って非表示にします。


$("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide()


 セレクターの記述がちょっと複雑で分かりにくいと思いますので、もう少し細かくして見てみましょう。$("ul.tab li a.selected").attr("href") は、「class属性『selected』が設定されているa要素」のhref属性を取得しています。先ほど用意したHTMLでは、最初のli要素内のa要素に「selected」classを付けました。最初のa要素のhref属性は「#tab1」なので、上のコードを実行するとjQueryは以下のように解釈します。


$("ul.panel li:not(#tab1)").hide()


 li要素の後に否定疑似クラスの:not()が付いていますので(関連記事)、この場合はid属性に「#tab1」が付いたパネル以外がhide()で非表示になります。

初期表示状態(左)はすべてのパネルが表示されている。スクリプトの処理で選択されたパネル以外を非表示にする(右)


 次に、タブがクリックされた際に発生するclickイベントを設定します。a要素に対してイベントを設定する場合は「return false」を忘れずに記述しておきましょう(関連記事)。


$("ul.tab li a").click(function(){
    (中略)
    return false
})


 タブがクリックされたときは、すべてのタブ(ul.tab li a)からclass属性「selected」を取り除き、クリックされたタブにclass属性「selected」を追加し直す処理を設定しています。これによって、クリックされたタブだけを選択状態(selected)に変更できます。


$("ul.tab li a").removeClass("selected")
$(this).addClass("selected")


 あわせてパネルの表示/非表示も切り替えます。すべてのパネルをいったんhide()で非表示に設定。$(this).attr("href") で、クリックされたa要素のhref属性の値を読み出し、値と同じ名前のid属性を持つパネルをshow()で表示します。これで、タブで選択されたパネルだけを表示できます。


$("ul.panel li").hide()
$($(this).attr("href")).show()



サンプル01(実行結果)

サンプル01の実行画面。タブをクリックするとパネルの表示が切り替わる


 タブパネルを作るポイントは、a要素のhref属性に#を付けたページ内リンクを設定し、パネルのid属性と紐付けている点です。タブパネルに限らず、jQueryでUIを作る上で広く応用が利く考え方ですので、ぜひ頭に入れておきましょう。

前へ 1 2 3 次へ

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています