GridTabはグリッドベースによるレスポンシブに対応したタブを実装することができるjQueryプラグインです。ファイル容量も軽量で、CSS3のflexboxをベースにしています。グリッドスタイルのタブを自サイトに取り入れたい人は要チェックです。
GridTab
GridTabの実際のデモ動作や具体的な使い方、ダウンロードに関しては以下のページからどうぞ。
デモではグリッドレイアウトやタブレイアウトなど、いくつかのタイプが用意されています。グリッドレイアウトでは1から12のタブがグリッド形式で並んでおり、各タブをクリックすると、その下にコンテンツがスライドダウンで表示されます。
ほかのタブをクリックすると、現在開かれているパネルが閉じて改めてクリックされたタブに応じたパネルが開かれます。
グリッドレイアウトやタブレイアウトのほかにも、予めパネルがオープンされているKEEP OPENやCUSTOM SELECTORSといったタイプのデモ動作もチェック可能です。
どのタブもレスポンシブに対応しているので、多様なデバイスで最適なレイアウトに可変するのがいいですね。
また、GridTabはカスタマイズ性にも優れており、多彩なセッティングが可能です。主なセッティング項目は、grid、borderWidth、tabBorderColor、tabPadding、contentBorderColor、contentPadding、contentBackground、activeTabBackground、responsive、selectors、config、callbacksなどがあります。
そのほかにも、tab、closeButton、layout、keepOpen、speedなどさまざまなセッティングができます。
グリッドレイアウトやタブレイアウトなど、レスポンシブにも対応した魅力的なタブをjQueryプラグインで実装したい人は、ぜひ「GridTab」を活用されてみてはいかがでしょうか？
