50 plugins jQuery pour faire passer votre site Web à un autre niveau_jquery

Le paysage du Web est en constante évolution et ses limites changent chaque jour qui passe (même pas d'heure en heure), avec de nombreux nouveaux développements à mesure que ses limites s'étendent. Au milieu de ces avancées, les développeurs continuent de travailler pour créer des scripts plus gros et de meilleure qualité qui sont des plug-ins pour une meilleure expérience de l'utilisateur final, sont plus légers et ont plus de puissance de traitement que leurs homologues d'origine.

La clé est que ces scripts et plug-ins nouvellement développés peuvent créer un Web réactif sans perdre leurs fonctionnalités fonctionnelles d'origine - en plus d'être meilleurs et plus légers (en termes de taille de fichier), ils n'augmentent pas non plus le temps de chargement des pages. .

Il est facile de maîtriser la syntaxe de JQuery en parcourant la documentation. Il peut prendre en charge la sélection d'éléments DOM, la création d'animations, la gestion d'événements, le développement d'applications Ajax et offre même aux développeurs la possibilité de créer des plug-ins basés sur des bibliothèques de classes JavaScript.

Les développeurs d'architecture jQuery sont capables de créer un code de plugin pour étendre ses fonctionnalités, ce qui donne naissance à certains des meilleurs plugins pour amener votre site Web ou tout projet donné à un tout autre niveau.

Dans cet article, nous avons rassemblé certains des meilleurs plug-ins JQuery parmi lesquels vous pouvez choisir. Ces plug-ins offrent diverses fonctions et fonctionnalités pour donner à vos pages Web de nombreux effets imaginables. Nous espérons que vous trouverez le plugin que vous recherchez dans la liste ci-dessous.

Faites-nous savoir dans la zone commentaires ci-dessous quels plugins vous avez déjà utilisés ou quels plugins vous envisagez d'utiliser dans de futurs projets ou sites Web.

1. Plaque scintillante

Flickerplate est un plugin jQuery facile à utiliser qui vous permet de faire apparaître du contenu. Il s'appuie également sur Modernizr pour la détection tactile et utilise la bibliothèque jQuery.Finger pour les événements tactiles. Flickerplate peut être configuré de plusieurs manières. Vous pouvez définir des options via des appels Javascript. Ou vous pouvez définir les options via l'attribut data sur l'élément réel.

2. Marquage JS

TaggingJS est un plugin jQuery permettant de créer des systèmes de marquage front-end hautement personnalisables. Il fait moins de 3 Ko et prend en charge la plupart des navigateurs mondiaux. Il est basé sur la licence MIT.

3. Défilement magique

ScrollMagic est un plug-in jQuery pour une interaction de défilement magique. ScrollMagic vous permet d'utiliser des barres de défilement comme des barres de progression. Si vous souhaitez démarrer une animation à une position de défilement spécifiée, garder l'animation synchronisée avec le mouvement de la barre de défilement et fixer un élément à une position de défilement spécifiée (élément collant), ce plugin est fait pour vous.

32. jPages : Pagination optimisée par JavaScript

jPages est un script de pagination côté client (un plug-in jQuery) avec des fonctionnalités telles que la navigation clavier + défilement, le changement de page automatique, l'affichage différé et un panneau de navigation personnalisable. N'importe quel nombre de pages d'éléments de pagination peuvent être insérées dans la même page et peuvent être facilement positionnées.

5. PNotifier

PNotify est un plug-in de notification JavaScript développé par SciActive, anciennement connu sous le nom de Pines Notify. Son concept de conception est de fournir un système extrêmement flexible mais très facile à mettre en œuvre et à utiliser. Il fournit des notifications non bloquantes. Permet à l'utilisateur de cliquer sur l'élément derrière la notification sans la fermer. PNotify utilise Bootstrap et jQuery UI pour définir des styles, ce qui signifie qu'il peut être facilement personnalisé avec un thème.

6. Entièrement

Wholly est un plug-in jQuery utilisé pour déclencher des événements mouseenter et mouseleave sur les colonnes d'une table. Wholely est utilisé pour mettre en évidence la colonne entière du tableau et prend en charge les propriétés colspan et rowspan du tableau. Si vous souhaitez prendre en charge les attributs colspan et rowspan, vous devez d'abord créer l'index de cellule du tableau (index de cellule). Après cela, vous devez suivre les événements de toutes les cellules du tableau, trouver celles qui vous intéressent et calculer leurs décalages dans la matrice et les colonnes partageant le même index vertical. Il n'y a absolument aucune restriction sur la définition de styles spécifiques.

7. MixitUp

MixItUp est un plugin jQuery qui fournit un filtrage et un tri animés. Il est idéal pour gérer du contenu et des blogs qui sont facilement catégorisés ou organisés comme des dossiers, mais peut également servir d'outil puissant pour des interfaces utilisateur d'application et des visualisations de données attrayantes.

8.Velocity.js

Velocity est un plug-in jQuery qui réimplémente $.animate() et inclut de nouvelles fonctionnalités pour améliorer le processus d'animation (rendant Velocity également plus rapide que la bibliothèque d'animation CSS), utilisée pour générer Des animations aux performances remarquables.

9. grille de lignes

rowGrid.js est un petit plugin jQuery léger (environ 700 bits après gzip) permettant de placer des images (ou d'autres éléments de contenu) dans des lignes droites. La grille est similaire à la grille des images Google Image Search, Flickr, Shutterstock et Google+. rowGrid.js est réactif, ce qui permet aux utilisateurs de faire défiler à l'infini. Tous les éléments de contenu ont la même hauteur, mais la largeur est variable.

10. Croppic

Croppic est un plug-in jquery de recadrage d'images. Il peut fournir plus de fonctions que répondre à vos besoins. Téléchargez simplement une image, puis vous pourrez la recadrer à votre guise. Il nécessite IE 10+, Chrome et Firefox pour fonctionner correctement. Il utilise FormData et ne prend donc actuellement pas en charge IE9 et les versions précédentes.

11. ImageLightbox.js

ImageLightbox.js est un script d'effet lightbox incroyablement simple, réactif et convivial. Il est extensible, configurable, minimaliste (jusqu'à 4 Ko) et utilise des transformations et des transformations CSS pour déplacer les images.

12. Cartes de conseils jQuery

Le plugin Tip Cards vous permet de créer des mises en page de cartes qui utilisent des interactions de cartes similaires à celles que vous voyez sur les pages Google Tips. Il existe plusieurs nouvelles options d'animation, vous pouvez donc la personnaliser à votre guise. Vous pouvez utiliser des méthodes de rappel pour effectuer des opérations lorsque la fenêtre modale est ouverte ou fermée. Testé sur les navigateurs de bureau modernes comme Chrome, Firefox et Safari.

13.Flottable.js

Le modèle d'onglets flottants est devenu un succès après que Brad Frost a écrit un article de blog sur le modèle d'onglets flottants. L'idée est basée sur Dribbble Shot de Matt D Smith. Ce modèle est facile à expliquer. Lorsque l'utilisateur interagit avec un champ de saisie, la valeur de l'espace réservé se déplace vers le haut et s'affiche au-dessus du texte saisi.

14. Nanogalerie

nanoGallery est un moyen simple d'implémenter le plug-in d'album photo pour jQuery. Il possède de nombreuses fonctionnalités : il est tactile, réactif, rapide et prend en charge le stockage cloud. Navigation sur plusieurs niveaux de l'album, effet lightbox, effet de survol pour de nombreuses vignettes, affichage coulissant, plein écran, pagination, chargement paresseux des images, thème, compatible bootstrap, personnalisable, possibilité d'extraire des photos de Flickr/Picasa/Google+, etc.

15. Visionneuse panoramique jQuery

jQuery Panoram Viewer vous aide à intégrer des images Panorama sur votre site Web. Grâce à ce plugin, vous pouvez afficher vos images Panorama sur votre site Web. Pour ce faire, vous devez d'abord inclure la dernière bibliothèque JQuery et jquery.panorama_viewer.js et panorama_viewer.css dans votre document, puis ajouter la classe "panorama" à votre image dans le HTML. Les versions de bureau et mobiles des navigateurs modernes tels que Chrome, Firefox et Safari ont été testées.

16. SVG Magie

SVGMagic est un plug-in JQuery compatible avec plusieurs navigateurs qui recherche des images SVG sur votre site Web et crée automatiquement une version PNG si le navigateur ne prend pas en charge SVG. Il s’agit d’un plugin simple à usage unique qui ne nécessite aucune configuration.

17. BttrLazyLoading

BttrLazyLoading est un plug-in jQuery qui permet à votre application web de charger uniquement les images dans la fenêtre. Il vous permet également d'avoir différentes versions d'images dans 4 tailles d'écran différentes. BttrLazyLoading permet à votre application Web de retarder le chargement des images jusqu'à ce que l'image défile. De cette façon, le temps de chargement des pages est considérablement réduit.

18. Remodal

Remodal est un plug-in de fenêtre modale d'annotation d'état déclaratif et de suivi de hachage plat, réactif, léger, rapide, facilement personnalisable. Tous les navigateurs modernes le prennent en charge. Vous pouvez facilement définir un conteneur d'arrière-plan modal (comme un effet de défocalisation).

19.Slinky.js

Slinky.js est un plugin jQuery permettant de créer des listes de navigation coulissantes à l'aide d'en-têtes empilés. Il possède d'innombrables fonctionnalités : comme un glissement fluide en désactivant les événements de curseur, un poids léger d'environ 1 Ko une fois compressé, l'actualisation lors du redimensionnement de la fenêtre et des modifications du DOM, et la compatibilité avec les dernières versions de vos navigateurs préférés.

20. Arrière-plans adaptatifs

Adaptive Backgrounds est un plug-in jQuery permettant d'extraire les couleurs principales des images et de les appliquer aux éléments parents. Ce plugin utilise des éléments canevas et des objets ImageData. En raison de ses restrictions de sécurité intersites, si un script tente d'extraire la couleur d'une image d'un hôte autre que le nom de domaine actuel, il échouera à moins que l'image ne le permette. partage des ressources d’origine.

21. Gros pied

Les notes de bas de page sur les pages Web sont ennuyeuses. Vous cliquez sur un petit nombre, passez au bas de la page, trouvez la note de bas de page que vous recherchez, puis cliquez sur un lien pour revenir là où vous étiez sur la page. Bigfoot semble rendre l'ensemble du processus indolore. Il détecte automatiquement le lien et le contenu de la note de bas de page, convertit le lien en un bouton facile à cliquer et affiche une fenêtre flottante lorsque le lecteur clique sur le bouton de note de bas de page (Traduction : la version de démonstration officielle saute directement).

22. Dynatable

Dynatable est un plug-in de table sémantique et interactif plus intéressant utilisant jQuery, HTML5 et JSON. Et pas seulement pour les formulaires. L'objectif de Dynatable est de fournir une API simple et extensible qui permet une navigation et une manipulation faciles de grands ensembles de données.

23. Étiquette jQuery meilleure

jQuery Label Better est comme un élégant patron d'animation qui vous aide à étiqueter les entrées de formulaire sans prendre de place. La chose la plus unique à propos de ce plugin est que tout ce que vous avez à faire est simplement d'ajouter un texte d'espace réservé et nous afficherons l'étiquette lorsque l'utilisateur en aura besoin.

24. Braquage

stickUp est un plug-in jQuery. Vous pouvez le faire sur n'importe quelle page Web en utilisant jQuery. Vous pouvez simplement créer n'importe quel élément sur n'importe quelle page que vous souhaitez que les utilisateurs voient à tout moment, et il restera en haut de la fenêtre du navigateur dès que l'utilisateur le glissera.

25. Mur gratuit

Freewall est un plugin jQuery réactif multi-navigateurs qui utilise d'excellents effets d'animation CSS3 et des événements de rappel pour vous aider à créer de nombreux types de mises en page de grille : mises en page évolutives, mise en page d'image, grille imbriquée, fluide grille, grille de style métro, grille de type Pinterest. Freewall est une solution tout-en-un permettant de créer des dispositions de grille dynamiques pour ordinateur, mobile et tablette.

26. jQuery interactif 3D

jQuery Interactive 3D est un plug-in qui nous permet d'utiliser plusieurs images pour remplir une fonction similaire. C'est simple à utiliser, utilisant des fonctions simples et spécifiant un ensemble d'images nommées. De plus, il existe des options de personnalisation, telles que l'icône du curseur, la vitesse, la prise en charge de l'écran tactile, la lecture automatique, etc.

27. Succinct

Succinct est un plug-in jQuery permettant de tronquer du texte multiligne. Il raccourcit votre texte à la taille spécifiée et ajoute des points de suspension après. Vous pouvez utiliser un sélecteur pour spécifier les éléments à tronquer, puis définir le paramètre de taille pour le montant que vous souhaitez voir.

28. SlideMe

SlideMe ! est un plugin de curseur jQuery réactif et compatible CSS3 qui prend en charge les vues restreintes et plein écran. Il peut être utilisé sur des écrans portrait et paysage, utilise des transitions CSS3 et prend en charge la pagination. Fournit des méthodes de contrôle du glissement (précédent, suivant, etc.), ainsi que des méthodes de rappel qui leur correspondent et plus encore.

29. Glide.js

Glide.js est un plugin jQuery léger (4,5 Ko gzippé) pour créer des curseurs. Il dispose d'un balisage OOCSS et de transformations CSS3 entièrement personnalisables, et peut rappeler JavaScript. Le curseur est réactif ; il s’adapte à tous les appareils et prend en charge le toucher. Vous pouvez contrôler les éléments via le clavier, les événements de diapositive, les fenêtres contextuelles ou les menus fléchés. Glide.js dispose également d'une API publique qui prend en charge tous les événements (lecture, pause, suivant, précédent, etc.).

30.PhotoJShop

PhotoJShop est un plugin jQuery qui nous permet d'appliquer des effets et des filtres simples aux images. Ces filtres incluent le flou, le négatif, le gaufrage, l'éclaircissement, le noircissement, le noir et blanc, la netteté et bien plus encore. Le plugin fonctionne sur le canevas et les images, et les filtres sont faciles à utiliser.

31. Défilement d'une page

One Page Scroll est un plugin jQuery qui simplifie la création de sites Web similaires. Cela nécessite très peu de configuration, il suffit de créer la structure HTML, d'appeler la fonction et vous êtes prêt à partir. En option, comme fonctionnalité supplémentaire, sa vitesse et son comportement en boucle peuvent également être définis. Et il prend en charge les URL optimisées pour le référencement pour chaque page.

32. FerroSlider

FerroSlider est un plugin jQuery permettant de créer des pages entières (ou des curseurs de contenu/image) et presque n'importe quel type de curseur. Le contenu peut être placé de manière flexible, horizontalement ou verticalement, et les plugins facilitent la navigation. Il utilise les transformations CSS3 pour améliorer les performances, fonctionne bien avec les mises en page réactives et fonctionne sur les plates-formes mobiles.

33.Scrolld.js

Scrolld.js est un plug-in open source jQuery unique. Scrolld.js fournit un défilement très précis pour la mise en page et la navigation au niveau des pixels à l'aide de données mises à jour en temps réel. Avec Scrolld.js, vous pouvez toujours faire défiler avec précision jusqu'à la cible spécifiée et toujours offrir la meilleure expérience utilisateur.

34. AnimerScroll

AnimateScroll est un simple plug-in jQuery qui peut être utilisé pour ajouter un effet de barre de défilement détendu. Vous pouvez personnaliser le style de la barre de défilement (plus de 30 effets de défilement) et la vitesse de défilement. L'attribut "padding" contrôle la position finale de la barre de défilement. Ce plugin n'est pas limité à l'intégralité de la page de corps, mais peut également être utilisé pour des éléments spécifiés.

35.MaçonJS

Le plug-in MasonJS jQuery est utilisé pour résoudre les problèmes et les lacunes que rencontrent actuellement la plupart des systèmes de grille. Lorsque vous utilisez Masonry, Isotope ou tout autre plugin de maillage, votre maillage aura parfois des espaces ou des bords irréguliers. Mason a l'habitude de les remplir.

36.JInvertScroll

jInvertScroll est un plugin jQuery qui contrôle le comportement de défilement par défaut et force le défilement vertical. Le plugin est léger (moins de 1 Ko) et ne nécessite presque aucune configuration pour être utilisé. Ajoutez simplement la classe spécifiée à l'élément d'emballage et appelez la fonction JS. De plus, cela facilite la création d'effets d'inspection à l'aide du rappel onScroll (où nous pouvons décider de redimensionner n'importe quel élément).

37. Flowtype.js

FlowType.JS est un plug-in jQuery qui peut ajuster automatiquement la taille de la police (font-size) et le numéro de ligne (line-height) (en fonction de la largeur de l'élément d'habillage) , ce qui permet à notre contenu d'être affiché comme nous le souhaitons. Le plugin fournit des propriétés pour définir la taille et la largeur de police minimales/maximales.

38. nProgrès

NProgress.js est une barre de progression nano. Informez les utilisateurs de ce qui se passe avec des animations réalistes et détaillées. Il s'agit d'une barre de progression légère inspirée de Google, YouTube et Medium, parfaite pour Turbolinks, Pjax et d'autres applications de niveau Ajax.

39. Tidy Time.js

Vous souhaitez afficher une mise à jour temporelle en utilisant un langage convivial ? TidyTime.js est un plug-in qui fait cela, en convertissant les formats d'heure standard en formats d'heure déclarés personnellement.

40.Fullpage.js

FullPage.js est un plug-in simple et facile à utiliser pour créer des pages Web coulissantes en plein écran (également considérées comme des sites Web d'une seule page). Il vous permet de créer un site Web coulissant en plein écran tout en ajoutant des carrousels de style paysage à différentes parties du site. Il est conçu pour fonctionner avec différentes tailles d’écran, ainsi qu’avec les tablettes et les appareils mobiles.

41. jQuery Ombre plate

jQuery Flat Shadow est un plugin qui peut ajouter une ombre de désintégration à tout ce que vous voulez. Il est possible de définir la couleur et l'angle de l'ombre et d'activer ou de désactiver l'atténuation de l'ombre.

42. Carrousel de hiboux

Owl Carousel est un plugin jQuery qui vous permet de créer rapidement des curseurs rotatifs réactifs. Le plugin est convivial et présente n'importe quel contenu HTML dans n'importe quelle représentation. Il propose des options pour définir la vitesse de pagination/balayage, activer/désactiver la lecture automatique, afficher la navigation en encart et bien plus encore.

43.S Galerie

S Gallery est un autre plugin d'album photo jQuery qui affiche les images dans une grille réactive. Il s'inspire de la brochure de la page produit de Sony (réalisée avec Flash) et l'imite complètement. Une fois qu'un élément d'image est cliqué et obtient le focus, vous pouvez accéder à d'autres éléments d'image à l'aide des boutons avant-arrière ou via le clavier.

44. Pop Facile

PopEasy est un plug-in jQuery léger qui est indispensable pour qu'un développeur puisse créer facilement des fenêtres modales. Mettez l'accent sur les éléments importants en appliquant un masque à votre page et en ouvrant une fenêtre modale contextuelle personnalisable.

45. Faites défiler vers le haut

ScrollUp est un plugin jQuery léger permettant de créer une fonctionnalité personnalisée "glisser vers le haut" qui peut être facilement utilisée sur n'importe quel site Web. En attribuant une couleur CSS valide au paramètre activeOverlay, une ligne visuelle est créée pour aider à déterminer la distance de glissement idéale depuis le haut.

46.Mobiscroll

Mobiscroll est un plug-in jQuery permettant de faire défiler des chapiteaux ou des sélecteurs de date et d'heure utilisés sur les appareils à écran tactile (téléphones Android, iPhone, iPad, Galaxy Tab). Les contrôleurs peuvent être facilement personnalisés pour prendre en charge toutes les valeurs personnalisées et peuvent même être utilisés directement comme alternative aux contrôleurs de sélection natifs (listes déroulantes). Les contrôleurs peuvent être thématiques. En CSS, vous pouvez facilement modifier l'apparence. Il prend également en charge des modes de couleur prédéfinis et esthétiques. Testé sur iOS4, Android 2.2, Android 2.3, Chrome, Safari, Firefox, IE9.

47.Cycle2

Cycle, un plugin de diaporama jQuery très populaire du passé, dispose désormais d'une version améliorée : Cycle2. Ce plugin est parfait pour ceux qui cherchent à créer des diaporamas entièrement personnalisés car il ne déclare aucun balisage ni style. De plus, sa fonctionnalité est très flexible. Le cycle 2 prend en charge les mises en page réactives, inclut des options pour presque toutes les options (diapositives globales ou individuelles) et peut être facilement étendu à l'aide de l'API complète.

48.Tooltipster

Tooltipster est un plugin jQuery permettant de créer rapidement une validation HTML5 et des info-bulles flexibles. Ce plug-in appartient au type "petit mais complet". Il ne fait que 4,8 Ko après compression, mais il fonctionne très rapidement et peut être facilement personnalisé. Son apparence peut être modifiée à l'aide de CSS (support de thème) et de flèches, et des effets d'apparence tels que des changements suivant la position de la souris et des délais peuvent être définis.

49.FitText

FitText est un plugin jQuery très simple mais puissant qui peut être utilisé pour garantir que le texte s'intègre dans les éléments définis. Il met automatiquement à jour la taille de la police en fonction de la largeur de l'élément qui l'entoure et garantit que la mise en page n'est pas trop fragmentée (en raison de la taille de la police), même si la page est affichée dans un navigateur de bureau ou mobile. En outre, le plugin offre certaines options de réglage fin, notamment la possibilité de définir une « mise à l'échelle horizontale » et des dimensions minimales à maximales.

50.

Unslider est un plug-in de curseur jQuery destiné uniquement à l'affichage d'images. Il n'y a pas d'effets spéciaux magnifiques ni de décorations inutiles, et le plug-in fait moins de 3 Ko. C'est lisse, flexible et incroyablement petit. Unslider a été testé dans les dernières versions de tous les navigateurs actuels. Dans les navigateurs qui ne sont pas si nouveaux, vous ne pouvez voir que sa « gloire solitaire ». Vous pouvez ajouter la prise en charge des touches fléchées du clavier si vous le souhaitez. Tous les plugins de slider ne sont pas créés égaux, et Unslider le sait. (Traducteur : L'auteur est-il mignon ?)