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. Tippy.js

    JavaScript

    軽量ながらも多彩なツールチップを実装できるJSライブラリ「Tippy.js」

    Tippy.jsは軽量でありながらも多彩なツールチップを実装することが…

  2. no-image

    JavaScript

    ダイナミックに回転してコンテンツが切り替わる「Page Scroll 3D」

    Page Scroll 3Dは、クルッとダイナミックに回転してコンテン…

  3. jQuery Scrollify

    JavaScript

    セクションごとにスクロールしてくれる「jQuery Scrollify」

    jQuery Scrollifyはセクションごとにスクロールしてくれる…

  4. mFancyTitle

    JavaScript

    ブラウザのタブにあるファビコンとタイトルをアニメーション化できる「mFancyTitle」

    mFancyTitleは、ブラウザのタブに表示されているファビコンとタ…

  5. Multipicker

    JavaScript

    要素を選択するときに直感的な操作を実現する「Multipicker」

    Multipickerは、日付や曜日、番号、その他さまざまな要素を選択…

  6. JavaScript

    jQueryプラグイン・2014年上半期56選まとめ

    気づいたら2014年も上半期が終わってしまいましたね。そんなわけで、2…

コメント

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

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

最近の記事

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

アーカイブ

PAGE TOP