[JS]コンテンツをデスクトップ時はタブに、タブレット・スマフォ時はアコーディオンにするスクリプト

Post on:2013年5月27日

シンプルなHTMLで、デスクトップ時は水平・垂直のタブに、タブレット・スマフォ時はアコーディオンに自動変更（指定も可）するレスポンシブ対応のjQueryのプラグインを紹介します。

サイトのキャプチャ

Easy Responsive Tabs to Accordion
Easy Responsive Tabs to Accordion -GitHub

特徴

  • レスポンシブ対応のタブをシンプルなHTMLで簡単に実装可能。
  • デスクトップ時はタブ、スマフォ時はアコーディオン。
  • 同じページに複数のタブをセット可能。
  • IE7+を含むクロスブラウザ対応。
  • デスクトップ、タブレット、スマフォのクロスデバイス対応。

デモ

デモはIE7+を含むデスクトップ、タブレット、スマフォでご覧ください。
まずは、デスクトップサイズで表示してみます。

デモのキャプチャ

デモページ：幅1200pxで表示

デスクトップ時はタブで、上：水平型、下：垂直型です。

デモのブレイクポイントは768pxに設定されており、小さくするとタブがアコーディオンに自動で変更されます。
タブレットサイズに変更してみます。

デモのキャプチャ

デモページ：幅768pxで表示

タブレット時には、コンテンツがタブからアコーディオンに変更されます。

最後はスマフォサイズで。

デモのキャプチャ

デモページ：幅480pxで表示

スマフォ時もアコーディオンです。
アコーディオンはアニメーションで開閉します。

使い方

実装は簡単です。
タブの基本的なスタイルは外部スタイルシートに含まれています。

Step 1: 外部ファイル

head内に「jquery.js」と当スクリプト・スタイルシートを記述します。

<head>
    <link type="text/css" rel="stylesheet" href="css/easy-responsive-tabs.css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
</head>

Step 2: HTML

タブをリスト要素、コンテンツをdiv要素で並列に実装し、div要素で括ります。

<div id="demoTab">          
    <ul class="resp-tabs-list">
        <li>タブ 1</li>
        <li>タブ 2</li>
        <li>タブ 3</li>
    </ul> 

    <div class="resp-tabs-container">                                                        
        <div>コンテンツ 1</div>
        <div>コンテンツ 2</div>
        <div>コンテンツ 3</div>
    </div>
=</div>

Step 3: JavaScript

ラッパーのdiv要素をjQueryのセレクタで指定し、スクリプトを実行します。

<script type="text/javascript">
    $(document).ready(function () {
        $('#demoTab').easyResponsiveTabs();
    });
</script>

オプションではコンテンツのタイプ、幅（自動・指定）などが設定できます。

<script type="text/javascript">
    $(document).ready(function () {
        $("#demoTab").easyResponsiveTabs({
            type: 'default', //タイプ、default：デフォルト, vertical：垂直, accordion：アコーディオン           
            width: 'auto', //幅、レスポンシブなのでauto、ピクセル指定も可
            fit: true   // コンテンツに100%フィットさせるかどうか
        });
    });
</script>

sponsors

top of page

©2024 coliss