タブパネル
タブパネルをスムーズに作成できるようにサポートしたモジュール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');
});
表示内容を動的に変更したいときに便利です。
まとめ
ウイジェットのモジュールを説明しました。モジュールの中でも、作成してすぐ形が見えるものは、とても親しみやすいと思います。次回は、プラグインのモジュールについて説明したいと思います。
