[JS]スマフォ・タブレットでの利用を前提に作られたタブを実装するスクリプト -Tabby

Post on:2013年7月1日

Tabbyのデモ

デモでは3つのシンプルなスタイルが楽しめます。
Chrome, Safari, Firefox, Operaなどのモダンブラウザ、IEは8+でご覧ください。

まずは、ベーシックなデモから。

Demo: ベーシックタイプ

タッチ操作での利便性を考えたボタンタイプのタブです。

続いて、汎用性の優れた水平型のタブ。

Demo: 水平型のタブ

デスクトップ用のブラウザでよく見かける水平型のタブで、デモはシンプルなデザインになっています。

最後は、垂直型。

Demo: 垂直型のタブ

タブレットやデスクトップなどの広いスクリーンでは垂直型で右側にコンテンツが表示され、小さいスクリーンでは水平型に表示されます。

Tabbyの使い方

ステップは2つです。

Step 1: 外部ファイル

当スタイルシートをhead内に、スクリプトとjQueryをbodyの下あたりに記述します。

<head>
    ...
    <link rel="stylesheet" href="tabby.css" type="text/css">
</head>
<body>
    ...
    <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
    <script src="tabby.js"></script>
</body>

Step 2: HTML

HTMLはデモをベースに紹介します。

Demo: ベーシックタイプ

タブはbutton要素、コンテンツはdiv要素で実装します。

<div class="tabs">
    <button data-target="#tab1">Superheroes</button>
    <button data-target="#tab2">Ice Cream</button>
    <button data-target="#tab3">Seasons</button>
</div>

<div class="tabs-content">
    <div class="tabs-pane active" id="tab1">
        Superheros
        ...
    </div>

    <div class="tabs-pane" id="tab2">
        Ice Cream
        ...
    </div>

    <div class="tabs-pane" id="tab3">
        Seasons
        ...
    </div>
</div>

Demo: 水平型のタブ

水平型は普段よく利用する実装方法で、タブはリスト要素、コンテンツはdiv要素です。

<ul class="tabs tabs-horizontal">
    <li class="active"><a data-target="#tab1" href="#">Superheroes</a></li>
    <li><a data-target="#tab2" href="#">Ice Cream</a></li>
    <li><a data-target="#tab3" href="#">Seasons</a></li>
</ul>

<div class="tabs-content">
    <div class="tabs-pane active" id="tab1">
        Superheros
        ...
    </div>

    <div class="tabs-pane" id="tab2">
        Ice Cream
        ...
    </div>

    <div class="tabs-pane" id="tab3">
        Seasons
        ...
    </div>
</div>

Demo: 垂直型のタブ

垂直型はタブとコンテンツにdivの入れ子を使用して実装します。

<div class="row">
    <div class="grid-2">
        <div class="tabs">
            <li class="active"><a data-target="#tab1" href="#">Superheroes</a></li>
            <li><a data-target="#tab2" href="#">Ice Cream</a></li>
            <li><a data-target="#tab3" href="#">Seasons</a></li>
        </div>
    </div>
    <div class="grid-4">
        <div class="tabs-content">
            <div class="tabs-pane active" id="tab1">
                Superheros
                ...
            </div>

            <div class="tabs-pane" id="tab2">
                Ice Cream
                ...
            </div>

            <div class="tabs-pane" id="tab3">
                Seasons
                ...
            </div>
        </div>
    </div>
</div>