【ハウツー】Web開発者必見! jQuery UI ウィジェット3選 (4) 一度使ったら離れられない! タブレイアウトをさくっと導入 - UI/Tabs | エンタープライズ

お知らせ: 「マイポ」からのポイント交換を再開いたしました。(5月9日); メール会員100万人突破記念「春の読者プレゼント」結果発表は5月30日です。; マイナビベアがミクシィで部屋を作ったよ。ぜひ見てね！; 一緒に「マイナビ」で働きませんか。採用情報はこちらから。; 旅行券3万円、時計、ビジネスバッグなどが当たる！さらに応募者全員に50マイポもプレゼント

その先を伝える総合情報サイト
マイナビニュース

エンタープライズ

急上昇ワード

[

]

【ハウツー】

Web開発者必見! jQuery UI ウィジェット3選

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

富田宏昭　 [2008/07/09]

印刷

先頭
前へ
- 1
- 2
- 3
- 4
- ／4

一度使ったら離れられない! タブレイアウトをさくっと導入 - 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は煩雑なレイアウトになりがちな詳細画面などでその力を発揮するだろう。

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