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. no-image

    JavaScript

    かっこいいニュース・バナースライドショー実装「jQuery News Slider」

    jQuery News Sliderは、かっこいいニュース・バナースラ…

  2. popModal

    JavaScript

    6種類のモーダルウィンドウを実装できる「popModal」

    popModalは6種類のモーダルウィンドウを実装することができるjQ…

  3. jQuery Parallax

    JavaScript

    美しいパララックススクロールエフェクトを実装できる「jQuery Parallax」

    jQuery Parallaxは美しいパララックススクロールエフェクト…

  4. JavaScript

    リストのテキストを1つずつ垂直にスライドさせていくjQueryのティッカー「Totem Ticker…

    おもしろいですね、これ。リスト化したli要素を1つずつ垂直方向にスライ…

  5. no-image

    JavaScript

    多彩なエフェクトを備えたjQueryスライダープラグイン「camera-slider」

    camera-sliderは多彩なエフェクトを備えた美しいスライドショ…

コメント

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

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

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP