Tabby

JavaScript

軽量でシンプルなタブメニューを実装できるjQueryプラグイン「Tabby」

とても軽量でシンプルなタブメニューを実装できるjQueryプラグイン「Tabby」をご紹介します。ボタンタイプのベーシックなものから、水平に表示されるスタイル、垂直に表示されるスタイルがあります。マークアップもシンプルなので使いやすそうですね。

[ads_center]

使い方

以下はベーシックなタブメニューです。

Tabbyの使い方

HTMLです。data-targetに各コンテンツのidを指定してあげます。

<div class="tabs">
    <button data-target="#tab1">タブ1</button>
    <button data-target="#tab2">タブ2</button>
    <button data-target="#tab3">タブ3</button>
</div>

<div class="tabs-content">
    <div class="tabs-pane active" id="tab1">
        ・・・コンテンツ・・・
    </div>

    <div class="tabs-pane" id="tab2">
        ・・・コンテンツ・・・
    </div>

    <div class="tabs-pane" id="tab3">
        ・・・コンテンツ・・・
    </div>
</div>

他にも水平タイプのものや垂直タイプのスタイルもあります。ダウンロードや詳しい使い方は公式サイトで確認することができます。

関連記事

  1. stickyTableColumns

    JavaScript

    水平(左右)にスライドできるテーブル実装「stickyTableColumns」

    stickyTableColumnsは、データ量の多い表をページで表現…

  2. jQuery Hero Slider Plugin
  3. no-image

    JavaScript

    フォームに文字制限を設定できるjQueryプラグイン「Character Limit」

    Character Limitは、フォーム要素に文字制限を設定するため…

  4. jQuery Countdown

    JavaScript

    手軽に使えるカウントダウンタイマーを実装できる「jQuery Countdown」

    jQuery Countdownは手軽に使えるカウントダウンタイマーを…

  5. FlipClock.js

    JavaScript

    時計・タイマー・カウントダウンを実装できるjQueryプラグイン「FlipClock.js」

    FlipClock.jsというjQueryプラグインを使えば、時計・タ…

  6. JavaScript

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

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

コメント

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

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

最近の記事

  1. リンツ リンドール
  2. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  3. ブラジルイパネマ

アーカイブ

PAGE TOP