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を弄れば自分好みにカスタマイズもできそうですね。

jQueryでウィンドウサイズによって処理を変えるjQueryの超基本的なアニメーションを試してみる前のページ

WordPressで特定の記事やページにカスタムフィールドで指定したCSS・JSファイルを読み込む次のページ

関連記事

  1. HoldOn.js

    JavaScript

    ユーザーの待機中に表示させるアニメーション実装「HoldOn.js」

    HoldOn.jsはユーザーが待機している間に表示させるアニメーション…

  2. Footnoted

    JavaScript

    脚注(注釈)を入れたい時に役立つjQueryプラグイン「Footnoted」

    FootnotedというjQueryプラグインは文章の中に脚注(注釈)…

  3. JavaScript

    ニュースやお知らせなどに使えるティッカー「jQuery WebTicker」

    ニュースやお知らせなんかに使えるティッカー「jQuery WebTic…

  4. InlineTweet.js

    JavaScript

    Webページのテキストにツイートリンクを作成できる「InlineTweet.js」

    InlineTweet.jsはWebページのテキストにツイートリンクを…

  5. notifier

    JavaScript

    Webサイトにシンプルな通知を表示させるjQueryプラグイン「notifier」

    notifierはWebサイトにシンプルな通知を表示させることができる…

  6. SimpleAccordion

    JavaScript

    シンプルなアコーディオンを実装できるjQueryプラグイン「SimpleAccordion」

    SimpleAccordionは、シンプルなアコーディオンを実装するこ…

コメント

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

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

最近の記事

  1. Aモーニングセット
  2. 白トリュフの塩パンやメロンパンなど
  3. 東京都現代美術館
  4. スーリア バターチキン
  5. そそそ 明太クリームそうめん

アーカイブ

PAGE TOP