まずタブの枠全体のidを作成します。その中に、タイトル部分をulで作り、要素をdivで作ります。そしてこれらをdiv要素のidを利用してリンクさせておきます。
あとはいつも通りJQuery UIでtabsに指定してあげれば、半自動的にメニューバーが出来上がります。
メニューバーは自分で素直に作っても良いですし、Bootstrapなどを利用しても簡単に作れますので、デザインの優先順位次第で色々と選択肢がありますね。
Bootstrapを利用するとどうしてもイメージがフラットデザイン的な感じで統一されてしまいますので、さくっと作りたいけれどある程度カスタマイズはしたい、という時にJQuery UIにお呼びがかかりそうです。
オプションを指定することで、要素の高さの基準を決めたり、タブを全て閉じるといったことが可能になります。selectedオプションを使ったデフォルトのタブ指定も良く使いそうですね。
<body>
<div id="tabs_ui_training">
<ul>
<li><a href="#tab_menu1">Menu 1</a></li>
<li><a href="#tab_menu2">Menu 2</a></li>
<li><a href="#tab_menu3">Menu 3</a></li>
</ul>
<div id="tab_menu1">Here is Menu 1.</div>
<div id="tab_menu2">Here is Menu 2.</div>
<div id="tab_menu3">Here is Menu 3.</div>
</div>
<script>
$(function () {
$('#tabs_ui_training').tabs({
//clicking open tab close that tab. In short You can close all tabs.
collapsible: true,
//adjust all tab height to the tallest one
heightStyle: "auto"
});
});
</script>
</body>
0 件のコメント:
コメントを投稿