50 jQuery plugins to take your website to another level_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. ベロシティ.js

Velocity は $.animate() を再実装する jQuery プラグインで、アニメーション プロセスを改善するための新機能 (Velocity も CSS アニメーション ライブラリよりも高速になります) が含まれています。パフォーマンスに優れたアニメーション。

9. 行グリッド

rowGrid.js は、画像 (またはその他のコンテンツ項目) を直線の行に配置するための小型で軽量 (gzip 後約 700 ビット) の jQuery プラグインです。このグリッドは、Google 画像検索、flickr、shutterstock、Google+ 画像のグリッドと似ています。 rowGrid.js は応答性が高く、ユーザーは無限にスクロールできます。すべてのコンテンツ項目の高さは同じですが、幅は可変です。

10.クロピック

Croppic は、画像をトリミングする jquery プラグインです。ニーズを満たす以上の機能を提供できます。 画像をアップロードするだけで、好みに合わせてトリミングできます。正しく動作するには、IE 10 以降、Chrome、Firefox が必要です。 FormData を使用するため、現在 IE9 以前のバージョンはサポートされていません。

11.イメージライトボックス.js

ImageLightbox.js は、驚くほどシンプルで応答性が高く、タッチ操作に適したライトボックス効果スクリプトです。拡張可能、構成可能、ミニマリスト (最小 4kb) で、CSS 変換と変換を使用して画像を移動します。

12. jQuery ヒントカード

ヒント カード プラグインを使用すると、Google ヒント ページで見られるのと同様のカード インタラクションを使用するカード レイアウトを作成できます。いくつかの新しいアニメーション オプションがあるので、好みに合わせてカスタマイズできます。コールバック メソッドを使用すると、モーダル ウィンドウの開閉時に操作を実行できます。 Chrome、Firefox、Safari などのデスクトップの最新ブラウザでテスト済み。

13.Floatlable.js

フローティング タブ パターンは、Brad Frost がフローティング タブ パターンに関するブログ投稿を書いた後に成功しました。このアイデアはマット D スミスのドリブル ショットに基づいています。このパターンは簡単に説明できます。ユーザーが入力フィールドを操作すると、プレースホルダーの値が上に移動し、タイプ テキストの上に表示されます。

14. ナノギャラリー

nanoGallery は、jQuery 用のピクチャー アルバム プラグインを実装する簡単な方法です。タッチ対応、応答性、高速性、クラウド ストレージのサポートなど、多くの機能を備えています。 アルバムのマルチレベルナビゲーション、ライトボックス効果、多くのサムネイルのホバー効果、スライド表示、全画面表示、ページング、画像の遅延読み込み、テーマ、ブートストラップ互換、カスタマイズ可能、Flickr/Picasa/Google+ から写真を取得可能など。

15.jQuery パノラマビューア

jQuery Panoram Viewer は、Web サイトにパノラマ画像を埋め込むのに役立ちます。このプラグインを使用すると、Web サイト上にパノラマ画像を表示できます。これを行うには、まず最新の JQuery ライブラリと jquery.panorama_viewer.js および panorama_viewer.css をドキュメントに含めてから、HTML 内の画像に「panorama」クラスを追加する必要があります。 Chrome、Firefox、Safari などの最新ブラウザのデスクトップ バージョンとモバイル バージョンがテストされています。

16. SVG マジック

SVGMagic は、Web サイト上の SVG 画像を検索し、ブラウザが SVG をサポートしていない場合は PNG バージョンを自動的に作成する、ブラウザ間互換性のある JQuery プラグインです。これは、構成を必要としないシンプルな単一目的のプラグインです。

17.BttrLazyLoading

BttrLazyLoading は、Web アプリケーションがウィンドウに画像のみをロードできるようにする jQuery プラグインです。また、4 つの異なる画面サイズで異なるバージョンの画像を表示することもできます。 BttrLazyLoading を使用すると、画像がスクロールされるまで Web アプリケーションで画像の読み込みを遅らせることができます。このようにして、ページの読み込み時間が大幅に短縮されます。

18. リモーダル

Remodal 是一個扁平化，響應式，輕量級，高速，易定制的，聲明性狀態註釋和哈希追踪的模態窗口插件。所有的現代瀏覽器都支援。你可以輕易地定義模態背景容器（就像一次失焦效果）。

19. Slinky.js

Slinky.js 是一個用於使用堆疊頭部建立滑動導航清單的jQuery插件 。它有無數的特性：就像透過停用遊標事件來平滑滑動，壓縮後大約1KB的輕量級，在視窗重調大小和DOM改變上刷新，還有和你喜歡的最新版本的瀏覽器相容。

20. Adaptive Backgrounds

Adaptive Backgrounds 是一個jQuery插件，用在從圖片抽取主要顏色和應用到父元素。這個外掛利用了畫布元素和ImageData對象，歸根結底其跨站安全限制，如果某個腳本試圖從非當前網域主機抽取圖片的顏色將會失敗，除非圖片允許跨來源資源共用。

21. Bigfoot

網頁的註腳是煩人的。你點了一個小數字，跳到頁面底部附近，找到你尋找的腳註，然後點擊一個連結回到頁面原來的地方。 Bigfoot看起來讓整個處理流程不再痛苦。它會自動偵測腳註連結和內容，將連結轉換成一個容易點擊的按鈕，當讀者點擊腳註按鈕的時候彈出浮窗（譯註：官方演示的版本是直接跳轉）。

22. Dynatable

Dynatable是一個使用jQuery，HTML5和JSON的，更有趣的，語義化的，互動表格插件。 而且不僅是用在表格上。 Dynatable 的目的是提供一個簡單的、可擴展的 API，能夠輕鬆地瀏覽和操作大數據集。

23. jQuery Label Better

jQuery Label Better 就像個優雅動畫的老大一樣幫助你在表單輸入上不佔空間地定標籤。這個外掛最獨特的是你需要做的所有工作只是添加一個佔位符的文本，我們將在當用戶需要的時候顯示標籤。

24. Stickup

stickUp 是一個jQuery 外掛。你可以在任意使用jQuery的網頁上執行。你可以簡單地在任意頁面創建任意你想用戶在任何時候都可以看見的元素，只要用戶滑超它，就會粘到瀏覽器視窗的頂部。

25. Free Wall

Freewall是一個跨瀏覽器響應式的jQuery插件，它使用很棒的CSS3動畫效果和回調事件，能幫你創建很多類型網格佈局：可伸縮佈局，圖片佈局，嵌套網格，流式網格，metro風格網格，類別品趣格網格。 Freewall是個創建桌面，行動和平板的動態網格佈局的一體化解決方案。

26. jQuery Interactive 3D

jQuery Interactive 3D是一個允許我們使用多圖完成一個類似功能的插件。 使用起來簡單，使用簡單的函數和指定一組名字的圖片。 還有，還擁有客製化的可選項，例如遊標圖標，速度，支援觸控螢幕，自動播放等等。

27. Succinct

Succinct是一個用作截斷多行文字的jQuery小插件。它縮短你的文字到指定的尺寸，並在後面添加省略號。你可以用選擇器指定要截斷的元素，然後設定你想看到的數量的尺寸參數。

28. SlideMe

SlideMe! is a responsive, CSS3-compatible jQuery slider plugin that supports both restricted and full-screen views. It can be used in both portrait and landscape screens, uses CSS3 transitions and supports paging. Provides methods for controlling sliding (prev, next, etc.), as well as callback methods corresponding to them and more.

29. Glide.js

Glide.js is a lightweight (4.5kb gzipped) jQuery plugin for creating sliders. It has fully customizable OOCSS markup and CSS3 transformations, and can call back JavaScript. The slider is responsive; it adapts to all devices and has touch support. You can control elements via the keyboard, slide events, popups, or arrow menus. Glide.js also has a public API that supports all events (play, pause, next, previous, etc.).

30. PhotoJShop

PhotoJShop is a jQuery plugin that allows us to apply simple effects and filters to images. These filters include blur, negative, emboss, lighten, blacken, black and white, sharpen and more. The plugin works on canvas and images, and the filters are easy to use.

31. One Page Scroll

One Page Scroll is a jQuery plugin that simplifies creating similar websites. It requires very little setup, just create the HTML structure, call the function and you're ready to go. Optionally, as an additional feature, its speed and loop behavior can also be set. And it supports SEO-friendly URLs for every page.

32. FerroSlider

FerroSlider is a jQuery plugin for creating full page (or content/image sliders) and almost any type of slider. Content can be placed in a flexible way, horizontally or vertically, and plugins make browsing easy. It uses CSS3 transforms to improve performance, works well with responsive layouts, and works on mobile platforms.

33. Scrolld.js

Scrolld.js is a unique jQuery open source plug-in. Scrolld.js provides a highly precise scrolling for pixel-level layout and navigation using real-time updated data. With Scrolld.js, you can always scroll accurately to the specified target and always provide the best user experience.

34. AnimateScroll

AnimateScroll is a simple jQuery plug-in that can be used to add a relaxed scroll bar effect. You can customize the scroll bar style (more than 30 scroll effects) and scroll speed. The "padding" attribute controls the end position of the scroll bar. This plugin is not limited to the entire body page, but can also be used for specified elements.

35. MasonJS

The MasonJS jQuery plug-in is used to solve the problems and gaps that most grid systems currently encounter. When using Masonry, Isotope or any other mesh plugin, your mesh will sometimes have gaps or jagged edges. Mason is used to fill them.

36. JInvertScroll

jInvertScroll is a jQuery plugin that controls default scrolling behavior and forces vertical scrolling. The plugin is lightweight (less than 1kb) and requires almost no setup to use. Just add the specified class to the wrapping element and call the JS function. Additionally it makes it easy to create inspection effects using the onScroll callback (where we can decide to resize any element).

37. Flowtype.js

FlowType.JS is a jQuery plug-in that can automatically adjust font size (font-size) and line number (line-height) (according to the width of the wrapping element), making our content can be displayed as we want it to be. The plugin provides properties for setting minimum/maximum font size and width.

38. nProgress

NProgress.js是一個奈米進度條。以現實的細膩的動畫告訴用戶正在發生的事情。它是一個靈感源自Google，YouTube，和Medium的輕量級的進度條，完美適用於Turbolinks, Pjax,以及其他 Ajax等級的應用。

39. Tidy Time.js

想使用對人友善的語言，來展示一個基於時間的更新？ TidyTime.js就是個做這事的插件，它轉換標準的時間格式到個人聲明的時間格式。

40. Fullpage.js

FullPage.js是一個簡單易用的插件，用來創建全螢幕滑動網頁（也被認為是單頁網站）。它允許你創建全螢幕滑動網站的同時，也添加一些橫向列印風格的輪播器到網站的各個部分。它被設計成適用於不同螢幕尺寸，以及平板和行動裝置。

41. jQuery Flat Shadow

jQuery Flat Shadow是一個可以為你想的任何東西添加衰退陰影的插件。它能夠定義陰影顏色，角度和啟用禁用陰影衰退。

42. Owl Carousel

Owl Carousel 是一個允許你快速建立響應式旋轉滑動條的jQuery插件。外掛是觸碰友善並且擁有任意表示的任意HTML內容的特色。它有可選項用來設定分頁/滑動速度，啟用/停用自動播放，顯示插入導覽和其它。

43. S Gallery

S Gallery是另一個在響應式方格展示圖片的jQuery圖片畫冊插件。其靈感來自Sony的產品頁面畫冊 (使用Flash製作) ，並完整地模仿了它。一當一個圖片項目被點擊和獲得焦點，就可以使用向前-向後按鈕或透過鍵盤瀏覽其他的圖片項目。

44. Pop Easy

PopEasy是一個輕量級jQuery插件，對於一個開發人員簡單建立模態視窗是必須的。透過在你的頁面上應用一個遮罩並打開一個可自訂的彈出模態窗口，把焦點放在重要的元素上。

45. Scroll Up

ScrollUp是一個輕量級的jQuery插件，用來創建自訂的「滑動到頂部」功能，可以簡單地用到任何網站。透過指定一個有效的CSS顏色到activeOverlay設置，創建一個可視線來幫助確定距離頂部的理想滑動距離。

46. Mobiscroll

Mobiscroll是一個用在觸控螢幕裝置（Android手機，iPhone，iPad，Galaxy Tab）上的輪滑跑馬燈，或是日期時間拾取器的jQuery插件。控制器能輕鬆地進行自訂以支援任意自訂值，甚至直接作為原生的選擇控制器（下拉清單）的替代方案使用。控制器是可以主題化的。在CSS裡你能輕易改變外觀。它也支援預定義，好看的顏色模式。已在iOS4，Android 2.2，Android 2.3，Chrome，Safari，Firefox，IE9上測試過。

47.Cycle2

Cycle，是過去的一個非常受歡迎的jQuery幻燈片播放插件，現在有了一個增強的版本：Cycle2.該插件對於那些期待創建完全個性化的幻燈片展示效果的人是非常完美的，因為它沒有聲明任何標記或樣式。並且，它的功能非常靈活。 Cycle2支援反應靈敏的佈局，幾乎包含應對所有的選項（全域或單張投影片），透過使用全部特性的API，還可以非常輕鬆的進行擴充。

48.Tooltipster

Tooltipster 是一個 jQuery 插件，用於快速建立 HTML5 驗證和靈活的工具提示。該插件屬於“麻雀雖小，五髒俱全”的類型，壓縮後僅4.8kb，但是工作起來非常快，並且可以輕鬆的定制。它的外觀可以用 CSS （主題支援） 和箭頭進行修改，跟隨滑鼠的位置改變，延遲等外觀特效都可以定義。

49.FitText

FitText是一個非常簡單但是卻功能強大的jQuery插件，可用來確保文字能夠適應已定義好的元素。它會根據元素環繞它的寬度自動更新字體大小，並保證佈局不會太零碎（因為字體大小），即使頁面是在桌面瀏覽器或行動裝置中顯示。還有，該插件提供了一些選項微調，包括設定"水平縮放"的能力和尺寸的最小到最大。

50. Unslider

Unslider是且僅是用於圖片展示的jQuery滑桿外掛。沒有華麗的特效和多餘的裝飾，插件小於3kb。它是流暢、靈活，令人難以置信的小。 Unslider已經在目前所有的瀏覽器最新版本中進行了測試，再不是那麼新的瀏覽器中，只能看到它「落寞的輝煌」。如果你需要，你可以加入鍵盤方向鍵支援。不是所有的滑桿外掛都生來平等，Unslider深知這一點。 （譯者：作者在賣萌麼？）