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. no-image
  2. notie.js

    JavaScript

    クリーンでシンプルな通知を表示できる「notie.js」

    notie.jsはクリーンでシンプルな通知を表示できるJSプラグインで…

  3. tsorter

    JavaScript

    テーブルにソート(並べ替え)機能を実装できる「tsorter」

    tsorterは、JavaScriptを用いてHTMLテーブルにソート…

  4. no-image

    JavaScript

    続きを読むボタンを実装できる「ReadMorePlugin」

    ReadMorePluginは「続きを読む」、「もっと読む」、「Rea…

  5. iziModal

    JavaScript

    エレガント・レスポンシブ・フレキシブルでそのうえ軽量なモーダルウィンドウ「iziModal」

    iziModalはエレガント・レスポンシブ・フレキシブルなモーダルウィ…

  6. Tag-it

    JavaScript

    サジェスト機能を搭載したタグ編集ウィジェット「Tag-it」

    Tag-itはサジェスト機能を搭載したjQuery UIプラグインによ…

コメント

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

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

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP