Yahoo UI Library「タブビュー処理」

Yahoo UI Libraryには少ない領域で多くの情報を表示するためのタブビュー機能が用意されています。これはタブをクリックすることで決められた領域内の内容が変わるというものです。バージョン2.4.1ではβ版のelementライブラリを使用しているため、今後のバージョンでは使用するスクリプトファイル名の変更が必要になります（ただし、それがどのバージョンになるかは不明です）。また、バージョン2.3.0以前でタブビュー機能を利用していて、新たに2.4.1など新しいバージョンに以降する場合にはelementライブラリが必須になります。つまり、そのまま移行しただけでは動作しないので注意してください。
タブビューを表示するにはHTMLファイルで決められたフォーマットでタグを記述しておく必要があります。このフォーマットは以下のようになっています。

<div id="タブのID名" class="yui-navset">
<ul class="yui-nav">
<li><a href="#tab1"><em>タブ1の名前</em></a></li>
<li><a href="#tab2"><em>タブ2の名前</em></a></li>
<li><a href="#tab3"><em>タブ3の名前</em></a></li>
　　　　　　：（表示するタブの数だけ列記）
</ul>
<div class="yui-content">
<div><p>タブ1の内容</p></div>
<div><p>タブ2の内容</p></div>
<div><p>タブ3の内容</p></div>
　　　　　　：（表示するタブ内容の数だけ列記）
</div>
</div>

このフォーマットに従って記述したらプログラムでタブビューを生成します。タブビューの生成はnew YAHOO.widget.TabView()を使い、パラメータに「タブのID名」を指定します。また、<body>タグにはclass="yui-skin-sam"を指定しておかないと外観が綺麗に表示されません。
それと、最初に表示しておくタブを指定しておかなければいけません。これはタブの<li>タグに class="selected"を指定しておきます。
実際のサンプルは以下のようになります（サンプル01を実行する）。

【サンプル01】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.4.1/build/tabview/assets/skins/sam/tabview.css">
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/tabview/tabview-min.js"></script>
<script type="text/javascript"></script>
</head>
<body class="yui-skin-sam">
<h1>タブビュー表示</h1>
<div id="myTab" class="yui-navset">
<ul class="yui-nav">
<li class="selected"><a href="#tab1"><em>Yahoo UI</em></a></li>
<li><a href="#tab2"><em>Prototype</em></a></li>
<li><a href="#tab3"><em>jQuery</em></a></li>
</ul>
<div class="yui-content">
<div><p>米国Yahooが提供しています。</p></div>
<div><p>一番多く利用されているライブラリです。</p></div>
<div><p>プログラムが短くて済む強力なライブラリです。</p></div>
</div>
</div>
</body>
</html>

HTMLタグで用意されたものにプログラムから新たにタブと内容を追加することもできます（1から作成することも可能です）。
new YAHOO.widget.TabView()でタブビューオブジェクトが生成され戻り値として返されます。このオブジェクトのaddTab()メソッドを使って自由にタブを追加することができます。
addTab()のパラメータにはnew YAHOO.widget.Tab()を指定します。これにより新たなタブが追加されます。ただし、単純にタブが追加されるだけでタブのラベル名や内容は何もありません。そこでnew YAHOO.widget.Tab()のパラメータを指定します。パラメータは{プロパティ名:値}の形式で指定し、複数ある場合には{プロパティ名1:値1,プロパティ名2:値2,...,プロパティ名n:値n}のようにカンマ(,)で区切って列記します。
タブの名称を指定する場合にはlabelを使って指定します。タブの内容はcontentを使って指定します。
実際のサンプルは以下のようになります。（サンプル02を実行する）

【サンプル02】
YAHOO.util.Event.addListener(window, "load", function(){
var myUItab = new YAHOO.widget.TabView("myTab");
myUItab.addTab(new YAHOO.widget.Tab({
label : "MooTools",
content : "高速な動作でエフェクト機能が充実しているライブラリです"
}));
});

HTMLであらかじめ表示しておくタブを指定しましたが、プログラムによって指定することもできます。例えばサンプル02で追加した新しいタブを最初から表示させておく場合にはnew YAHOO.widget.Tab()のオプションでactive:trueを指定します。falseにすると他のタブが表示されることになります。
実際のサンプルは以下のようになります。（サンプル03を実行する）

【サンプル03】
YAHOO.util.Event.addListener(window, "load", function(){
var myUItab = new YAHOO.widget.TabView("myTab");
myUItab.addTab(new YAHOO.widget.Tab({
label : "MooTools",
content : "高速な動作でエフェクト機能が充実しているライブラリです",
active: true
}));
});

新たに追加したタブではなく既存のタブビューで特定のタブを最初に表示したい場合にはnew YAHOO.widget.TabView()のオプションのactiveIndexに表示するタブの番号を指定します。ただし、0は指定しても最初のタブは表示されませんので、1より大きい値を指定する必要があります。1を指定すると最初のタブではなく2番目のタブが表示されることになります。このため、HTMLタグでは最初のタブに<li class="selected">を指定しておくのが安全でしょう。
実際のサンプルは以下のようになります。（サンプル04を実行する）

【サンプル04】
YAHOO.util.Event.addListener(window, "load", function(){
new YAHOO.widget.TabView("myTab", { activeIndex : 2 });
});

[目次へ]

タブを表示する