jQuery を使って動的で高品質なウェブサイトを構築する方法を解説しています。なるべく動くサンプルコードを記載しています。
jQuery 入門jQuery 入門
jQuery の使い方
jQuery の基礎
jQuery モバイル
jQuery UI
サンプルのテーマ変更

jQuery の拡張
関連サイト
サイト情報
ホーム > jQuery UI の利用 > jQuery UI - タブ

jQuery UI - タブ

タブはウェブアプリケーションの UI を設計する上で非常に役に立つ一方、上手に実装するのがなかなか面倒でもあります。

jQuery UI を使うとタブの UI を簡単に実装できます。

ここでは jQuery UI のタブの利用方法と、そのカスタマイズ方法を紹介します。

jQuery UI の基本的なタブの使い方

次のタブ UI を作る方法を紹介します。

Android, Chromebooks

iPhone, iPad

Windows Phone

まず HTML を次のようにします。

<div style='clear:both;' id="tabdemo1">
  <ul>
    <li><a href="#tab-google1">Google</a></li>
    <li><a href="#tab-apple1">Apple</a></li>
    <li><a href="#tab-ms1">Microsoft</a></li>
  </ul>
  <div id="tab-google1">
    <p>Android, Chromebooks</p>
  </div>
  <div id="tab-apple1">
    <p>iPhone, iPad</p>
  </div>
  <div id="tab-ms1">
    <p>Windows Phone</p>
  </div>
</div>

この div 要素に対し tabs() を呼び出せば OK です。

$('#tabdemo1').tabs();

これだけでタブが実装できるのですから、楽チンで嬉しいですね。

タブが切り替わった時のイベントをとる場合は次のようになります。まずはサンプルから・・・

Android, Chromebooks

iPhone, iPad

Windows Phone

この文字が差し変わります

タブをクリックすると、タブが変わったイベントで文字を差し替えています。

タブが切り替わったイベントを受けとるには、 select オプションに関数オブジェクトを渡します。

$('#tabdemo2').tabs({
  select: function(event, ui){
    $('#text2').text('Hello, select event! ' + ui.index);
  }
});

するとタブが切り替わったときに、この関数が呼び出されます。

尚、パラメータの ui から次のような値が利用できます。

プロパティ意味
ui.tabクリック (選択) されたタブのアンカー要素
ui.panelクリック (選択) されたタブのコンテンツを含む要素
ui.indexクリック (選択) されたタブのゼロベースのインデックス

こうしたオブジェクトと Ajax を利用して、クリックしたタイミングでサーバーからコンテンツを取得してタブに設定するなどの操作が行えます。

タブのカスタマイズ方法

タブ UI は簡単に実装出来るものの、ややくせのある表現となっており、そのまま使うと 「あ、 jQuery のタブだな」感が強めに出てしまいます(笑)。

特にヘッダー部分は二重に囲んであるなどして、こうしたデザインが不要な場合もあるでしょう。

次の例をみてください。ここではタブの部分がだいぶすっきりしています。(必ずしもこの方がよいとは言いませんが、こうした要求がある場合もあるはずです)

Android, Chromebooks

iPhone, iPad

Windows Phone

これを実現するには、 次の CSS を追加します。 #tabdemo3 という ID はタブを構成する div 要素に私が割り当てた ID なので適当に変更してください。

#tabdemo3.ui-tabs {
	padding: 0;
	border-width: 0;
}

#tabdemo3 .ui-widget-header {
	border: 0;
}

#tabdemo3 .ui-tabs-nav {
	border-width: 0;
	padding: 0;
}

#tabdemo3 .ui-tabs-panel {
	border-width: 5px;
}

#tabdemo3 .ui-tabs-nav li.ui-tabs-selected {
	border-width: 5px;
	margin-bottom: -5px;
}

また、JavaScript で次を追加してヘッダの角の丸みをつけるクラスを削除します。

$('#tabdemo3 .ui-tabs-nav').removeClass('ui-corner-all');

removeClass については 属性操作 を参考にしてください。

ホーム > jQuery UI の利用 > jQuery UI - タブ
小山圭介 著者
小山 圭介
4/15/1973生
米国在住のソフトウェアエンジニア。ITコンサルタント.. »プロフィール

© 2011-2017 Keisuke Oyama jQuery 入門