タブを表示する

まず、タブ機能を使うにはスタイルシートとスクリプトファイルを読み込ませておく必要があります。まず、スタイルシートファイルであるmootabs.cssファイルを<link>タグを使って読み込ませます。

<link rel="stylesheet" href="css/mootabs.css" type="text/css">

次にMooToolsライブラリとMooTabsを順番に読み込ませます。

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/mootabs.js"></script>

表示するタブは決められたルールに従って構成されている必要があります。まず、タブ全体を囲む<div>タグを用意しID名を割り当てます。このID名をキーにしてタブ機能が構築されることになります。

次にタブの部分は<ul><li>タグを使って指定します。この時<ul>タグにはmootabs_titleクラスを指定しておきます。<li>タグにはtitle属性を指定しますが、ここで指定された名前が内容を示す<div>タグのID名に対応しています。必要な数だけ<li>タグを記述することでタブを自由に設定することができます。

タブの内容は<div>タグで指定します。この<div>タグにはID名を割り当てますが、これはタブの<li>タグのtitle属性で指定されたものを記述する必要があります。まとめると、以下のような構成になっていればタブ機能として動作します。ちなみに、このタブ機能のHTML構成はYahoo UI LibraryやAdobe Spryとは互換性がありません。

<div id="myTab">
    <ul class="mootabs_title">
        <li title="tab1">タブ1</li>
        <li title="tab2">タブ2</li>
        <li title="tab3">タブ3</li>
    </ul>
    <div id="tab1" class="mootabs_panel">タブ1の内容</div>
    <div id="tab2" class="mootabs_panel">タブ2の内容</div>
    <div id="tab3" class="mootabs_panel">タブ3の内容</div>
</div>

HTMLタグの設定が終わったらスクリプトで機能するようにします。これはページが読み込まれたらnew mootabs("タブのID名")とするだけで完了です。サンプル01ではwindow.onloadではなくwindow.addEventを使っていますが、これはMooTools用の書き方でページが読み込まれたら処理を行なうことを意味しています。addEvent()は最初のパラメータがイベント名、2番目のパラメータがイベントハンドラ(イベントが発生した際に実行される関数)になります。

サンプル01の実行結果

タブをクリックすると

タブごとに内容が表示される

サンプル01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>MooTabsサンプル</title>
        <link rel="stylesheet" href="css/mootabs.css" type="text/css">
        <link rel="stylesheet" href="css/main.css" type="text/css">
        <script type="text/javascript" src="js/mootools.js"></script>
        <script type="text/javascript" src="js/mootabs.js"></script>
        <script type="text/javascript"><!--
            window.addEvent("domready", function(){
                new mootabs("myTab");
            });
        // --></script>
    </head>
    <body>
        <h1>MooTabs サンプル</h1>
        <div id="myTab">
            <ul class="mootabs_title">
                <li title="tab1">タブ1</li>
                <li title="tab2">タブ2</li>
                <li title="tab3">タブ3</li>
            </ul>
            <div id="tab1" class="mootabs_panel">タブ1の内容です。</div>
            <div id="tab2" class="mootabs_panel">タブ2の内容です。簡単にタブインターフェースが実現できます。</div>
            <div id="tab3" class="mootabs_panel">タブ3の内容です。切り替え時のアニメーション付きです。</div>
        </div>
    </body>
</html>

あらかじめ表示しておくタブを指定する(アクティブにする)こともできます。特定のタブをアクティブにするにはactivate()を使います。パラメータにアクティブにしたいタブ名(<div>タグのID名)を指定します。もう1つパラメータを指定することができます。2番目のパラメータには表示する際にアニメーションエフェクトを禁止するかどうかを指定できます。trueを指定するとアニメーションエフェクトは行なわれません。falseまたは省略した場合にはアニメーションエフェクトが行なわれます。

実際のスクリプトはサンプル02になりますが、Internet Explorerではエラーとなり動作しません。

サンプル02の実行結果。タブ2があらかじめ表示される

サンプル02

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>MooTabsサンプル</title>
        <link rel="stylesheet" href="css/mootabs.css" type="text/css">
        <link rel="stylesheet" href="css/main.css" type="text/css">
        <script type="text/javascript" src="js/mootools.js"></script>
        <script type="text/javascript" src="js/mootabs.js"></script>
        <script type="text/javascript"><!--
            window.addEvent("domready", function(){
                var tabObj = new mootabs("myTab");
                tabObj.activate("tab2", true);
            });
        // --></script>
    </head>
    <body>
        <h1>MooTabs サンプル</h1>
        <div id="myTab">
            <ul class="mootabs_title">
                <li title="tab1">タブ1</li>
                <li title="tab2">タブ2</li>
                <li title="tab3">タブ3</li>
            </ul>
            <div id="tab1" class="mootabs_panel">タブ1の内容です。</div>
            <div id="tab2" class="mootabs_panel">タブ2の内容です。簡単にタブインターフェースが実現できます。</div>
            <div id="tab3" class="mootabs_panel">タブ3の内容です。切り替え時のアニメーション付きです。</div>
        </div>
    </body>
</html>