まずタブの枠全体の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 件のコメント:
コメントを投稿