Yahoo! UI Library 3（YUI3）のウィジェット

Yahoo! UI Library Ver.3 を使ってみよう（7）

タブパネル

　タブパネルをスムーズに作成できるようにサポートしたモジュールTabviewの説明を行います。タブを押してページをめくる例題を作成してみましょう。以下が例題起動時の画面です。V3ではV3.1.0から導入されました。

図4：例題起動時画面

　 以下のリスト5を見てください。

［リスト5］tabviewの例題（WT_tabview.html）

YUI().use("tabview", function(Y) {
    var tabview = new Y.TabView({srcNode:'#demo'});	//（1）
    tabview.render();		//（2）
});
</script>
</head>
<body class="yui3-skin-sam">
<h4>tabview</h4><br>
<div id="demo">		//（3）
    <ul>
        <li><a href="#top">トップ</a></li>
        <li><a href="#list">一覧表</a></li>
        <li><a href="#ask">お問い合せ</a></li>
    </ul>
    <div>
        <div id="top"><p>トップページ</p></div>
        <div id="list"><p>一覧表ページ</p></div>
        <div id="ask"><p>お問い合せページ</p></div>
    </div>
</div>
</body>

　（1）で表示場所を指定し、（2）で表示します。tabviewを使用するためには、DOMの書き方にルールがあります。（3）を見てください。<div id="demo">で囲っている部分があります。<ul>で題名と飛び先を指定します。</ul>の次の行で、飛び先には、それぞれのコンテンツを書いています。CSSは、bodyにclass="yui3-skin-sam"を指定しています。この例では表示内容をbodyにかきましたが、表示内容もすべてYUI3の中で書くこともできます。以下のリスト6を見てください。

［リスト6］tabviewの例題1（WT_tabview1.html）

YUI().use("tabview", function(Y) {
    var tabview = new Y.TabView({
        children: [{
            label: 'トップ',
            content: '<p>トップページ</p>'
        }, {
            label: '一覧表',
            content: '<p>一覧表ページ</p>'
        }, {
            label: 'お問い合せ',
            content: '<p>お問い合せページ</p>'
        }]
    });
    tabview.render('#demo');
});

　表示内容を動的に変更したいときに便利です。

まとめ

　ウイジェットのモジュールを説明しました。モジュールの中でも、作成してすぐ形が見えるものは、とても親しみやすいと思います。次回は、プラグインのモジュールについて説明したいと思います。