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

    JavaScriptの関数のスコープについてちょっと確認してみる

    JavaScriptの関数のスコープを確認、整理する意味で記事にしてみ…

  2. S-Pagination

    JavaScript

    スライダー付きのページネーションを実装できる「S-Pagination」

    S-Paginationはスライダー付きのページネーションを実装できる…

  3. ScalableLightbox

    JavaScript

    ミニマルでレスポンシブに対応したLightbox風のjQueryプラグイン「ScalableLigh…

    ScalableLightboxはミニマルなデザインでレスポンシブに対…

  4. Jquery progress indicator on page scroll
  5. no-image

    JavaScript

    高性能なイメージビューアを実装できる「PhotoViewer」

    PhotoViewerは高性能なイメージビューアを実装できるJSプラグ…

  6. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで今まで紹介したjQueryプラグイン25選のまとめ 2011/09 – 201…

    2011年9月〜2012年3月までに当ブログで紹介したjQueryプラ…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP