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. reveal-it.js

    JavaScript

    左から右へテキストが美しくフェードイン表示する「reveal-it.js」

    reveal-it.jsはテキストが左から右へかけて徐々にフェードイン…

  2. Dependent Dropdown

    JavaScript

    ネストされたセレクトボックスを実装できる「Dependent Dropdown」

    Dependent Dropdownはネストされたセレクトボックスを実…

  3. Simple button checks

    JavaScript

    カスタマイズ可能なチェックボックスを実装できる「Simple button checks」

    Simple button checksはカスタマイズ可能なチェックボ…

  4. JavaScript

    アニメーション付きの水平・垂直プログレスメーターを実装できる「jQMeter」

    jQMeterはアニメーションが付いた水平・垂直のプログレスメーターを…

  5. SmartPhoto.js

    JavaScript

    レスポンシブなイメージビューアを実装できる「SmartPhoto.js」

    SmartPhoto.jsは、レスポンシブに対応したかっこいいイメージ…

  6. no-image

    JavaScript

    背景にSVGによるライン(線)をランダムで生成する「ckLine.js」

    ckLine.jsは背景にSVGによるライン(線)をランダムで生成する…

コメント

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

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

最近の記事

  1. ハワイ カウ
  2. ぼんしゃん全部入り
  3. ナイトロコーヒー
  4. チーズベーコンエッグバーガー
PAGE TOP