JavaScript

コンテンツの量に合わせて伸び縮みするシンプルでいい感じのjQueryタブパネル「Organic Tabs」

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

[ads_center]

使い方

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

いつも通り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-one

こちらが#example-twoです。

example-two

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

 "speed": 200

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

関連記事

  1. JavaScript

    リスト化したテキストを円になるように配置してくれるjQueryプラグイン「Extremes」

    ちょっと面白そうだったので使ってみました。リスト化した各テキストを円を…

  2. no-image

    JavaScript

    ミニマルでダイナミックなLightboxプラグイン「darkbox.js」

    darkbox.jsはミニマルながらもダイナミックなLightbox風…

  3. Simply Modal Box
  4. Simple button checks

    JavaScript

    カスタマイズ可能なチェックボックスを実装できる「Simple button checks」

    Simple button checksはカスタマイズ可能なチェックボ…

  5. Responsive 3d Fold Scroll
  6. JavaScript

    シンプルな構成で簡単に実装することができるツールチップ「jQuery PowerTip」

    とてもシンプルな構成で簡単に実装することができるjQueryプラグイン…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. フェルメール展
  2. 上島珈琲店 No.11
  3. 銀座トリコロール

アーカイブ

PAGE TOP