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. jCorner

    JavaScript

    フラットデザインに合う紙をめくったエフェクトを実装できるjQueryプラグイン「jCorner」

    jCornerというjQueryプラグインを使ってみました。フラットデ…

  2. no-image

    JavaScript

    軽量・高速でレスポンシブ対応のjQueryスライダー「partialViewSlider」

    partialViewSliderは左右にスライドする軽量・高速でレス…

  3. Fancy Input

    JavaScript

    かっこいいエフェクトのテキスト入力を実装できる「Fancy Input」

    Fancy Inputは、かっこいいエフェクトを備えたテキスト入力を実…

  4. no-image

    JavaScript

    インスタの写真や動画を表示できる軽量なjQueryプラグイン「Instagram Lite」

    Instagram Liteは指定したユーザーのインスタグラムの写真や…

  5. TextFit

    JavaScript

    テキストをコンテナ幅にすばやくフィットさせる「TextFit」

    TextFitは、一行または複数行のテキストをコンテナ幅(オプションに…

  6. Intense Images

コメント

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

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

最近の記事

  1. プラスシェル シティ04 フォールディングカメラケース
  2. enerpad AC-27KS
  3. KMS-160

アーカイブ

PAGE TOP