タブプラグインを使ってみよう
次はタブプラグインを使用してみましょう。サイトから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とタブプラグイン、メニュープラグインのスタイルシートを読み込みます。
<!--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で指定した番号のタブが、デフォルトで選択されます。
<!--3.タブの指定--> <script type="text/javascript"> <!-- $(function () { $('.microtabs').microTabs({ selected: 0 }); }); //--> </script>
また、リスト7のようにスタイルを指定することで、デザインや色の変更が可能です。ここでは、タブのスタイルを指定しています。
<!--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"を指定し、タブ名と遷移先、表示内容を指定します。
<!--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に、タブプラグイン使用時の結果を示します。