非同期通信でタブ内容を読み込む

MooTabsは非同期通信を使ってサーバーからダイナミックにタブ内容を読み込ませることができます。非同期通信を使って内容を読み込ませるには以下の3つのオプションパラメータを指定します。

useAjax true
ajaxUrl CGIプログラムなどのURL
ajaxLoadingText 読み込むまでに表示する内容(HTMLで指定)

非同期通信を行なう場合はuseAjaxでtrueを指定し、ajaxUrlで内容を送信するCGIプログラムなどのURLを指定します。タブがクリックされるとCGIプログラムにはURLパラメータとして「tab=タブ名」が渡されます。タブ名は<li>タグのtitle属性(<div>タグのID名)で指定したものが渡されます。CGIプログラム側では、このタブ名に応じて表示する内容を送信します。送信された内容は自動的に表示されます。

非同期通信の場合、通信に時間がかかることがあるため、読み込むまでに何か表示させておきたい場合があります。読み込むまでに表示しておく内容はajaxLoadingTextで指定できます。HTMLタグで指定することができるため、ローディング画像を表示させておくこともできます。

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

サンプル07の実行結果。

MooTabsは非同期通信を使って内容を処理したい場合や切り替え時にアクセントを付けたい場合などに使うと良いでしょう。

サンプル07

<!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", {
                    useAjax: true,
                    ajaxUrl: "cont.txt",
                    ajaxLoadingText : "読み込み中です..."
                });
            });
        // --></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"></div>
            <div id="tab2" class="mootabs_panel"></div>
            <div id="tab3" class="mootabs_panel"></div>
        </div>
    </body>
</html>