一度使ったら離れられない! タブレイアウトをさくっと導入 - UI/Tabs

UI/Tabsはタブレイアウトを作成するウィジェット。一画面に表示する項目数が多い場合、適切なグルーピングとUI/Tabsを使用することでユーザビリティを向上させることが可能となる。タブ内のコンテンツはHTML内に直接記述する方法のほかに、外部ファイルを呼び出すAjax modeがサポートされている。

HTMLファイル - tabs.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link href="./css/jquery-ui-themeroller.css" rel="stylesheet" type="text/css">
<title>jQuery UI 1.5.1 Demos / Tabs</title>
<script type="text/javascript" src="./js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="./js/jquery-ui-personalized-1.5.1.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() 
{
    $('#tabs > ul').tabs();
}
);
-->
</script>
</head>

<body>

<h1>Tabs</h1>

<div id="tabs">
    <ul>
        <li class="ui-tabs-nav-item"><a href="#fragment-1"><span>One</span></a></li>
        <li class="ui-tabs-nav-item"><a href="#fragment-2"><span>Two</span></a></li>
        <li class="ui-tabs-nav-item"><a href="#fragment-3"><span>Three</span></a></li>
    </ul>
    <div id="fragment-1">
        <p>First tab is active by default:</p>
        <pre><code>$('#example > ul').tabs();</code></pre>
    </div>
    <div id="fragment-2">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
    <div id="fragment-3">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
</div>

</body>

</html>

図9: Windows XP SP3 / Internet Explorer 7でアクセス。タブとコンテンツは少し離れて表示される

図10: FreeBSD 8-current / Firefox 3でアクセス。タブとコンテンツは離れずに表示される

IEとFirefoxでは見え方に若干の違いがあるので注意されたい。また実用性はさておき、タブの中にタブを入れるということも可能だ。

HTMLファイル - tabs_multi.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link href="./css/jquery-ui-themeroller.css" rel="stylesheet" type="text/css">
<title>jQuery UI 1.5.1 Demos / Tabs</title>
<script type="text/javascript" src="./js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="./js/jquery-ui-personalized-1.5.1.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() 
{
    $('#tabs > ul').tabs();
    $('#tabs_in_tab > ul').tabs();
}
);
-->
</script>
</head>

<body>

<h1>Tabs</h1>

<div id="tabs">
    <ul>
        <li class="ui-tabs-nav-item"><a href="#fragment-1"><span>One</span></a></li>
        <li class="ui-tabs-nav-item"><a href="#fragment-2"><span>Two</span></a></li>
        <li class="ui-tabs-nav-item"><a href="#fragment-3"><span>Three</span></a></li>
    </ul>
    <div id="fragment-1">
        <div id="tabs_in_tab">
            <ul>
                <li class="ui-tabs-nav-item"><a href="#fragment-1_m"><span>One</span></a></li>
                <li class="ui-tabs-nav-item"><a href="#fragment-2_m"><span>Two</span></a></li>
                <li class="ui-tabs-nav-item"><a href="#fragment-3_m"><span>Three</span></a></li>
            </ul>
            <div id="fragment-1_m">
                1-1
            </div>
            <div id="fragment-2_m">
                1-2
            </div>
            <div id="fragment-3_m">
                1-3
            </div>
        </div>
    </div>
    <div id="fragment-2">
        2-1
    </div>
    <div id="fragment-3">
        3-1
    </div>
</div>

</body>

</html>

図11: それぞれ固有のIDを持たせれば、タブの中にタブという実装も可能となる

使いどころを見極めて、場面ごとにあった実装を

今回紹介した3つのウィジェットはどれも汎用性が高く、工夫次第でさまざまな場面で活用することができる。UI/Datepickerはスケジュールの入力画面、UI/Dialogは画面遷移時・入力内容確認などの補助UI、UI/Tabsは煩雑なレイアウトになりがちな詳細画面などでその力を発揮するだろう。

これらウィジェットはシンプルでかつ強力であり、組み込むのも簡単だからつい多用したくなってしまう。しかしこうしたウィジェットを多用したサイトがかならずしもユーザにとって使いやすいかどうかと言われれば、それは別の問題だ。要所要所でどのウィジェットを使用すればいいのかを自分でしっかりと見極め、適切な場所で活用していきたい。