bl6.jp

いい感じのタブパネルを実装できるjQueryプラグイン「Organic Tabs」を使ってみました。コンテンツの量に応じてパネルが伸びたり縮んだりする可変式タブパネルです。タブパネル自体コンテンツをすっきりまとめてくれて、場所もそんなに取らなくていいのでとても便利ですね。ということでOrganic Tabsの簡単な使い方です。

[ads_center]

使い方

以下のURLからファイルをダウンロードします。実際のデモもありますので見たい方はどうぞ。

Organic Tabs | CSS-Tricks

いつも通りhead内にjQuery本体とダウンロードしたjsファイルを読み込みます。今回はCSSファイルもあるのでそちらも合わせて読み込みます。

<link rel="stylesheet" href="css/style.css">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="js/organictabs.jquery.js"></script>
<script>
    $(function() {
        $("#example-one").organicTabs();
        $("#example-two").organicTabs({
            "speed": 200
        });
    });
</script>

example-oneとexample-twoと2パターンあるので1つだけでいい場合はどちらか1つを読み込めばいいかと思います。次にHTMLを記述します。

<div id="page-wrap">
    <h2>タブパネル1</h2>
    <div id="example-one">
        <ul class="nav">
            <li class="nav-one"><a href="#tab1" class="current">タブ1</a></li>
            <li class="nav-two"><a href="#tab2">タブ2</a></li>
            <li class="nav-three"><a href="#tab3">タブ3</a></li>
            <li class="nav-four last"><a href="#tab4">タブ4</a></li>
        </ul>
    <div class="list-wrap">
        <ul id="tab1">
            <li><a href="#">タブ1-リスト</a></li>
            <li><a href="#">タブ1-リスト</a></li>
            <li><a href="#">タブ1-リスト</a></li>
            <li><a href="#">タブ1-リスト</a></li>
            <li><a href="#">タブ1-リスト</a></li>
            <li><a href="#">タブ1-リスト</a></li>
            <li><a href="#">タブ1-リスト</a></li>
        </ul>
        <ul id="tab2" class="hide">
            <li><a href="#">タブ2-リスト</a></li>
            <li><a href="#">タブ2-リスト</a></li>
            <li><a href="#">タブ2-リスト</a></li>
            <li><a href="#">タブ2-リスト</a></li>
            <li><a href="#">タブ2-リスト</a></li>
            <li><a href="#">タブ2-リスト</a></li>
            <li><a href="#">タブ2-リスト</a></li>
            <li><a href="#">タブ2-リスト</a></li>
            <li><a href="#">タブ2-リスト</a></li>
            <li><a href="#">タブ2-リスト</a></li>
            <li><a href="#">タブ2-リスト</a></li>
        </ul>
        <ul id="tab3" class="hide">
            <li><a href="#">タブ3-リスト</a></li>
            <li><a href="#">タブ3-リスト</a></li>
            <li><a href="#">タブ3-リスト</a></li>
            <li><a href="#">タブ3-リスト</a></li>
            <li><a href="#">タブ3-リスト</a></li>
            <li><a href="#">タブ3-リスト</a></li>
            <li><a href="#">タブ3-リスト</a></li>
            <li><a href="#">タブ3-リスト</a></li>
        </ul>
        <ul id="tab4" class="hide">
            <li><a href="#">タブ4-リスト</a></li>
            <li><a href="#">タブ4-リスト</a></li>
            <li><a href="#">タブ4-リスト</a></li>
            <li><a href="#">タブ4-リスト</a></li>
            <li><a href="#">タブ4-リスト</a></li>
            <li><a href="#">タブ4-リスト</a></li>
        </ul>
    </div>
    </div>

    <h2>タブパネル2</h2>
    <div id="example-two">
        <ul class="nav">
            <li class="nav-one"><a href="#tab1" class="current">タブ1</a></li>
            <li class="nav-two"><a href="#tab2">タブ2</a></li>
            <li class="nav-three"><a href="#tab3">タブ3</a></li>
            <li class="nav-four last"><a href="#tab4">タブ4</a></li>
        </ul>
    <div class="list-wrap">
        <ul id="tab1">
            <li><a href="#">タブ1-リスト</a></li>
            <li><a href="#">タブ1-リスト</a></li>
            <li><a href="#">タブ1-リスト</a></li>
            <li><a href="#">タブ1-リスト</a></li>
            <li><a href="#">タブ1-リスト</a></li>
            <li><a href="#">タブ1-リスト</a></li>
            <li><a href="#">タブ1-リスト</a></li>
        </ul>
        <ul id="tab2" class="hide">
            <li><a href="#">タブ2-リスト</a></li>
            <li><a href="#">タブ2-リスト</a></li>
            <li><a href="#">タブ2-リスト</a></li>
            <li><a href="#">タブ2-リスト</a></li>
            <li><a href="#">タブ2-リスト</a></li>
            <li><a href="#">タブ2-リスト</a></li>
            <li><a href="#">タブ2-リスト</a></li>
            <li><a href="#">タブ2-リスト</a></li>
            <li><a href="#">タブ2-リスト</a></li>
            <li><a href="#">タブ2-リスト</a></li>
            <li><a href="#">タブ2-リスト</a></li>
        </ul>
        <ul id="tab3" class="hide">
            <li><a href="#">タブ3-リスト</a></li>
            <li><a href="#">タブ3-リスト</a></li>
            <li><a href="#">タブ3-リスト</a></li>
            <li><a href="#">タブ3-リスト</a></li>
            <li><a href="#">タブ3-リスト</a></li>
            <li><a href="#">タブ3-リスト</a></li>
            <li><a href="#">タブ3-リスト</a></li>
            <li><a href="#">タブ3-リスト</a></li>
        </ul>
        <ul id="tab4" class="hide">
            <li><a href="#">タブ4-リスト</a></li>
            <li><a href="#">タブ4-リスト</a></li>
            <li><a href="#">タブ4-リスト</a></li>
            <li><a href="#">タブ4-リスト</a></li>
            <li><a href="#">タブ4-リスト</a></li>
            <li><a href="#">タブ4-リスト</a></li>
        </ul>
    </div>
    </div>
</div>

これで、ブラウザで確認してみるとこんな感じになります。こちらが#example-oneです。

こちらが#example-twoです。

コンテンツの内容量によってスムーズに伸縮するのでとてもいい感じです。オプションにある以下の数値を変更すればアニメーションのスピードを変更できます。

 "speed": 200

数値が高いほど遅くなり、低いほど早くなります。タブの色やサイズなんかはCSSを弄れば自分好みにカスタマイズもできそうですね。