Easy Responsive Tabs to Accordion

JavaScript

レスポンシブ対応のタブとアコーディオンで切り替わるjQueryプラグイン「Easy Responsive Tabs to Accordion」

今すぐにでも使いたいjQueryプラグインを見つけたので備忘録。レスポンシブ対応のタブパネルを実装できる「Easy Responsive Tabs to Accordion」です。シンプル&軽量で素晴らしいですね。ブラウザ幅を縮小していくとタブパネルからアコーディオンに切り替わるのが特徴です。タブは水平・垂直も可能です。

[ads_center]

使い方

Easy Responsive Tabs to Accordion

このようなタブパネルからブラウザを縮小していくと。

Easy Responsive Tabs to Accordion

こんな感じでアコーディオンに切り替わります。ブレイクポイントは768pxになっています。以下はHTMLです。

<div id="demoTab">
    <ul class="resp-tabs-list">
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>

    <div class="resp-tabs-container">
        <div>...</div>
        <div>...</div>
        <div>...</div>
    </div>
</div>

easyResponsiveTabsを呼び出します。

$('#demoTab').easyResponsiveTabs();

オプションもあります。

$("#demoTab").easyResponsiveTabs({
    type: 'default', // default、vertical、accordionが指定可能       
    width: 'auto', // 幅を指定
    fit: true   // 100%コンテナにフィットさせるかどうか
});

同じページに複数のタブを設置するのも可能とのこと。これは今後のWeb制作でかなり役立ちそうですね。ダウンロードや詳細は以下からどうぞ。

関連記事

  1. Animsition
  2. no-image

    JavaScript

    フレキシブルでモバイルフレンドリーなフォトギャラリー実装「jGallery」

    jGalleryは、フレキシブルでモバイルフレンドリーなフォトギャラリ…

  3. no-image

    JavaScript

    リッチキャプションを備えたイメージビューア「CaptionBox」

    CaptionBoxは、リッチキャプションを備えた美しいイメージビュー…

  4. no-image

    JavaScript

    jQueryの代わりに使用できるマイクロJavaScriptライブラリ「Selector」

    Selectorは、jQueryの代わりに使用することができるマイクロ…

  5. Sidr

    JavaScript

    横からサイドメニューが現れるjQueryプラグイン「Sidr」

    面白いjQueryプラグインがあったのでメモがてらご紹介します。Sid…

コメント

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

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

最近の記事

  1. s9+
  2. SRS-LSR200
  3. QC30
  4. リンツ リンドール

アーカイブ

PAGE TOP