ウェブサイトを別のレベルに引き上げる 50 の jQuery プラグイン_jquery

ウェブの状況は常に変化しており、その境界は日々 (時間単位でも) 変化しており、その境界が拡大するにつれて多くの新しい開発が行われています。こうした進歩の中で、開発者は、エンド ユーザー エクスペリエンスを向上させるためのプラグインであり、元のスクリプトよりも軽量で、処理能力が高い、より大規模で優れたスクリプトの作成に取り組み続けています。

重要なのは、これらの新しく開発されたスクリプトとプラグインは、元の機能を失うことなく応答性の高い Web を構築できるということです。(ファイル サイズの点で) 優れており軽量であることに加えて、ページの読み込み時間も増加しません。 。

ドキュメントを参照すれば、JQuery の構文を簡単にマスターできます。 DOM 要素の選択、アニメーションの作成、イベントの処理、Ajax アプリケーションの開発をサポートし、開発者に JavaScript クラス ライブラリに基づいてプラグインを作成する機能も提供します。

jQuery アーキテクチャの開発者は、プラグイン コードを作成してその機能を拡張することができ、その結果、Web サイトや特定のプロジェクトをまったく新しいレベルに引き上げる最適なプラグインがいくつか得られます。

この記事では、選択できる最高の JQuery プラグインをいくつか集めました。これらのプラグインは、Web ページに想像できる多くの効果を与えるさまざまな機能を提供します。以下のリストからお探しのプラグインが見つかることを願っています。

以前に使用したプラグイン、または将来のプロジェクトや Web サイトでの使用を検討しているプラ​​グインを下のコメント領域でお知らせください。

1. フリッカープレート

Flickerplate は、コンテンツをポップアップできる使いやすい jQuery プラグインです。また、タッチ検出には Modernizr に依存し、タッチ イベントには jQuery.Finger ライブラリを使用します。フリッカープレートはさまざまな方法で構成できます。 Javascript 呼び出しを通じてオプションを設定できます。または、実際の要素の data 属性を介してオプションを設定することもできます。

2. JS のタグ付け

TaggingJS は、高度にカスタマイズ可能なフロントエンドのタグ付けシステムを作成するための jQuery プラグインです。サイズは 3 kb 未満で、世界中のほとんどのブラウザをサポートしています。 MITライセンスに基づいています。

3. スクロールマジック

ScrollMagic は、スクロール バーをプログレス バーのように使用できる、魔法のようなスクロール インタラクションのための jQuery プラグインです。指定したスクロール位置でアニメーションを開始し、アニメーションをスクロール バーの動きと同期させ、要素を指定したスクロール位置 (スティッキー要素) に固定したい場合は、このプラグインが最適です。

32. jPages : JavaScript によるページネーション

jPages は、キーボード + スクロール ナビゲーション、自動ページ変更、遅延表示、カスタマイズ可能なナビゲーション パネルなどの機能を備えたクライアント側のページング スクリプト (jQuery プラグイン) です。ページネーション要素は任意の数のページを同じページに挿入でき、簡単に配置できます。

5.通知する

PNotify は、SciActive によって開発された JavaScript 通知プラグインであり、以前は Pines Notify として知られていました。その設計コンセプトは、非常に柔軟でありながら実装と使用が非常に簡単であることを提供することです。ノンブロッキング通知を提供します。ユーザーが通知を閉じずに、通知の背後にある要素をクリックできるようにします。 PNotify は、Bootstrap と jQuery UI を使用してスタイルを定義します。つまり、テーマを使用して簡単にカスタマイズできます。

6.完全に

Wholly は、テーブル列でマウスエンターおよびマウスリーブイベントをトリガーするために使用される jQuery プラグインです。 Wholly はテーブル列全体を強調表示するために使用され、テーブルの Colspan プロパティと rowspan プロパティをサポートします。 Colspan 属性と rowspan 属性をサポートする場合は、まずテーブルのセル インデックス (セル インデックス) を構築する必要があります。その後、テーブル内のすべてのセルのイベントを追跡し、関心のあるセルを見つけて、同じ垂直インデックスを共有する行列および列内のそれらのオフセットを計算する必要があります。特定のスタイルの設定にはまったく制限がありません。

7. ミックスアップ

MixItUp は、アニメーションによるフィルタリングと並べ替えを提供する jQuery プラグインです。これは、フォルダーのように簡単に分類または整理できるコンテンツやブログの管理に最適ですが、魅力的なアプリケーション UI やデータ視覚化のための強力なツールとしても機能します。

8. Velocity.js

Velocity是一個jQuery插件，它重新實現了$.animate() 同時包括改善動畫流程的新特性(使得Velocity也比CSS動畫庫更快)，用來產生性能顯著的動畫。

9. rowGrid

rowGrid.js是一個小的，輕量級(gzip後大約700 位元)的 jQuery插件，用來在徑直的行裡放置圖片 (或其他內容項目)。網格類似Google圖片搜索，flickr，shutterstock 和Google+ 圖片的網格。 rowGrid.js 是響應式的，它允許使用者無限滑動。所有的內容項擁有相同的高度，但寬度是可變的。

10. Croppic

Croppic 是一個圖片裁切jquery外掛。它能提供滿足你的需求外更多的功能。 簡單上傳一張圖片，然後你能夠按照你喜歡的放大縮小的實際情況來裁剪圖片。它需在IE 10+， chrome，和firefox才能正常運作。它使用FormData所以現在不支援IE9和之前的版本。

11. ImageLightbox.js

ImageLightbox.js是一個難以置信簡單，響應式，觸碰友好燈箱效果的腳本。它是由可擴展的，可配置的，極簡化的(瘦身後只有4kb)，並且使用CSS變形和轉換來移動圖片。

12. jQuery Tip Cards

Tip Cards 外掛程式可讓你建立在Google Tips頁面上看到的使用類似卡片互動的cards佈局。有幾種新的動畫選項，所以你可以按你喜歡的進行人性化自訂。你可以在模態視窗開啟或關閉的時候，使用回調方法來進行操作。已在像Chrome，Firefox和Safari的桌面現代瀏覽器測試過。

13. Floatlable.js

在Brad Frost寫一篇關於浮動標籤模式的部落格文章後，浮動標籤模式取得了成功。這個想法是基於Matt D Smith 的Dribbble Shot。這種模式很容易解釋。當使用者使用一個輸入欄位互動時，placeholder的值會向上移，並在類型文字上方顯示。

14. Nanogallery

nanoGallery對jQuery來說很容易實現圖片畫冊插件。它具有許多特性：支援觸碰，響應式，快速且支援雲端儲存。 相簿多級導航，燈箱效果，許多縮圖的hover效果，滑動展示，全屏，分頁，圖片延遲加載，主題，兼容bootstrap，可定制，可從Flickr/Picasa/Google+拉取照片等等。

15. jQuery Panorma Viewer

jQuery Panoram Viewer 幫助你在網站內嵌Panorama圖片。使用這個插件，你能夠在你的網站上顯示你的Panorama圖片。為了做到這些，首先你必須在你的文件中包含最新的JQuery庫和jquery.panorama_viewer.js以及panorama_viewer.css，然後在HTML上給你的圖片增加"panorama"類別。現代瀏覽器例如Chrome,Firefox和Safari的桌面和行動版本都已經測試通過。

16. SVG Magic

SVGMagic是一個跨瀏覽器的兼容JQuery插件，它搜尋你網站上的SVG圖片，如果瀏覽器不支援SVG，自動的創建PNG版本。它是簡單的，單一目的的插件，不需要配置。

17. BttrLazyLoading

BttrLazyLoading是個允許你的網頁應用在視窗裡面只載入圖片的jQuery外掛。它也允許你在4個不同螢幕尺寸裡擁有不同版本的圖片。 BttrLazyLoading允許你的網頁應用程式延遲載入圖片，直到被捲動到圖片。這樣的方式下，頁面載入時間大幅減少。

18. Remodal

Remodal は、フラット、応答性、軽量、高速、簡単にカスタマイズ可能な、宣言型の状態アノテーションおよびハッシュ追跡モーダル ウィンドウ プラグインです。最新のブラウザはすべてこれをサポートしています。モーダル背景コンテナ (デフォーカス効果など) を簡単に定義できます。

19. スリンキー.js

Slinky.js は、スタック ヘッダーを使用してスライド ナビゲーション リストを作成するための jQuery プラグインです。カーソルイベントを無効にすることによるスムーズなスライド、圧縮時に約 1KB と軽量、ウィンドウのサイズ変更や DOM 変更時の更新、お気に入りのブラウザの最新バージョンとの互換性など、数え切れないほどの機能があります。

20. アダプティブ背景

Adaptive Backgrounds は、画像からメインカラーを抽出して親要素に適用するための jQuery プラグインです。このプラグインは、キャンバス要素と ImageData オブジェクトを使用します。クロスサイトのセキュリティ制限により、スクリプトが現在のドメイン名以外のホストから画像の色を抽出しようとすると、画像がクロスサイトを許可しない限り失敗します。オリジンリソースの共有。

21.ビッグフット

Web ページの脚注は迷惑です。小さな数字をクリックしてページの下部近くにジャンプし、探している脚注を見つけて、リンクをクリックしてページ上の元の位置に戻ります。 Bigfoot を使用すると、プロセス全体が苦痛なく行われるようです。脚注のリンクと内容を自動的に検出し、リンクをクリックしやすいボタンに変換し、読者が脚注ボタンをクリックするとフローティング ウィンドウをポップアップ表示します (訳: 公式デモ版は直接ジャンプします)。

22. ダイナテーブル

Dynatable は、jQuery、HTML5、JSON を使用した、より興味深い、セマンティックなインタラクティブなテーブル プラグインです。 フォームだけではありません。 Dynatable の目的は、大規模なデータ セットの簡単な参照と操作を可能にする、シンプルで拡張可能な API を提供することです。

23. jQuery ラベルの改善

jQuery Label Better は、スペースを取らずにフォーム入力にラベルを付けるのに役立つエレガントなアニメーション ボスのようなものです。このプラグインの最もユニークな点は、プレースホルダー テキストを追加するだけで、ユーザーが必要なときにラベルを表示できることです。

24. スティックアップ

StickUp は jQuery プラグインです。これは、jQuery を使用して任意の Web ページで行うことができます。ユーザーに常に表示したい要素を任意のページに作成するだけで、ユーザーがスワイプするとすぐにブラウザ ウィンドウの上部に固定されます。

25. フリーウォール

Freewall は、優れた CSS3 アニメーション効果とコールバック イベントを使用して、スケーラブルなレイアウト、画像レイアウト、ネストされたグリッド、流体など、さまざまな種類のグリッド レイアウトを作成するのに役立つクロスブラウザー対応の jQuery プラグインです。グリッド、メトロ スタイル グリッド、Pinterest のようなグリッド。 Freewall は、デスクトップ、モバイル、タブレット用の動的なグリッド レイアウトを作成するためのオールインワン ソリューションです。

26. jQuery インタラクティブ 3D

jQuery Interactive 3D は、複数の画像を使用して同様の機能を実行できるようにするプラグインです。 使い方は簡単で、単純な関数を使用し、名前付きイメージのセットを指定します。 さらに、カーソル アイコン、速度、タッチ スクリーンのサポート、自動再生などのカスタマイズ オプションがあります。

27. 簡潔

Succinct は、複数行のテキストを切り詰めるための jQuery プラグインです。テキストを指定されたサイズに短縮し、その後に省略記号を追加します。セレクターを使用して切り詰める要素を指定し、表示したい量のサイズ パラメーターを設定できます。

28. スライドミー

SlideMe! は、制限付きビューと全画面ビューの両方をサポートする、応答性の高い CSS3 互換の jQuery スライダー プラグインです。縦画面と横画面の両方で使用でき、CSS3 トランジションを使用し、ページングをサポートします。スライドを制御するためのメソッド (前へ、次へなど) や、それらに対応するコールバック メソッドなどを提供します。

29. グライド.js

Glide.js は、スライダーを作成するための軽量 (gzip 圧縮された 4.5kb) jQuery プラグインです。完全にカスタマイズ可能な OOCSS マークアップと CSS3 変換があり、JavaScript をコールバックできます。スライダーはすべてのデバイスに適応し、タッチをサポートします。キーボード、スワイプ イベント、ポップアップ、または矢印メニューを介して要素を制御できます。 Glide.js には、すべてのイベント (再生、一時停止、次、前など) をサポートするパブリック API もあります。

30.PhotoJShop

PhotoJShop は、画像に簡単な効果やフィルターを適用できる jQuery プラグインです。これらのフィルターには、ぼかし、ネガ、エンボス、明るくする、黒くする、白黒、シャープなどがあります。このプラグインはキャンバスと画像で動作し、フィルターは使いやすいです。

31. 1 ページ スクロール

One Page Scroll は、同様の Web サイトの作成を簡素化する jQuery プラグインです。セットアップはほとんど必要なく、HTML 構造を作成し、関数を呼び出すだけで準備完了です。オプションで、追加機能として、速度とループ動作も設定できます。また、すべてのページで SEO に適した URL をサポートします。

32. フェロスライダー

FerroSlider は、ページ全体 (またはコンテンツ/画像スライダー) とほぼすべての種類のスライダーを作成するための jQuery プラグインです。コンテンツは水平または垂直に柔軟に配置でき、プラグインを使用すると閲覧が簡単になります。 CSS3 変換を使用してパフォーマンスを向上させ、応答性の高いレイアウトとうまく連携し、モバイル プラットフォームでも動作します。

33. スクロール.js

Scrolld.js は、ユニークな jQuery オープン ソース プラグインです。 Scrolld.js は、リアルタイムの更新データを使用して、ピクセル レベルのレイアウトとナビゲーションのための高精度のスクロールを提供します。 Scrolld.js を使用すると、指定したターゲットまで常に正確にスクロールでき、常に最高のユーザー エクスペリエンスを提供できます。

34.アニメーションスクロール

AnimateScroll は、リラックスしたスクロール バー効果を追加するために使用できるシンプルな jQuery プラグインです。スクロール バーのスタイル (30 を超えるスクロール効果) とスクロール速度をカスタマイズできます。 「padding」属性は、スクロール バーの終了位置を制御します。このプラグインは本文ページ全体に限定されるものではなく、指定された要素に対しても使用できます。

35.MasonJS

MasonJS jQuery プラグインは、現在ほとんどのグリッド システムが直面している問題とギャップを解決するために使用されます。 Masonry、Isotope、またはその他のメッシュ プラグインを使用すると、メッシュにギャップやギザギザのエッジが生じることがあります。メイソンはそれらを埋めるために使用されます。

36.JInvertScroll

jInvertScroll は、デフォルトのスクロール動作を制御し、垂直スクロールを強制する jQuery プラグインです。このプラグインは十分に軽量 (1kb 未満) で、使用するためにセットアップはほとんど必要ありません。指定したクラスをラッピング要素に追加し、JS 関数を呼び出すだけです。さらに、onScroll コールバック (任意の要素のサイズを決定できる) を使用して検査効果を簡単に作成できます。

37. フロータイプ.js

FlowType.JS は、フォント サイズ (font-size) と行番号 (line-height) (折り返し要素の幅に応じて) を自動的に調整できる jQuery プラグインです。 、コンテンツを希望通りに表示できるようにしています。このプラグインは、フォントの最小/最大サイズと幅を設定するためのプロパティを提供します。

38.進捗状況

NProgress.js はナノプログレスバーです。リアルで詳細なアニメーションで何が起こっているかをユーザーに伝えます。これは、Google、YouTube、Medium からインスピレーションを得た軽量のプログレス バーで、Turbolinks、Pjax、その他の Ajax レベルのアプリケーションに最適です。

39. 整頓タイム.js

人間に優しい言語を使用して時間ベースの更新を提示したいですか? TidyTime.js はこれを行うプラグインで、標準の時刻形式を個人的に宣言された時刻形式に変換します。

40. フルページ.js

FullPage.js は、全画面スライド Web ページ (単一ページ Web サイトともみなされる) を作成するためのシンプルで使いやすいプラグインです。これを使用すると、全画面のスライド Web サイトを作成しながら、サイトのさまざまな部分に横長の印刷スタイルのカルーセルを追加できます。タブレットやモバイルデバイスだけでなく、さまざまな画面サイズでも動作するように設計されています。

41. jQuery フラットシャドウ

jQuery Flat Shadow は、任意のものに減衰シャドウを追加できるプラグインです。影の色、角度を定義し、影のフォールオフを有効または無効にすることができます。

42. フクロウメリーゴーランド

Owl Carousel は、応答性の高い回転スライダーをすばやく作成できる jQuery プラグインです。このプラグインはタッチフレンドリーで、あらゆる表現のあらゆる HTML コンテンツを備えています。ページング/スワイプ速度の設定、自動再生の有効化/無効化、差し込みナビゲーションの表示などのオプションがあります。

43.Sギャラリー

S Gallery は、応答性の高いグリッドで写真を表示するもう 1 つの jQuery フォト アルバム プラグインです。ソニーの製品ページのパンフレット（Flashで作成）からインスピレーションを得て、それを完全に模倣しています。画像アイテムをクリックしてフォーカスを取得すると、前後ボタンまたはキーボードを使用して他の画像アイテムに移動できます。

44. ポップイージー

PopEasy は、開発者がモーダル ウィンドウを簡単に作成するために必須の軽量の jQuery プラグインです。ページにマスクを適用し、カスタマイズ可能なポップアップ モーダル ウィンドウを開くことで、重要な要素に焦点を当てます。

45. 上にスクロールします

ScrollUp は、任意の Web サイトで簡単に使用できるカスタムの「トップにスライド」機能を作成するための軽量の jQuery プラグインです。有効な CSS カラーを activeOverlay 設定に割り当てると、上からの理想的なスライド距離を決定するのに役立つ視覚的な線が作成されます。

46.モビススクロール

Mobiscroll は、タッチ スクリーン デバイス (Android 携帯電話、iPhone、iPad、Galaxy Tab) で使用されるスクロール マーキーまたは日付と時刻のピッカー用の jQuery プラグインです。コントローラーは、任意のカスタム値をサポートするように簡単にカスタマイズでき、ネイティブ選択コントローラー (ドロップダウン リスト) の代替として直接使用することもできます。コントローラーにはテーマを設定できます。 CSSを使えば簡単に見た目を変えることができます。また、定義済みの見栄えの良いカラー モードもサポートしています。 iOS4、Android 2.2、Android 2.3、Chrome、Safari、Firefox、IE9でテスト済み。

47.サイクル2

以前から非常に人気のある jQuery スライドショー プラグインである Cycle に、強化版 Cycle2 が追加されました。このプラグインは、マークアップやスタイルを宣言しないため、完全にパーソナライズされたスライドショーを作成したい人に最適です。さらに、その機能は非常に柔軟です。 Cycle 2 は応答性の高いレイアウトをサポートし、ほぼすべて (グローバルまたは個別のスライド) のオプションが含まれており、フル機能の API を使用して簡単に拡張できます。

48.ツールチップスター

Tooltipster は、HTML5 検証と柔軟なツールチップを迅速に作成するための jQuery プラグインです。このプラグインは「小さいながらも完全な」タイプに属し、圧縮後のサイズはわずか 4.8kb ですが、非常に高速に動作し、簡単にカスタマイズできます。 CSS (テーマサポート) や矢印を使用して外観を変更でき、マウス位置に伴う変化や遅延などの外観効果を定義できます。

49.フィットテキスト

FitText は非常にシンプルですが強力な jQuery プラグインで、テキストが定義された要素に確実に収まるように使用できます。周囲の要素の幅に基づいてフォント サイズが自動的に更新され、ページがデスクトップ ブラウザーまたはモバイルで表示されている場合でも、(フォント サイズが原因で) レイアウトが断片化しすぎないようにします。また、このプラグインには、「水平スケーリング」や最小値から最大値までの寸法を設定する機能など、微調整のためのオプションがいくつか用意されています。

50.アンスライダー

Unsliderは画像表示専用のjQueryスライダープラグインです。豪華な特殊効果や不要な装飾はなく、プラグインは 3kb 未満です。滑らかで柔軟性があり、信じられないほど小さいです。 Unslider は、現在のすべてのブラウザの最新バージョンでテストされています。それほど新しいブラウザでは、その「孤独な栄光」しか見ることができません。必要に応じて、キーボードの矢印キーのサポートを追加できます。すべてのスライダー プラグインが同じように作成されているわけではなく、Unslider はそれを認識しています。 (翻訳者:作者はかわいいですか?)