タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」
「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。
デフォルトでは、768pxがブレイクポイントとなっており、それ以下になるとアコーディオンに変換してくれます。ダウンロード デモ
スクリプト
<script src="jquery.min.js" type="text/javascript"></script> <link href="easy-responsive-tabs.css" type="text/css" rel="stylesheet"> <script src="easyResponsiveTabs.js" type="text/javascript"></script>
実装(HTML)
<div id="htab"> <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>
実装(オプション設定)
// 768px以上 横タブ 768px以下アコーディオン <script type="text/javascript"> $('#htab').easyResponsiveTabs(); </script> // 768px以上 縦タブ 768px以下アコーディオン <script type="text/javascript"> $('#vtab').easyResponsiveTabs({ type: 'vertical', }); </script> // 常にアコーディオン <script type="text/javascript"> $('#acc').easyResponsiveTabs({ type: 'accordion', }); </script>
オプション
- type:表示タイプを指定
指定無し:横タブ vertical:縦タブ accordion:画面サイズによらず常にアコーディオンを表示 - width:タブとアコーディオンの横幅を指定
指定無し:auto(親要素に合わせる) '~px':横幅を指定する - fit:親要素に合わせる
true:合わせる false:合わせない
関連記事
-
入力数値の桁区切り挿入
ユーザに数値を入力してもらう際に区切りを入れるようにすると入力ミスを少なくすることができます。このソースは、SugarJSというものから拝借して少し改変しています。 実装 fu
-
入力されたメールアドレスのドメインをサジェストしてくれる「mailcheck.js」
「mailcheck.js」は、入力されたメールアドレスのドメインをサジェストしてくれるjQueryプラグインです。 ダウンロード スクリプト 実装 v
-
「jqPlot」 カスタマイズ
以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし
-
数値入力スライダー「jQuery Simple Slider」
「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余
-
テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」
「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード スクリプト
-
テキストエリアを自動的にリサイズしてくれる「Autosize」
「Autosize」は、テキストエリアのサイズを入力文字数によって自動的に変更してくれるjQueryプラグインです。標準では、枠を超える文字数を入力するとスクロールバーが表示されますが、かわりに建増し
-
テキストに装飾効果を付けるプラグイン
Burn #テキストに炎のような効果 Burn サイト デモ スクリプト 実装 AAA $(function () { $('#defa
-
シンプルな画像スライダー/ギャラリー用プラグイン
スライダーやギャラリーを実装できるjQueryプラグインのうちシンプルなものを集めてみました。ベースはシンプルですが、オプションなどを使用してカスタマイズが豊富なものもたくさんありますね。 シン
-
カウントダウン プラグイン
FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd
-
リストをインクリメント検索・ソートできる「List.js」
List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト
Comment
タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」 http://t.co/FieYYuhngT