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({
  activate: function(event, ui){
    $('#text2').text('Tab [' + ui.newTab.context.innerText + ']');
  }
});

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

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

プロパティ意味
ui.newPanel新しく選択されたタブのコンテンツ
ui.newTab新しく選択されたタブ
ui.oldPanel切り替わる元のタブのコンテンツ
ui.oldTab切り替わる元のタブ

こうしたオブジェクトと 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: 0px;
  background-color: #fff;
}

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

#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 については 属性操作 を参考にしてください。