GridTab

JavaScript

グリッドベースのレスポンシブなタブを実装できるjQueryプラグイン「GridTab」

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」を活用されてみてはいかがでしょうか?

関連記事

  1. JavaScript

    レスポンシブ対応で画像やテキストも自由にスライドできるjQueryスライダー「Responsly.j…

    スマホにも対応したレスポンシブのjQueryスライダー「Respons…

  2. Sliding Panels Template
  3. JavaScript

    カスタマイズも自由にできるjQuery「bxSlider」の使い方

    個人的にかなりよさげなjQueryスライダーを使ってみました。その名も…

  4. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量ライブラリ「Lazyestload.js」

    Lazyestload.jsは画像の遅延読み込み機能を実装できる軽量の…

  5. no-image

    JavaScript

    フォームに文字制限を設定できるjQueryプラグイン「Character Limit」

    Character Limitは、フォーム要素に文字制限を設定するため…

最近の記事

  1. プラスシェル シティ04 フォールディングカメラケース
  2. enerpad AC-27KS
  3. KMS-160

アーカイブ

PAGE TOP