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制作でかなり役立ちそうですね。ダウンロードや詳細は以下からどうぞ。

MacでSDカードをフォーマットMacでSDカードをHDDとして使用するためにフォーマットしてみる前のページ

3Mの耳栓「1100」を購入次のページ3M耳栓1100

関連記事

  1. Justified Gallery
  2. stickUp
  3. Complexify

    JavaScript

    パスワードの強さを視覚的にフィードバックしてくれる「Complexify」

    Complexifyはユーザーが入力したパスワードの強さを視覚的にフィ…

  4. Vague.js

    JavaScript

    要素をぼかすことができるjQueryプラグイン「Vague.js」

    要素をぼかすことができるjQueryプラグイン「Vague.js」が面…

  5. jQuery touchSwipe Carousel
  6. Quill

    JavaScript

    高機能なWYSIWYGエディタを実装できる「Quill」

    Quillは豊富なAPIとカスタマイズ性に優れた高機能なWYSIWYG…

コメント

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

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

最近の記事

  1. MacBook AirとHyperJuiceのモバイルバッテリー
  2. サラテクト 虫よけシート
  3. Apple SDカードリーダー
  4. 10種の野菜と5種のビーンズ サラダラップとドリップコーヒー
  5. EOS RP
PAGE TOP