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

    とてもシンプルで綺麗なツールチップを簡単に実装することができるjQueryプラグイン「gips」

    使いやすさや見た目もシンプルで綺麗なツールチップを実装することができる…

  2. topbar

    JavaScript

    画面上部に美しいプログレスバーを表示できる「topbar」

    topbarは、ページ読み込み時に画面上部に美しいプログレスバーを表示…

  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQuery(JavaScript)で指定した要素の子要素数や最大文字数を配列内から取得する

    jQueryで指定した要素の子要素の数やその文字数、文字なんかを配列に…

  4. Foxholder
  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで要素を挿入できるメソッドがたくさんあるので整理してみた

    jQueryでHTML要素を追加するメソッドが色々あるので整理するため…

  6. jQuery Flat Shadow

    JavaScript

    フラットデザインに影をつけてくれるjQueryプラグイン「jQuery Flat Shadow」

    フラットデザインのUIに影(シャドウ)をつけてくれるjQueryプラグ…

コメント

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

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

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP