[JS]レスポンシブ対応、グリッドベースの進化したタブ型コンテンツを実装できるスクリプト -GridTab

タブ型コンテンツのレイアウトも進化しています。
通常のタブ、天地のタブ、カード型レイアウトのようなタブなど、グリッドベースのさまざまなレイアウトに対応したタブを実装できるスクリプトを紹介します。

サイトのキャプチャ

GridTab
GridTab -GitHub

GridTabのデモ

GridTabは通常のタブ型レイアウトだけでなく、グリッド型にレイアウトすることもでき、スムーズなアニメーションでコンテンツを表示します。

デモのキャプチャ

グリッド型レイアウトのデモ
レスポンシブ対応で、表示サイズに合わせて横一行のアイテム数が変化します。

デモのキャプチャ

タブ型レイアウトのデモ
通常のタブ型では、タブを天地に配置できます。

デモのキャプチャ

入れ子のタブのデモ
タブは入れ子も可能で、アクティブ時のタブで変更したタブは非アクティブ時にも保持されます。

デモのキャプチャ

コントローラーとスクロール
タブ操作はタブだけでなく、スクロールしてコンテンツを変化させることも可能。

デモのキャプチャ

トリガーの指定
タブを切り替えるトリガーを設定でき、カードのようなレイアウトにも対応しています。

GridTabの使い方

Step 1: 外部ファイル

当スタイルシート・スクリプトとjQueryを外部ファイルとして記述します。

Step 2: HTML

タブとタブのコンテンツはdl要素で実装し、dtがタブ、ddがタブの中身になります。

Step 3: JavaScript

タブを実装した要素(#gridtab-1)をjQueryのセレクタで指定し、横一行のアイテム数を設定(grid:3)してスクリプトを実行します。

top of page

©2017 coliss