Tabulous.js

JavaScript

色々なエフェクトのタブパネルが実装できるjQueryプラグイン「Tabulous.js」

素敵なタブパネルがあったのでメモがてらご紹介します。オプションを指定することで色々なエフェクトのタブパネルを実装できるjQueryプラグイン「Tabulous.js」です。Scale、Slide、Flipなどといった、どれもスムーズな動きでパネルを切り替えることができます。

[ads_center]

使い方

Tabulous.jsの使い方

実際のデモではこのようにシンプルなデザインが特徴的です。シンプルな分、テキストやエフェクトに注目しちゃいますね。

使い方は簡単です。head内にjQuery本体とプラグインを読み込みます。

<link href='tabulous.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="tabulous.js"></script>

続いてHTMLマークアップです。タブのブロックとコンテンツのブロックに分かれているのでスッキリして見やすいですね。

<div id="tabs">
    <ul>
        <li><a href="#tabs-1" title="">タブ1</a></li>
        <li><a href="#tabs-2" title="">タブ2</a></li>
        <li><a href="#tabs-3" title="">タブ3</a></li>
    </ul>

    <div id="tabs_container">
        <div id="tabs-1">
            <!-- コンテンツ -->
        </div>
        <div id="tabs-2">
            <!-- コンテンツ -->
        </div>
        <div id="tabs-3">
            <!-- コンテンツ -->
        </div>
    </div>
</div>

あとはプラグインをセットするだけです。

$(document).ready(function($) {
    $('#tabs').tabulous();
});

effectというオプションに好きなエフェクトを指定することで目的の動作に変更することができます。

$('#tabs').tabulous({
    effect: 'scale'
});

値には以下の項目を指定することができます。

  • scale
  • slideLeft
  • scaleUp
  • flip

タブパネルを実装する際は選択肢の一つとして覚えておきたいですね。

Vague.js要素をぼかすことができるjQueryプラグイン「Vague.js」前のページ

持ち運びに便利なAC・USB・乾電池で動作するコンパクトデスク扇風機 NPM-1081U(WH)次のページコンパクトデスク扇風機 NPM-1081U

関連記事

  1. ad-datepicker

    JavaScript

    アクセシブルなデートピッカーを実装できる「ad-datepicker」

    ad-datepickerはアクセシブルなデートピッカーを実装できるj…

  2. JavaScript

    軽量(5KB)で機能も色々あるjQueryのスライダー「MobilySlider」を使ってみる

    軽量なんですが、色々と機能もあるいい感じのjQueryプラグイン「Mo…

  3. JavaScript

    とても簡単にクールなドロップダウンを実装できるjQueryプラグイン「DropKick」

    個人的に使いやすそうだったので備忘録です。DropKickというjQu…

  4. Parallax Slider with jQuery
  5. JavaScript

    レスポンシブやスワイプ対応で完成度の高いスライダーのjQueryプラグイン「Slider Pro」

    Slider Proはレスポンシブやタッチ・スワイプに対応したスライダ…

  6. Skitter

    JavaScript

    豊富なアニメーションでカスタマイズ性に優れたスライドショーを実装できる「Skitter」

    Skitterは豊富なアニメーションでカスタマイズ性に優れたスライドシ…

コメント

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

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

最近の記事

  1. CAR-HLD12BK
  2. OWL-LPB6701LA
  3. cheero Power Mountain mini 30000mAh CHE-110

アーカイブ

PAGE TOP