[JS]レスポンシブ対応、グリッドベースの進化したタブ型コンテンツを実装できるスクリプト -GridTab
Post on:2017年2月2日
sponsors
タブ型コンテンツのレイアウトも進化しています。
通常のタブ、天地のタブ、カード型レイアウトのようなタブなど、グリッドベースのさまざまなレイアウトに対応したタブを実装できるスクリプトを紹介します。
GridTabのデモ
GridTabは通常のタブ型レイアウトだけでなく、グリッド型にレイアウトすることもでき、スムーズなアニメーションでコンテンツを表示します。
グリッド型レイアウトのデモ
レスポンシブ対応で、表示サイズに合わせて横一行のアイテム数が変化します。
タブ型レイアウトのデモ
通常のタブ型では、タブを天地に配置できます。
入れ子のタブのデモ
タブは入れ子も可能で、アクティブ時のタブで変更したタブは非アクティブ時にも保持されます。
コントローラーとスクロール
タブ操作はタブだけでなく、スクロールしてコンテンツを変化させることも可能。
トリガーの指定
タブを切り替えるトリガーを設定でき、カードのようなレイアウトにも対応しています。
GridTabの使い方
Step 1: 外部ファイル
当スタイルシート・スクリプトとjQueryを外部ファイルとして記述します。
|
1 2 3 4 5 6 7 8 9 10 |
<head> <link rel="stylesheet" type="text/css" href="gridtab.min.css"/> </head> <body> ... コンテンツ ... <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="gridtab.min.js"></script> </body> |
Step 2: HTML
タブとタブのコンテンツはdl要素で実装し、dtがタブ、ddがタブの中身になります。
|
1 2 3 4 5 6 7 8 |
<dl id="gridtab-1"> <dt>Tab 1</dt> <dd>Tab 1 のコンテンツ</dd> <dt>Tab 2</dt> <dd>Tab 2 のコンテンツ</dd> <dt>Tab 3</dt> <dd>Tab 3 のコンテンツ</dd> </dl> |
Step 3: JavaScript
タブを実装した要素（#gridtab-1）をjQueryのセレクタで指定し、横一行のアイテム数を設定（grid:3）してスクリプトを実行します。
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function() { $('#gridtab-1').gridtab({ grid:3 }); }); </script> |
sponsors
