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>

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

2013年上半期jQueryプラグインまとめ2013年上半期に紹介したjQueryプラグイン50選まとめ前のページ

タッチにも対応しているシンプルなjQueryスライダー「Excolo Slider」次のページExcolo Slider

関連記事

  1. HTML5 Sortable

    JavaScript

    リストをドラッグ&ドロップで並べ替えることができるjQueryプラグイン「HTML5 So…

    リスト化した要素をドラッグ&ドロップで並べ替えることができるjQuer…

  2. Animate Plus

    JavaScript

    CSS、SVGを使った多彩なアニメーションを実装できる「Animate Plus」

    Animate PlusはCSS、SVGを使った多彩なアニメーションを…

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

    JavaScript

    jQueryのif文を使ってタグやクラス名によって条件分岐するやり方

    jQueryで普通にif文を使った条件分岐のやり方です。指定したタグや…

  4. Warp drive jQuery plugin
  5. JavaScript

    レスポンシブに対応している軽量のjQueryスライダー「Unslider」

    とても軽量でレスポンシブにも対応しているjQueryスライダー「Uns…

  6. jquery.horizonScroll.js

コメント

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

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

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP