jQuery UI - タブ

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

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

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

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

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

まず 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();

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

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

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

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

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

$('#tabdemo2').tabs({
  activate: function(event, ui){
    $('#text2').text('Tab [' + ui.newTab.context.innerText + ']');
  }
});

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

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

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

タブのカスタマイズ方法

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

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

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

これを実現するには、 次の 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 については 属性操作 を参考にしてください。