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

    回転するアニメーション付きの円形ナビゲーションを実装できる「wheelnav.js」

    wheelnav.jsは回転する円形のナビゲーションを実装することがで…

  2. Letter by Letter JS

    JavaScript

    美しいフェードでテキストが徐々に表示されていく「Letter by Letter JS」

    Letter by Letter JSは美しいフェードでテキストを徐々…

  3. no-image

    JavaScript

    シンプルなバナースライドショーを実装できる「jsslider」

    jssliderはシンプルなバナースライドショーを実装できるjQuer…

  4. imgViewer2

    JavaScript

    画像のズームとパン機能を備えたjQueryプラグイン「imgViewer2」

    imgViewer2は画像のズームとパン機能を備えたjQueryプラグ…

  5. SuperEmbed.js

    JavaScript

    さまざまな埋め込み動画をレスポンシブで表示できる「SuperEmbed.js」

    SuperEmbed.jsは、さまざまな埋め込み型の動画をレスポンシブ…

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

    JavaScript

    jQueryのeachと$.eachの簡単な使い方のメモ

    jQueryのeachと$.eachの使い方のメモです。あんまり深い知…

コメント

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

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

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP