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

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

関連記事

  1. Fly to

    JavaScript

    カートに入れた際に飛んでいくエフェクトのjQueryプラグイン「Fly to」

    Fly toは商品をカートに入れた際にカートまで飛んでいくエフェクトを…

  2. Dependent / Cascading Select List with jQuery Select2

    JavaScript

    選択内容によりその下の内容も変化するセレクトボックス「Dependent / Cascading S…

    セレクトボックスを強力でカスタマイズ性が高く、そして充実させる人気のj…

  3. ax5ui-menu

    JavaScript

    カスタマイズしやすいコンテキストメニューを実装できる「ax5ui-menu」

    ax5ui-menuはカスタマイズしやすいシンプルなコンテキストメニュ…

  4. WebSnowjq.js

    JavaScript

    Webページに雪を降らせてくれるjQueryプラグイン「WebSnowjq.js」

    WebSnowjq.jsはWebページの中に雪を降らせることができるj…

  5. PopCircle
  6. Owl Carousel 2

    JavaScript

    美しいレスポンシブなカルーセルスライダーを実装できる「Owl Carousel 2」

    Owl Carousel 2は、美しいレスポンシブなカルーセルスライダ…

コメント

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

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

最近の記事

  1. YAECA ワイドテーパードデニム 10-13WW
  2. ADR-3ML39シリーズ
  3. キュレル モイスチャーバーム
  4. FUJIFILM X-Pro3
  5. iPhone 11 ProとApple Watch Hermès

アーカイブ

PAGE TOP