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. Square Menu
  2. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで今まで紹介したjQueryプラグイン25選のまとめ 2011/09 – 201…

    2011年9月〜2012年3月までに当ブログで紹介したjQueryプラ…

  3. Parazoom

    JavaScript

    クールに拡大・チルトする画像ズーム「Parazoom」

    Parazoomはクールに拡大・チルトする画像ズーム機能を実装できるj…

  4. JavaScript

    色んなメニューやコンテンツをモーダルウィンドウで実装できるjQueryプラグイン「Pop Easy」…

    お洒落で可愛らしいjQueryプラグインを見つけたのでご紹介します。ロ…

  5. Pilpil

    JavaScript

    プログレッシブ形式で画像表示時間を短縮してくれる「Pilpil」

    Pilpilは、ページの画像表示の時間を短縮するためのJSライブラリで…

  6. JavaScript

    指定した要素をパカパカと点滅させることができる「jquery.flicker」

    とてもシンプルなプラグインだったのでメモがてらご紹介します。指定した要…

コメント

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

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

最近の記事

  1. JOK-350 WH
  2. 1460 COLLAR ウォータープルーフ 8ホールブーツ
  3. スターバックス ハウスブレンド

アーカイブ

PAGE TOP