• twitter
  • Facebook
  • はてなブックマーク
2012年05月19日(土)

[jQueryUI入門] tabs(タブパネル)の設置方法

jQUeryUIのtabsを使って、ホームページのサイドバーやトップのニュースなどに便利なタブパネルを設置する方法を解説しています。

jQueryUIで作成するタブパネル

タブパネルは、divブロックなどをコンテナに設定し、タブとして配置するulリスト、コンテンツとして使用する各ブロック要素(タブと対応するIDを設定)をラップして使います。配置する各コンテンツには、見た目を調整するためのクラス名を指定する事が出来ます。個別に設定しない場合は、デフォルトの値が自動で付与されるので、必要なHTMLコーディングと、javascriptの設定のみで使う事が出来ます。クラスを指定する場合は、(例)class="ui-tabs ui-widget ui-widget-content"のように複数のクラスを組み合わせて設定を行います。


タブ全体をラップする(コンテナ)要素に指定するクラス名

  • ui-tabs タブ外観を設定(IEバグ対策)
  • ui-widget ウィジット外観を設定
  • ui-widget-content ウィジット用コンテンツ外観を設定
  • ui-corner-all ボックス全体を角丸枠で囲む

タブの見出しとなるulタグに指定するクラス名

タブの見出しとなるulブロックには、リストに配置する各list要素(li)がタブとして表示されるように、様々なクラスを付与します。ヘルパークラス(jQueryUIの補助となる機能)が付与されると、スタイルリセット後に背景画像や角丸枠が与えられ、配置される各項目にはフォントの色や状態変化などの配色が各テーマを反映した内容に変更されます。ヘルパーは、主にヘッダー、ナビゲーションに当たる<ul>リスト<div>ブロックが該当します。

  • ui-tabs-nav タブ外観を設定(IEバグ対策)
  • ui-helper-reset ヘルパースタイルを一旦リセット
  • ui-helper-clearfix floatなどの回り込みを解除
  • ui-widget-helper widgetのヘルパーとして使用する
  • ui-corner-all ボックス全体を角丸枠で囲む
ヘルパーの中のリスト項目(liタグ)に指定するクラス名
  • ui-state-default タブの状態をデフォルトの状態にする
  • ui-corner-top タブの左上、右上だけを角丸にする

タブの中身として表示されるdivブロックに指定するクラス名

  • ui-tabs-panel タブのパネル(中身)として使う事を明示
  • ui-widget-content jQueryUIのウィジット共通で、コンテンツを表す
  • ui-corner-bottom パネルの左下、右下だけを角丸にする
  • ui-tabs-hide (optional)初期の状態では非表示にしておく。オープン状態のパネル以外に付与

HTMLを設定

  1. <div id="コンテナID">
  2. <ul>
  3. <li><a href="#tab1">タブの見出し</a><li>
  4. </ul>
  5. <div id="tab1">
  6. <p>表示するパネルの内容。<p>
  7. </div>
  8. </div>

javascriptを設定

ロードするファイルは「jquery1.7以上」「jquery.ui.core」「jquery.ui.widget」「jquery.ui.tabs」の4つです。

  1. <script type="text/javascript">
  2. // 初期化
  3. $(function(){ $('#selecter').tabs({ /* タブの初期設定 */ }); }
  4. </script>

タブの初期設定やイベントは、セレクタに対してtabs({})を呼び出す事で設定できます。オブジェクト形式のため、{ ‘プロパティ名’:'値’, ‘event’:function(event,ui){ } }など、プロパティやコールバックを一括設定する事が出来ます。

サンプル

通常のタブパネルです。初期化されるとオープンパネルとして表示されます。クッキーを使う場合は、クッキーが優先されます。
Ajaxによってロードされるコンテンツパネルです。外部ファイルやURLからコンテンツをロード(Ajax通信)して、タブがクリックされるたびに通信処理を行います。タブメニューのhref属性には、ハッシュ指定ではなく、外部ファイル名を指定します。
collapseを指定したパネルです。このパネルを開いた状態で、もう一度タブをクリックすると、タブパネル自体をたたみます。
タブにアイコンを加えたパネルです。アイコンは、タブとして配置するli要素の中の見出し文字の後に、span要素を配置してui-iconとui-icon-●●●クラスを設定するだけで使えます。タブの状態によってアイコン画像の状態も自動で切り替わります。

タブの背景を非表示にして、タブのみのスタイルに変更

タブの背景を非表示にして、タブだけのスタイルシートを適用する方法です。ボタンをクリックすると、スタイルが変更されます。スタイルの変更を行う際は、jQueryUIのウィジット全体に影響する部分ではなく、タブだけの変更を行う方が良いです。ui-tabsというプレフィックスがつくクラスのみ修正します。

  1. .ui-tabs, .ui-tabs-nav { background-image:none; background-color:transparent; border:none; }
  2. .ui-tabs-panel { border:#999 1px solid; /* 背景の設定 */ }
  3. /* タブの下に下線を引く場合 */
  4. .ui-tabs-nav li { border-bottom:#999 1px solid !important; }

※動的に変更しているため、Ajaxタブに適用する場合は、一度Ajaxタブを開いてからクリックして下さい。

関連投稿記事

Comment: