タブレイアウト - 表示項目の多い画面で大活躍

1画面で大量の項目を表示する必要がある場合、タブレイアウトを使用することで煩雑な画面をすっきり見せることが可能となる。特にデータの詳細画面は全項目の情報を表示する場合が多いので、ぜひ組み込めるようになっておきたいところだ。

タブレイアウトはjQuery UIでは「tabs」、Dojoでは「TabContainer」、Yahoo UIでは「TabView」という名で実装されている。

jQuery UIの場合、<ul>、<li>でタブナビゲーションを定義し、<div>でタブレイアウトの中を構成する。あとはtabs()メソッドを呼びだすだけだ。

HTMLファイル - tabs-jquery.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>tabs / jQuery UI</title>
<link rel="stylesheet" type="text/css" href="./js/jquery/themes/flora/flora.tabs.css" />
<script type="text/javascript" src="./js/jquery/jquery-1.2.6.js"></script>
<script type="text/javascript" src="./js/jquery/ui/ui.core.js"></script>
<script type="text/javascript" src="./js/jquery/ui/ui.tabs.js"></script>
<script type="text/javascript">
<!--
    $(document).ready
    (
        function()
        {
            $('#tabs ul').tabs();
        }
    );
-->
</script>
</head>

<body>

<h1>tabs / jQuery UI</h1>

<div id="tabs">
    <ul>
        <li><a href="#tab_1">タブ1</a></li>
        <li><a href="#tab_2">タブ2</a></li>
        <li><a href="#tab_3">タブ3</a></li>
    </ul>
    <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>

</body>

</html>

Firefoxでの動作イメージ

Internet Explorerでの動作イメージ

チェインメソッドをうまくつかうことでさまざまな視覚効果を簡単に追記できるのが嬉しいところだ。好みのデザインにするには、ThemeRollerを使用してテーマを一式作成するのが便利だろう。