jQuery Responsive Tabs

JavaScript

タブからアコーディオンに切り替わるレスポンシブ対応のjQueryプラグイン「jQuery Responsive Tabs」

jQuery Responsive TabsというjQueryプラグインを使えば、タブパネルからアコーディオンに切り替わるレスポンシブに対応したタブを実装することができます。画面の横幅を縮小していくと、垂直型のアコーディオンになります。スマホではこちらの方が見やすいので閲覧する側も嬉しいですね。

[ads_center]

jQuery Responsive Tabsの使い方

PCなどの閲覧時ではこのように一般的なタブパネルになっています。

jQuery Responsive Tabsの使い方

特定のブレイクポイントに来るとこんな感じでアコーディオンに切り替わります。

jQuery Responsive Tabsの使い方

使い方はとてもシンプルです。jQueryとプラグインを読み込んだら以下のようにHTMLをマークアップしていきます。

<div id="sample">
    <ul>
        <li><a href="#tab-1">...</a></li>
        <li><a href="#tab-2">...</a></li>
        <!-- ・・・中略・・・ -->
    </ul>

    <div id="tab-1">...</div>
    <div id="tab-2">...</div>
    <!-- ・・・中略・・・ -->
</div>

jQuery Responsive Tabsをセット。

$('#sample').responsiveTabs({
    startCollapsed: 'accordion'
});

タブのコンテンツはタブ切替時にアニメーションしながら切り替わっていくので、瞬時に違うタブメニューに変わったんだなっていうのが分かります。この辺りもすごくいいなって思いました。

というわけで、レスポンシブに対応しているタブパネルを実装したい時なんかに役立つプラグインですね。

jQuery Responsive Tabs

関連記事

  1. no-image

    JavaScript

    ウィークデイ(週)のオプションを作成できる「jquery-weekdays」

    jquery-weekdaysはウィークデイ(週)のオプションを作成で…

  2. no-image

    JavaScript

    水平・垂直に対応したカルーセルスライドショー「jCarousel」

    jCarouselは水平・垂直に対応したカルーセルスライドショーを実装…

  3. jQuery Elastic Grid
  4. JQuery lightSlider

    JavaScript

    軽量でレスポンシブなサムネイルナビ付きのスライダー「JQuery lightSlider」

    JQuery lightSliderは軽量でレスポンシブに対応したサム…

  5. FSVS(Full Screen Vertical Scroller)
  6. no-image

    JavaScript

    高性能なイメージビューアを実装できる「PhotoViewer」

    PhotoViewerは高性能なイメージビューアを実装できるJSプラグ…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP