jQuery UIを使うと、以下のようなUIを簡単に作ることができます。
ヘッダーで以下を読み込みます。
<script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
$(function() { $( "#tabs" ).tabs(); });
HTMLソース例。
<div id="tabs"> <ul> <li><a href="#tabs_a">タブA</a></li> <li><a href="#tabs_b">タブB</a></li> <li><a href="#tabs_c">タブC</a></li> </ul> <div id="tabs_a"> <p>タブAのコンテンツ領域です。</p> </div> <div id="tabs_b"> <p>タブBのコンテンツ領域です。</p> </div> <div id="tabs_c"> <p>タブCのコンテンツ領域です。<br> タブCのコンテンツ領域です。</p> </div> </div>
できること
- 折りたたみ(タブを再度クリックするとコンテンツが閉じる)
- Ajax連携
- マウスオーバーでのイベントの切り替え
- シンプルなタブ編集(タブを追加、削除できる)
- 並べ替え
- 下向き
- 縦向き
- ページ読み込み時に表示させたいタブを指定する
- アニメーションや、エフェクトなど