【ハウツー】ゼロからはじめるYahoo! UI Library - TabView編 (8) 1歩先行くタブ生成応用 | パソコン

お知らせ: 「マイポ」からのポイント交換を再開いたしました。(5月9日); メール会員100万人突破記念「春の読者プレゼント」結果発表は5月30日です。; マイナビベアがミクシィで部屋を作ったよ。ぜひ見てね！; 一緒に「マイナビ」で働きませんか。採用情報はこちらから。; 旅行券3万円、時計、ビジネスバッグなどが当たる！さらに応募者全員に50マイポもプレゼント

その先を伝える総合情報サイト
マイナビニュース

パソコン

急上昇ワード

[

]

【ハウツー】

ゼロからはじめるYahoo! UI Library - TabView編

8 1歩先行くタブ生成応用

古籏一浩　 [2008/01/23]

印刷

先頭
前へ
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- ／8

サンプル06のようにタブの数が少なければtabObj.getTab(0).set(～)のようにタブごとに指定できますが、タブの数が分からない場合や多くなった場合には、この方法では対処できません。この場合には、タブの数を取得しタブの数だけ繰り返し設定するようにします。タブの総数はget("tabs").lengthで取得することができます。取得した数をfor()の繰り返しの数として指定します。サンプル07ではタブの総数を取得し、全てのタブがマウスが重なった時に内容を切り替えるように設定しています。


サンプル06の実行結果	for文を使ったタブの増殖

サンプル07

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>YUIタブビューサンプル</title>
        <link rel="stylesheet" type="text/css" href="css/tabview.css"> 
        <link rel="stylesheet" type="text/css" href="css/border_tabs.css"> 
        <link rel="stylesheet" type="text/css" href="css/main.css"> 
        <script type="text/javascript" src="js/yahoo-dom-event.js"></script> 
        <script type="text/javascript" src="js/element-beta.js"></script> 
        <script type="text/javascript" src="js/connection.js"></script> 
        <script type="text/javascript" src="js/tabview.js"></script> 
        <script type="text/javascript"><!--
            window.onload = function() {
                var tabObj = new YAHOO.widget.TabView("myTab");
                for (var i=0; i<tabObj.get("tabs").length; i++) {
                    tabObj.getTab(i).set("activationEvent", "mouseover");
                }
            }
        // --></script>
    </head>
    <body>
    <h1>YUIタブビューサンプル （まとめてイベント設定）</h1>
    <div id="myTab" class="yui-navset">
        <ul class="yui-nav">
            <li class="selected"><a href="#tab1">タブ1</a></li>
            <li><a href="#tab2">タブ2</a></li>
            <li><a href="#tab3">タブ3</a></li>
            <li><a href="#tab4">タブ4</a></li>
        </ul>
        <div class="yui-content">
            <div><p>タブ1の内容です。マウスオーバーで切り替わります。</p></div>
            <div><p>タブ2の内容です。簡単にタブインターフェースが実現できます。</p></div>
            <div><p>タブ3の内容です。</p></div>
            <div><p>タブ4の内容です。最後のタブです。</p></div>
        </div>
    </div>
    </body>
</html>

非同期で内容を読み込む

Yahoo! UI Libraryのタブ機能の特長の1つとして非同期でタブ内容を読み込ませることができます。非同期で読み込ませるにはHTMLタグではなく、スクリプトでタブを生成します。生成する際にdataSrcオプションで、読み込むファイルのURLを指定します。ただし、非同期通信上の制約でサーバ上の同一ドメイン上にあるファイルしか読み込ませることができません。

また、非同期で読み込ませる場合に、内容が変化しないものに関してはローカルキャッシュさせ、キャッシュした内容を利用するかどうかも指定できます。自動的にキャッシュし、キャッシュされたデータを利用するにはcacheDataオプションでcacheData : trueを指定します。株価情報など更新頻度が高いものは、キャッシュされるとかえってよくないので、cacheData : falseを指定します。デフォルトではcacheDataはfalseとなっており、キャッシュしないようになっています。サンプル08では非同期で個別にタブに対応するテキストファイルを読み込ませています。


サンプル08の実行結果	非同期通信で

タブが読み込まれる

Yahoo! UI Libraryのタブ機能は高機能な割に手軽に使うことができるため、いろいろな場面で利用できるでしょう。ぜひ、活用してみてください。

サンプル08

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>YUIタブビューサンプル</title>
        <link rel="stylesheet" type="text/css" href="css/tabview.css"> 
        <link rel="stylesheet" type="text/css" href="css/border_tabs.css"> 
        <link rel="stylesheet" type="text/css" href="css/main.css"> 
        <script type="text/javascript" src="js/yahoo-dom-event.js"></script> 
        <script type="text/javascript" src="js/element-beta.js"></script> 
        <script type="text/javascript" src="js/connection.js"></script> 
        <script type="text/javascript" src="js/tabview.js"></script> 
        <script type="text/javascript"><!--
            window.onload = function() {
                var tabObj = new YAHOO.widget.TabView("myTab");
                tabObj.addTab(new YAHOO.widget.Tab({
                    label: "タブ1", 
                    dataSrc: "./text/1.txt",
                    cacheData : true,
                    active: true
                }));

                tabObj.addTab(new YAHOO.widget.Tab({
                    label: "タブ2", 
                    dataSrc: "./text/2.txt",
                    cacheData : true
                }));

                tabObj.addTab(new YAHOO.widget.Tab({
                    label: "タブ3", 
                    dataSrc: "./text/3.txt",
                    cacheData : true
                }));
                tabObj.appendTo(document.body);
            }
        // --></script>
    </head>
    <body>
    <h1>YUIタブビューサンプル （内容を非同期で読み込み）</h1>
    <div id="myTab" class="yui-navset">
    </body>
</html>