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. Shuffle Images

    JavaScript

    画像をシャッフルすることができるjQueryプラグイン「Shuffle Images」

    Shuffle ImagesというjQueryプラグインを使えば、画像…

  2. VintageTxt

    JavaScript

    タイピングしているような効果を実装できるjQueryプラグイン「VintageTxt」

    VintageTxtというjQueryプラグインを使えば、文字をタイピ…

  3. Granim.js

    JavaScript

    流れるように変化するグラデーションのアニメーションを実装できる「Granim.js」

    Granim.jsは美しく変化するグラデーションのアニメーションを実装…

  4. EasyLoading

    JavaScript

    ローディングアニメーションを手軽に実装できる「EasyLoading」

    EasyLoadingは、ローディングアニメーションを手軽に実装するこ…

  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのマウス操作のイベントをまとめてみる

    マウス操作に関するイベントをまとめてみました。まとめたイベントはmou…

  6. blurify

    JavaScript

    画像にぼかし効果を実装できる軽量のJSライブラリ「blurify」

    blurifyは画像にぼかし効果を実装することができるJSライブラリで…

最近の記事

  1. F7U070bt
  2. 生きている玄米と玄米酵素ブレンド雑穀
  3. BOOST↑CHARGE Apple Watch用モバイルバッテリー

アーカイブ

PAGE TOP