ナビゲーション/オプションの指定

ユーザーによる操作だけでタブを切り替えるのではなく、スクリプトから切り替えることもできます。スクリプトから制御するためにはnew mootabs()で生成されたタブオブジェクトを一旦変数に入れておきます。サンプル03では変数tabObjに入れてあります。

前のタブに移動するにはタブオブジェクトのprevious()メソッド、次のタブに移動するにはnext()メソッドを使います。どちらのメソッドもパラメータはありません。また、最後のタブまで切り替わった場合にnext()を実行すると最初のタブに移動します。最初のタブでprevious()を実行すると最後のタブに切り替わります。

サンプル03の実行結果。

前後への移動がリンクで実行される

サンプル03

<!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"><!--
            var tabObj;
            window.addEvent("domready", function(){
                tabObj = 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>
        <div><a href="#" onClick="tabObj.previous()">前のタブへ</a>｜
        <a href="#" onClick="tabObj.next()">次のタブへ</a></div>
    </body>
</html>

MooTabsではいくつかのオプションを指定することができます。タブ内容の横幅はwidth、縦幅はheightで指定することができます。これらのオプションはmootabs()の2番目のパラメータで指定します。2番目のパラメータはプロパティリスト形式で指定するため{ width : "400px" }のように名前と値を:(コロン)で区切って記述する必要があります。複数のパラメータを指定する場合には{ width:"400px", height:"200px" }のように,(カンマ)で区切って列記します。

実際のプログラムはサンプル04のようになります。

タブ表示領域の横幅が広がっている

サンプル04

<!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"><!--
            var tabObj;
            window.addEvent("domready", function(){
                tabObj = new mootabs("myTab", {
                    width : "400px",
                    height : "150px"
                });
            });
        // --></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>