Yahoo UIの場合、スクリプトで実装する方法とマークアップで実装する方法がある。ここではjQuery同様、<div>、<ul>を利用したタブレイアウトの実装方法を紹介する。

HTMLファイル - tabs-yui.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>TabView / Yahoo UI</title>
<link rel="stylesheet" type="text/css" href="./js/yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="./js/yui/build/tabview/assets/skins/sam/tabview.css" />
<script type="text/javascript" src="./js/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="./js/yui/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="./js/yui/build/tabview/tabview-min.js"></script>
<script type="text/javascript">
<!--
YAHOO.util.Event.onDOMReady
(
    function()
    {
        var tabView = new YAHOO.widget.TabView('tab');
    }
);
-->
</script>
</head>

<body class="yui-skin-sam">

<h1>TabView / Yahoo UI</h1>

<div id="tab" class="yui-navset">
    <ul class="yui-nav">
        <li><a href="#tab_1">タブ1</a></li>
        <li class="selected"><a href="#tab_2">タブ2</a></li>
            <li><a href="#tab_3">タブ3</a></li>
        </ul>
    <div class="yui-content">
        <div id="tab_1"><p>タブ1のコンテンツ</p></div>
        <div id="tab_2"><p>タブ2のコンテンツ</p></div>
        <div id="tab_3"><p>タブ3のコンテンツ</p></div>
    </div>
</div>

</body>

</html>

Firefoxでの動作イメージ

Internet Explorerでの動作イメージ。Firefoxで閲覧したときと若干レイアウトが異なる

jQuery同様<ul>、<li>でタブナビゲーションを定義し、<div>でタブレイアウトの中を構成する。後はYAHOO.widget.TabViewで呼び出すだけだ。

タブレイアウトはどのライブラリでも比較的容易に組みこめる。画面に表示する項目が多すぎてデザインに苦労している方はぜひ導入を検討してみてほしい。