päivittäin kukka

  • twitter
  • facebook
  • instaglam
  • rss

クリエイティブ

簡単にレスポンシブに対応したタブ&アコーディオンが実装できる「Responsive Tabs」

簡単にレスポンシブに対応したタブ&アコーディオンが実装できる「Responsive Tabs」

レスポンシブに対応したタブのjQueryプラグイン「Responsive Tabs」をご紹介します。CSSでブレークポイントを設定すると指定したサイズ以下はアコーディオンの形になります。シンプルなプラグインなのでカスタマイズもしやすいと思います。

簡単にレスポンシブに対応したタブ&アコーディオンが実装できる「Responsive Tabs」

使い方は、まずダウンロードしたjquery.responsiveTabs.jsとresponsive-tabs.cssをhtmlのhead内に読み込みます。デモと同じ形にする場合style.cssも読み込みます。jQuery1.7.0以上を使うのでjquery.jsも読み込んでおきます。

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>    
    <link type="text/css" rel="stylesheet" href="css/responsive-tabs.css" />
    <link type="text/css" rel="stylesheet" href="css/style.css" />
    <script src="js/jquery.responsiveTabs.js" type="text/javascript"></script>

次にhtmlのタブを作りたい場所に下記のようにマークアップします。

<div id="responsiveTabsDemo">
    <ul>
        <li><a href="#tab-1"> ここに見出しなど入ります。 </a></li>
        <li><a href="#tab-2"> ここに見出しなど入ります。 </a></li>
        <li><a href="#tab-3"> ここに見出しなど入ります。 </a></li>
    </ul>
    <div id="tab-1"> ここに内容が入ります。 </div>
    <div id="tab-2"> ここに内容が入ります。 </div>
    <div id="tab-3"> ここに内容が入ります。 </div>
</div>

最後にhead内のjquery.responsiveTabs.jsのスクリプトの下に、スクリプトをセットします。

    <script type="text/javascript">
        $(document).ready(function () {
	      $('#responsiveTabsDemo').responsiveTabs({
	            startCollapsed: 'accordion'
	      });
        });
    </script>

Responsive Tabsデモを用意しました。
画面を小さくするとタブがアコーディオンの形で表示されます。

ブレークポイントはダウンロードしたstyle.cssの下記のmax-widthの部分で変更することが出来ます。

/* Accordion responsive breakpoint */
@media only screen and (max-width: 768px) {
    .r-tabs .r-tabs-nav {
        display: none;
    }
}

アニメーションなどのオプションもあるので、これからタブを使う機会に役立ちそうな気がします。
対応ブラウザは、IE7+、Chrome、Firefox、Safari、Operaとなっています。

こちらの記事もよく読まれてます。