jQuery UI Tabsを使ってタブを実装する

jQuery UI Tabsを使ってタブを実装する

Posted at April 1,2011 3:33 AM
Tag:[jQuery]

jQuery UI Tabsを使ってタブを実装する方法を紹介します。

本当は4月1日は毎年エイプリルフールネタをエントリーしているのですが、今年は自粛します。

1.サンプル

以下に簡単なサンプルを用意しましたのでご覧ください。

サンプル
jQuery UI Tabsのサンプルページ

2.jQuery UI Tabsのダウンロード

jQuery UIのページの「Download」をクリック。

jQuery UIのページ

「Toggle All」をクリックして、すべてのチェックを外します。

Deselect all components

「Widgets」の「Tabs」をチェック。

Widgets

ページ下にある「design a custom theme」をクリック。

design a custom theme

「Theme Roller」でテーマを選択します。「Roll Your Own」タブではすべてを自分でカスタマイズできますが、最初は「Gallery」タブから決まったデザインを選択して、jQuery UIとテーマの対応の感触をつかんだ方がいいでしょう。

Theme Roller

ここでは「Gallery」タブの中から「Start」を選択してみます。カレンダーの部分をクリックすると、ページ右側のサンプルにテーマが反映されます。

「Start」を選択

タブを「Roll Your Own」に戻すと、「Start」のデザインが反映された状態になっているので(「abc」という部分のデザインが変わっています)、この状態で「Download theme」をクリック。

Download theme

これで前のページに戻ります。「Theme」に「Start」が選択されていることがわかります。

design a custom theme

あとはバージョン(本エントリー時点では1.12.1)を選択。

Version

「Download」をクリック。

Download

3.jQuery UI Tabsの設定

ダウンロードしたアーカイブを展開し、展開したままのディレクトリ構成でindex.htmlにアクセスすればサンプルが表示されます。

サンプル

head要素に次のように設定します。ダウンロードしたアーカイブにはjquery.jsが同梱されています。

<link rel="stylesheet" href="jquery-ui.css" type="text/css" media="all" />
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>
$(function(){
    $('#tabs').tabs();
});
</script>

タブのマークアップはjquery-ui.jsを通すことで次のようになります。タブとコンテンツの対応は、li要素→a要素のhref属性に、対応するid属性値をフラグメント形式(#...)で設定すればOKです。

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">First</a></li>
    <li><a href="#tabs-2">Second</a></li>
    <li><a href="#tabs-3">Third</a></li>
  </ul>
  <div id="tabs-1">aaa</div>
  <div id="tabs-2">bbb</div>
  <div id="tabs-3">ccc</div>
</div>

フラグメント指定以外に、通常のページリンクにすればAjaxでページを読み込んでくれるというスグレモノです。

<div id="tabs">
  <ul>
    <li><a href="aaa.html">First</a></li>
    <li><a href="bbb.html">Second</a></li>
    <li><a href="ccc.hmtl">Third</a></li>
  </ul>
</div>

デザインは、一番外側のdiv要素に「id="tabs"」を記述することでテーマが反映されます。実際には次のようにclass属性が設定されます。

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
  <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">First</a></li>
    <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Second</a></li>
    <li class="ui-state-default ui-corner-top"><a href="#tabs-3">Third</a></li>
  </ul>
  <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">aaa</div>
  <div id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">bbb</div>
  <div id="tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">ccc</div>
</div>

4.起動オプション

jQuery UI Tabsには豊富な起動オプションが用意されています。ここではいくつかのオプションを紹介します。

指定した番号のタブを選択状態にする(番号は0から開始)

$('#tabs').tabs({
    selected: 2
});

選択状態のタブをクリックするとコンテンツを折りたたむようにする

$('#tabs').tabs({
    collapsible: true
});

クッキーに保存する(jQuery Cookieプラグインとの併用が必要)

$('#tabs').tabs({
    cookie: { expires: 30 }
});

タブの切り替えをアニメーションにする(「height: 'toggle'」はタブ切り替え時に縦方向もアニメーション化)

$('#tabs').tabs({
    fx: { height: 'toggle', opacity: 'toggle', duration: 300 }
});

Ajaxで読み込んだページをキャッシュする

$('#tabs').tabs({
    cache: true
});

タブの切り替えを禁止する

$('#tabs').tabs({
    disabled: true
});

複数のオプションを指定するには、次のように設定します。

$('#tabs').tabs({
    selected: 2,
    fx: { height: 'toggle', opacity: 'toggle', duration: 300 }
});

5.その他

上記で紹介した以外に、jQuery UI Tabsには各種のイベントやメソッドが用意されています。詳しくはjQuery UI Tabsのドキュメントを参照してください。

2017.01.28
jQuery UIのバージョンアップに伴い、記事を全面的に見直しました。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)