Updated Sep 21, 2009 by nakajiman1
Labels:	jQuery.fn.tabs
Locales:	en, en, en-US

Tabs

タブを表示し、タブの切り替えイベントをハンドリングできます。

タブを表示する

jQuery.fn.tabs は tabs を必要とします。

<Require feature="tabs" />

タブを表示する

jQuery.fn.tabs を使って、タブを表示できます。タブの品揃えは ul, li, a タグで表現し、タブの内容は a タグのリンク先に指定します。また、タブのツールチップは、a タグの title 属性で指定します。

<script type="text/javascript">
  jQuery(function($) {
    $('#tabs').tabs();
  });
</script>
<div id="tabs">
<ul>
<li><a href="#dog" title="tab of dog">DOG</a></li>
<li><a href="#cat" title="tab of cat">CAT</a></li>
</ul>
<div id="dog">contents of dog</div>
<div id="cat">contents of cat</div>
</div>

また jQuery.fn.tabs にコールバック関数を指定して、タブの切り替えイベントをハンドリングできます。このとき this が切り替わったタブのコンテンツを表します。

  $('#tabs').tabs(function() {
    $(this).text('id: ' + this.id);
    $(window).adjustHeight();
  });

コールバック関数の引数も使えます。このとき i は何番目のタブかを表し、content は切り替わったタブのコンテンツを表します。

  $('#tabs').tabs(function(i, content) {
    $(content).text('i: ' + i);
    $(window).adjustHeight();
  });