|
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();
});
|