タブプラグインを使ってみよう
次はタブプラグインを使用してみましょう。サイトからjquery.microtabs-0.1.jsをダウンロードし、pluginsフォルダに配置します。
第1回「jQuery UIのインタラクションを使ってみよう」 、第2回「jQuery UIのウィジェットを使ってみよう」と扱ってきたjQuery UIの中にも、タブを簡単に扱う機能が備わっていますが、344KBあるjquery-ui-1.8.2.custom.jsファイルに比べ、MicroTabプラグイン（jquery.microtabs-0.1.js）はわずか1KBというファイル容量の少なさが魅力です。
以下の著者サイトで使用方法を確認できます。
リスト5のように、jQueryとタブプラグイン、メニュープラグインのスタイルシートを読み込みます。
リスト5 プラグインの読み込み（jQueryPlugin_menu_tab.html）
<!--1．jQueryの読み込み--> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <!--2．プラグインの読み込み--> <script type="text/javascript" src="plugins/jquery.microtabs-0.1.js"></script>
タブプラグインは次のように指定します（リスト6）。selectedで指定した番号のタブが、デフォルトで選択されます。
リスト6 タブプラグインの使用例（jQueryPlugin_menu_tab.html）
<!--3．タブの指定-->
<script type="text/javascript">
<!--
$(function () {
$('.microtabs').microTabs({
selected: 0
});
});
//-->
</script>
また、リスト7のようにスタイルを指定することで、デザインや色の変更が可能です。ここでは、タブのスタイルを指定しています。
リスト7 タブプラグインのスタイル指定（jQueryPlugin_menu_tab.html）
<!--4．タブのスタイル指定-->
<style type="text/css">
.microtabs { margin:20px 20px; max-width:800px;}
.microtabs-button {
padding: 10px;
background-color:#333;
color:#fff;
text-decoration:none;
font-family:Segoe UI, Helvetica, Arial;
}
.microtabs-button:hover { color:#abcdef; }
.microtabs-selected {
background-color: #fff;
color: #333;
border-right:1px solid black;
border-top:1px solid black;
border-left:1px solid black;
}
.microtabs-element {
background-color:#fff;
color:#555;
padding:10px;
}
.microtabs-header { margin-bottom: -1px; }
.microtabs-container { border: 1px solid black; }
</style>
リスト8に、div要素でのタブプラグインの指定例を示します。
タブの表示領域では、リスト7のようにdiv要素のクラスに"microtabs"を指定し、タブごとのdiv要素のクラスには"micro"を指定し、タブ名と遷移先、表示内容を指定します。
リスト8 タブプラグインの使用例（jQueryPlugin_menu_tab.html）
<!--5．タブの指定-->
<div class="microtabs">
<div class="micro">
<a href="#">Tab1</a>
<div>Tab1</div>
</div>
<div class="micro">
<a href="#">Tab2</a>
<div>Tab2</div>
</div>
<div class="micro">
<a href="#">Tab3</a>
<div>Tab3</div>
</div>
</div>
図3と図4に、タブプラグイン使用時の結果を示します。
図3 タブプラグイン使用時（デフォルト）
図4 タブプラグイン使用時（中央を選択した場合）
