ホームページ >ウェブフロントエンド >jsチュートリアル >おすすめの素晴らしい jQuery グリッド プラグイン 25 個_jquery

おすすめの素晴らしい jQuery グリッド プラグイン 25 個_jquery

WBOY
WBOYオリジナル
2016-05-16 16:29:481348ブラウズ

jQuery グリッド プラグインを使用すると、さまざまなテーブル レイアウトを作成できます。グリッド レイアウトは、新聞や雑誌で最も一般的なレイアウトであり、今日の Web サイトでも非常に一般的です。 jQuery グリッド プラグインを使用すると、グリッドの行と列を制御し、テキストや画像を入力できます。私はこれらのプラグインを「トップ」という言葉で説明していますが、これらのプラグインを知ると、きっとかっこいいと感じるでしょう。

1. グリッド化

Gridify は軽量の jQuery プラグインで、Pinterest のような画像読み込みグリッド プラグインの作成に使用されます。画像読み込みイベントのサポート、ウィンドウ スケーリング イベントのサポート、高さの非常に長いアイテムのサポート、動的なアイテム幅のサポート、およびアニメーション (CSS3 トランジション) のサポート。

2. フリーウォール

Freewall は、クロスブラウザーで応答性の高い jQuery プラグインで、さまざまなタイプのグリッド レイアウトの作成に役立ちます: 柔軟なレイアウト、画像レイアウト、ネストされたグリッド、流動的なグリッド、ピンタレストに似たメトロ スタイル レイアウト レイアウト…。さらに、美しい CSS3 アニメーション効果とコールバック イベントも備えています。フリーウォールはオールインワンのソリューションです。デスクトップ、モバイル、タブレット用の動的なグリッド レイアウトを作成します。

3. レスポンシブ等高ブロック

レスポンシブ等高ブロックはJavaScriptとCSSを使用して実装されています。 実際には各行にリストが表示され、各行の最上位の項目によって他の項目の位置が設定されます。

4. MatchHeight.js

MatchHeight.js は、選択されたすべての要素の高さを正確に等しくすることができます。これは、混合されたパディング、マージン、ボーダー、ボックス サイズ、行、グループを正しく処理する、より強力な同じ高さのプラグインです。 画像とレスポンシブ レイアウトを、必要に応じて自動的に更新することで処理します。

5. Gridmanager.js

Gridmanager を使用すると、テーブル レイアウトの行と列を作成、記録、更新、削除したり、編集可能領域のグリッド レイアウトを作成したり、各グリッドを編集してサイズと数量を定義したり、位置を調整したりできます。 GridManager には jQuery、jQueryUI、Bootstrap 3.x が必要ですが、TinyMCE CKeditor はオプションです。

6.Sギャラリー

S Gallery は、応答性の高いテーブルに写真を表示する jQuery ピクチャ ギャラリー プラグインです。ソニーの製品からインスピレーションを得たもので、項目を選択すると、前/次の項目を選択するためのボタンがインターフェイスに表示されます。他の位置をクリックすると、テーブル全体のレイアウトに戻ることもできます。

7. 弾性柱

Elastic Columns は、幅の値に従ってグリッドを簡単に定義し、ブラウザのサイズを監視してグリッド表示を調整できる軽量の応答性の高いグリッド レイアウト プラグインです。

8.Mason.js

Mason.js は、グリッドのギャップを巧みに埋める jQuery プラグインです。グリッドが作成されると、プラグインはこれらのギャップを計算し、グリッドからコピーされた事前定義された要素またはコンテンツでそれらのギャップを埋めます。要素に使用されるサイズ、列/行のサイズ、ブレークポイントのサイズ、またはレイアウトが流動か固定かを定義できます。

9. rowGrid.js

RowGrid.js は非常に小型で軽量の jQuery プラグインで、画像を垂直に配置でき、応答性が高く、無限スクロールで表示できます。

10.BttrLazyLoading

BttrLazyLoading は、画像がスクロールされるまでユーザーの Web アプリケーションで画像の読み込みを遅らせることができる、応答性の高い画像遅延読み込み jQuery プラグインです。 BttrLazyLoading には、モバイル (

11. jqGrid

jqGrid は、グリッドデータを表示するための jQuery プラグインです。 jqGrid を使用すると、フロントエンドページとバックグラウンドデータの間の非同期 Ajax 通信を簡単に実現できます。

12.石積み

Masonry は非常に便利な jquery Web ページ レイアウト プラグインで、異なる高さの div 間の空白を削除して、Web ページをよりすっきりと美しく見せることができます。

13. jQueryシェイプシフト

jQuery ドラッグ アンド ドロップ プラグイン Shapeshift、ドラッグ アンド ドロップでは、コンテナ内の複数のアイテムを再配置したり、コンテナを変形したりすることができます。要素をドラッグすると、親コンテナ内のインデックス位置が変更されます。

14. jQuery のネスト

Nested は、他の同様のライブラリや jQuery プラグインとは異なり、複数列の動的なグリッド レイアウトを作成するのに役立つツールです。すべてのギャップを取り除くのに役立ちます。このプラグインを使用すると、他のライブラリやプラグインと同様に、要素を並べ替えるためにすべてのギャップの寸法をスキャンするのに役立ちますが、Nested を使用すると、最終ステップで要素をスケーリングしてすべてのギャップを排除することができます。

15. ヘッドサップグリッド

Headsup Grid の特徴は、異なるプラットフォームで異なるスタイルを表示できることです。

16. Wookmark jQuery プラグイン

Wookmark jQuery プラグインは、現在人気のあるウォーターフォール フロー Web レイアウト効果を実現するために使用される jQuery プラグインです。

17. jQueryウォーターフォール

jQuery ウォーターフォールは li タグを使用して、マウス スクロール ページ画像の無限読み込み効果を備えた複数列のウォーターフォール フロー レイアウトを作成します。

18. グリッド –A-Licious

Grid-A-Licious は、さまざまなデバイスの幅に自動的に適応する応答性の高いウォーターフォール レイアウトの作成に使用できる、シンプルで使いやすい jQuery プラグインです。幅、動的表示速度、遅延などをパラメータで設定でき、カスタマイズ性は比較的高くなります。

19. グリッドスター

Gridster.js は、複数列レイアウトをサポートする直感的なドラッグ アンド ドロップ レイアウトを構築するために使用される jQuery プラグインです。テーブル内の要素を動的に追加および削除することもできます。

20. グリッドリー

Gridly はグリッド スタイルのドラッグ アンド ドロップ jQuery プラグインで、ドラッグすると動きのあるアニメーションが表示され、その効果は非常に美しいです。

このプラグインには、閉じる、クリックして拡大する、モジュールの追加など、他の特別な機能もあります。

21. カレッジプラス

CollagePlus は、CSS を通じて画像間の距離を定義し、画像に境界線を追加できる jQuery テーブル プラグインです。

22.グリディ

Griddy は軽量のプラグインですが、行数、行の高さ、列の数、列の高さ、色など、多くの属性はオプションです。

23. jQuery Grid'Em プラグイン

jqGridView は、jQuery ライブラリ用の新しいリッチクライアント、XML ベースの Ajax グリッド プラグインです。 jqGridView は、Web 上で表形式のデータを表現および編集するためのプロフェッショナルなソリューションを提供します。強力なスクリプト API を使用して慎重に設計されたこの編集可能なグリッドは、DHTML と XML で簡単に構成でき、大量のデータでも説得力のある結果を示します。 jqGridView は簡単に見栄えを良くすることができます (CSS 経由で管理)。 jqGridView はプラグインとしてのプラットフォーム ベースではなく、ASP.NET/ASP、PHP、Java、CGI スクリプトなどのさまざまな Web プログラミング プラットフォームで使用できます。jqGridView は、Bowser との高い互換性を持っています。

24. イングリッド


Ingrid はデータ入力操作を大幅に簡略化し、より現実的なものにしました。

25. Jui_datagrid

jui_datagrid は、シンプルで強力な API を通じてテーブル データを操作し、テーマのカスタマイズ、ローカリゼーションのサポートなどを提供するために使用できる Ajax jQuery テーブル プラグインです。

経由: gbtags

上記の 25 個の jQuery グリッド レイアウト プラグインを使用すると、開発者とデザイナーは、魅力的な視覚効果と、すべてのブラウザおよびハンドヘルド デバイスの外観と互換性のあるレスポンシブ レイアウトを備えたレスポンシブ グリッド レイアウトを作成できます。気に入っていただければ幸いです!

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。