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. Letter by Letter JS

    JavaScript

    美しいフェードでテキストが徐々に表示されていく「Letter by Letter JS」

    Letter by Letter JSは美しいフェードでテキストを徐々…

  2. Swipebox

    JavaScript

    スマホやタブレットのスワイプにも対応したLightboxを実装できるjQueryプラグイン「Swip…

    今後かなり需要がありそうなjQueryプラグインがあったので使い方も兼…

  3. Chocolat

    JavaScript

    レスポンシブ対応のシンプルなLightbox風のjQueryプラグイン「Chocolat」

    Chocolatはレスポンシブに対応したシンプルでスタイリッシュなLi…

  4. share-this

    JavaScript

    テキストを選択してシェアできるMediumライクな「share-this」

    share-thisはテキストを選択して手軽にTwitterやFace…

  5. SPOILER ALERT!

    JavaScript

    画像やテキストにボカシを入れることができるjQueryプラグイン「SPOILER ALERT!」

    画像やテキストといった部分にボカシを入れることができるjQueryプラ…

最近の記事

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

Facebookページ

PAGE TOP