手軽に扱えるjQueryプラグインを使ってみよう

jQuery UI／プラグインの活用（4）

タブプラグインを使ってみよう

　次はタブプラグインを使用してみましょう。サイトから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というファイル容量の少なさが魅力です。

　以下の著者サイトで使用方法を確認できます。

• Code Brewery MicroTab 0.1 Released

　リスト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　タブプラグイン使用時（中央を選択した場合）