その他のオプションの指定

MooTabsはタブが切り替わる際にアニメーションエフェクトが行なわれます。このエフェクトの種類をchangeTransitionで指定することができます。MooTabsはMooToolsライブラリを使用しているため、MooToolsで指定できるエフェクトが全て利用できます。指定できるエフェクトは、このURLから参照することができます。

アニメーションエフェクト

エフェクトのアニメーションにかかる処理時間はdurationで指定することができます。durationで指定できる値はミリ秒になります。1000を指定するとアニメーションにかかる時間は1秒になります。

また、タブ上にマウスが重なった際にスタイルシートを切り替えるにはmouseOverClassで適用するスタイルシートクラスを指定します。

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

切り替え時に1.5秒かけてアニメーションエフェクトが適用される

タブにマウスが重なるとスタイルが切り替わりタブの文字が太く赤くなる

サンプル05

<!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", {
                    changeTransition : Fx.Transitions.Back.easeOut,
                    duration : 1500,
                    mouseOverClass : "tabOver"
                });
            });
        // --></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>

プログラムからタブを追加/削除することもできます。タブの追加はaddTab()メソッドを使い、最初のパラメータに追加するタブ名(ID名)、2番目のパラメータにタブに表示する文字、3番目のパラメータにタブ内容を指定します。

タブの削除はremoveTab()を使い、パラメータには削除するタブのID名を指定します。removeTab()は削除済みで存在しないタブを削除しようとするとエラーになります。このエラーを防ぐにはremoveTab()をtry...catch()で囲んでおきます。 実際のプログラムはサンプル06になります。

「タブを追加」ボタンをクリックすると

新たにタブと内容が追加される

「タブ2を削除」ボタンをクリックすると

タブ2が削除される

サンプル06

<!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");
            });
            function addTabContent(){   // タブを追加
                tabObj.addTab("tab99", "新タブ登場", "特に中身がないのが難点...");
            }
            function rmTab(){
                try {
                    tabObj.removeTab("tab2");
                }catch(e){}
            }
        // --></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="addTabContent()">タブを追加</a>｜
            <a href="#" onClick="rmTab()">タブ2を削除</a>
        </div>
    </body>
</html>