De nombreux développeurs Web se lancent dans la mer de projets de code source ouvert. De nouveaux plugins et frameworks sont publiés presque tous les jours. Et quand vous êtes occupé au travail, il peut être difficile de suivre toutes les dernières versions.
Dans cette vitrine, j'ai rassemblé plus de 30 plugins jQuery différents qui méritent d'être mentionnés par tous les développeurs Web. Le développement d'une interface de site Web peut être difficile et nécessite une précision minutieuse. Développer au-dessus de tout projet open source signifie que vous ne réinventez pas la roue. De plus, vous n'êtes pas le seul à parti pour détecter les bogues dans le code. Et comme jQuery est l’une des bibliothèques JavaScript les plus stables disponibles, ces plugins travaillent souvent main dans la main pour offrir une expérience utilisateur transparente.
Lecteur audio tactile réactif
Ce lecteur audio réactif est l’exemple parfait de jQuery au travail. Vous devez simplement inclure les codes de plug-in et créer tout élément audio HTML5 typique. Cela sera automatiquement converti en un lecteur audio convivial avec une interface utilisateur CSS3 éblouissante.
Sidr
Je suis sûr que de nombreux concepteurs et développeurs reconnaissent le menu latéral coulissant. Cela a été popularisé à partir d'applications mobiles iOS à l'aide de boutons de menu glissants dans la barre d'outils. Et maintenant, cet effet peut être répliqué pour les sites Web utilisant uniquement jQuery et le plug-in Sidr. Regardez la démonstration en direct et voyez comment cela pourrait fonctionner dans vos propres projets.
Imageloader
Vous souvenez-vous d'avoir vu tous ces plugins d'image lazyload? Il y a tellement d'options différentes, et même des plugins WordPress open source gratuits ont été publiés. Ce plugin image loader particulier suit un exemple bien plus intéressant avec le chargement séquentiel de toutes les images, après un effet de fondu. La démonstration en direct est un excellent exemple de la façon dont vous pouvez appliquer cela à votre site Web.
Échantillons
Bien que Swatches n’ait pas d’utilisation pratique dans de nombreux agencements de sites Web, c’est un plugin jQuery merveilleux pour jouer avec des couleurs spécifiques. Ce plugin créera une zone div en utilisant une palette de couleurs associées en fonction de votre choix d’entrée. Générer votre propre jeu de couleurs peut s'avérer difficile et il s'agit d'un outil open source unique pour le travail.
Hot sur Facebook
Hot sur Facebook est une idée plutôt obscure. Mais le plugin fonctionne parfaitement dans tous les navigateurs conformes aux normes, donc pour ceux qui aiment partager sur Facebook, c'est pour vous! Hot sur Facebook prendra une URL et vérifiera le nombre total de partages FB. Ensuite, il sera affiché sur la page en tant que badge de partage de médias sociaux.
Toolbar.js
Le script open source Toolbar.js est assez facile à exécuter, mais a ses limites. Ce plugin créera un petit menu info-bulle de liens d'icônes qui apparaît sur tout élément de votre choix. Il peut être extrêmement puissant, associé à un profil utilisateur ou à une autre interface icône-commande. Cependant, l'effet est plutôt obscur, alors ne soyez pas surpris si vous avez du mal à l'intégrer à votre mise en page.
jQuery PowerTip
En ce qui concerne la gestion des survols d’infos, vous pouvez envisager jQuery PowerTip. Ceci est un plugin relativement nouveau publié en open source sur Github. Vous pouvez consulter la démonstration en direct pour en voir un meilleur exemple, mais l'explication la plus simple consiste à créer des menus contextuels d'info-bulles lorsque vous survolez un élément HTML.
jqTimeline
Le plugin jQtimeline offre des fonctionnalités uniques que je n’ai jamais vues auparavant. Vous pouvez créer un plan de montage horizontal avec des événements de date configurés dans la liste. De cette manière, les utilisateurs peuvent cliquer sur un événement pour afficher plus d'informations. Il a certes ses utilisations pratiques, mais il faudra un peu de code personnalisé pour fonctionner correctement.
Swipebox
Le plug-in Swipebox est une galerie d'images jQuery responsive pour mobiles. Ceci est spécialement conçu pour les applications Web mobiles et les sites Web adaptés aux smartphones et aux tablettes. La galerie d'images occupe la totalité de l'écran et vous pouvez même effectuer un balayage tactile entre les autres images du diaporama.
Mélanger
MixItUp a beaucoup d'options variées et personnalisées et je dirais que c'est plus proche d'un plugin intermédiaire jQuery. Vous devrez comprendre quelques concepts lors de la personnalisation de la configuration par défaut et de son ajout à votre page. Mais cela permettra un tri rapide des éléments dans une galerie de jeux, tels que des éléments de portefeuille, des images, des photographies et bien plus encore.
JQuery Spellchecker
Les concepteurs familiers avec la vérification orthographique dans le navigateur peuvent en être un fan ou le détester complètement. Ce plugin jQuery offre une solution différente où vous pouvez éditer la fonction de rappel pour afficher le vocabulaire associé. C'est un plugin audacieux, totalement gratuit à utiliser, mais qui nécessite également un peu de personnalisation pour fonctionner correctement.
ScrollUp
ScrollUp est dans mon top 5 des nouveaux plugins préférés juste pour sa facilité d'utilisation et ses styles pré-construits. Incluez simplement les fichiers JS dans votre page Web et définissez la distance de décalage par rapport au sommet. Ensuite, après le passage d'un visiteur au-delà de cette limite, un petit div fixe apparaît dans le coin inférieur. C'est une excellente alternative au codage de votre propre bouton à partir de zéro.
Validation de Nod Frontend
Nod est un plugin de validation frontend pour les formulaires de saisie HTML. Avec jQuery, vous pouvez configurer la base réelle des données considérées comme bonnes et mauvaises, puis vérifier ces valeurs une fois que l'utilisateur a soumis le formulaire. Il ne sera pas adopté tant que tous les critères ne seront pas satisfaits.
Select2
Certains menus déroulants ont toujours été bloqués dans leurs propres styles CSS. Certains messages en ligne traitent de la personnalisation de votre propre menu de sélection, mais ne sont souvent pas pris en charge par tous les navigateurs. Ce plugin jQuery Select2 est une amélioration du champ de sélection HTML typique. Il suffit d’inclure le plug-in dans votre rubrique et tous les menus sélectionnés peuvent être mis à jour avec un peu de code.
Info-bulle
En plus de l'excellent plug-in d'aide-mémoire jQuery, je dois recommander Tooltipster pour leur codebase alternatif. J'ai utilisé Tooltipster dans quelques projets et cela fonctionne exactement comme décrit.La plupart des options sont si faciles à implémenter, ce qui permet aux développeurs de personnaliser leurs propres info-bulles avec quelques propriétés CSS.
Vortex
Cet étrange plugin de style carrousel vous permet de créer un panneau dynamique d’éléments en rotation. Le plugin jQuery Vortex est relativement nouveau et des mises à jour sont toujours appliquées régulièrement. Cependant, je pense que cela mérite une mention, car les techniques ne sont toujours pas aussi répandues que vous le souhaiteriez.
je vérifie
iCheck est l’un des meilleurs plugins jQuery que j’ai jamais trouvé pour mettre à jour vos champs de saisie. Les cases à cocher et les boutons radio recevront un tout nouveau look lorsque vous choisirez le style de peau et de couleur approprié. Je vais admettre qu'iCheck est un peu trompeur avec tant d'options confuses au début. Mais plus vous vous entraînerez, plus il vous sera facile d’inclure ce plugin dans votre / vos site (s) Web.
Toute liste Scroller
ALS ou Any List Scroller est un plugin typique de jQuery pour les diaporamas. Mais au lieu d'afficher les images dans une vue plus grande, elles sont pivotées comme un conteneur de défilement d'éléments de page d'accueil typique. Il existe des options pour inclure des flèches des deux côtés et permettre aux visiteurs de basculer manuellement entre les éléments internes.
Tumbo
Tumbo est un plugin assez rudimentaire pour afficher rapidement un flux de votre blog Tumblr. Cela peut être mis à jour pour afficher le contenu de n'importe quel blog Tumblr en utilisant simplement l'URL du sous-domaine. Évidemment, tout le monde n’en aura pas besoin, mais il est bon de savoir que les développeurs travaillent à travers des API telles que Tumblr, intégrées dans des plugins JavaScript.
Spectragramme
En parlant d'API, ce plugin Spectragram est une méthode rapide pour accéder aux photos depuis Instagram. Vous incluez simplement les fichiers JS dans votre en-tête, puis vous spécifiez un utilisateur ou une requête de recherche. Le plug-in Spectragram extraira tous les résultats associés et établira un lien avec la photo d'origine.
jQuery Stripe
Le plugin jQuery Stripe offre une galerie d’images plus traditionnelle. Chaque photo s’affiche uniquement comme un petit éclat vertical sur lequel vous pouvez cliquer pour afficher l’ensemble de l’image. Il existe également des flèches sur les côtés droit et gauche pour changer de vue. Je ne pense pas que ce soit la meilleure option, mais il peut s'agir d'une solution décalée pour les présentations de sites Web atypiques.
SocialCount
SocialCount gère une autre fonctionnalité étrange qui reçoit beaucoup de demandes. Ce plugin vous permettra d'extraire rapidement les numéros des partages Twitter, Facebook et Google+. Entrez simplement l'URL cible et vous pourrez afficher des badges de médias sociaux n'importe où dans votre page Web.
Custom Scrollbar Plugin
jQuery Custom Scrollbar est un plugin fascinant qui mérite beaucoup d'attention. C’est en ligne depuis assez longtemps, mais les effets ne cessent de s’étonner. Vous pouvez rapidement créer un élément div avec une fonctionnalité de survol à l'aide de ces barres de défilement personnalisées. Il est idéal pour gérer du contenu personnalisé qui ne devrait pas occuper l’ensemble de la mise en page.
Smallipop
Smallipop est encore un autre magnifique plugin tooltips jQuery. Vous devriez regarder quelques exemples pour voir comment cela serait implémenté. Chaque plug-in d'aide-mémoire suit ses propres règles et peut ou non intéresser tout le monde. Mais je pense que Smallipop est un excellent choix pour les développeurs qui débutent dans les bibliothèques JavaScript.
jPanelMenu
jPanelMenu est un autre plugin jQuery populaire pour utiliser une navigation coulissante. Vous pouvez rapidement inclure ces codes sur votre site Web pour ajouter les effets sur n’importe quelle page. Il suffit de cibler l'élément d'ouverture / fermeture et chaque fois que l'utilisateur clique dessus, votre navigation masquée s'affichera. Jetez un coup d'œil à la démo en direct pour voir cet effet en action.
Intro.js
Intro.js est un plugin d'introduction à la visite guidée pour jQuery. Vous pouvez choisir un grand nombre d'options et de paramètres personnalisés, mais cela permet également d'obtenir des performances de site Web plus uniques. Je pense qu'Intro.js est le meilleur plugin jQuery pour créer une visite guidée de site Web. Le CSS est facilement malléable et vous pouvez faire une démonstration avec toutes sortes de mises en page.
Lightbox_me
La liste des shadowboxes et des lightboxes a considérablement augmenté depuis 2011. Je pense que le plugin jQuery Lightbox_me est un autre bel exemple de cette fonctionnalité. Vous pouvez configurer des images, des formulaires, des vidéos et d’autres droits HTML directement dans une lightbox modale. Les codes JS sont faciles à apprendre et le plug-in ne nécessite pas beaucoup de modifications personnalisées.
jQuery Carousel
Je pense que l’abitgone jQuery Carousel est définitivement une option particulière. Cela affichera les liens précédent / suivant directement dans l'image div encapsulant toutes les autres images. Cela a l'air vraiment sympa dans des espaces plus petits et vous pouvez redimensionner l'exemple à tout ce dont vous avez besoin. Je pense que cela vaut la peine d’être examiné, mais cela n’est peut-être pas votre option préférée.
Superbox
Connaissez-vous comment Google Images affiche actuellement les résultats? Voici comment jQuery Superbox fonctionne en utilisant vos propres images statiques. Les visiteurs ont la possibilité de parcourir les vignettes et une fois qu’ils ont cliqué, une nouvelle division s’ouvre et affiche l’image complète. J'aime beaucoup ce plugin car l'expérience utilisateur imite Google de très près. Et puisque les gens sont déjà familiarisés avec Google, il permet un échange de données transparent, sans grande confusion.
KGallery
KGallery est une autre belle galerie d’images jQuery dotée de fonctions de diaporama. Les icônes par défaut ne sont pas permanentes et vous pouvez évidemment mettre à jour d'autres bits de l'interface utilisateur. Ce qui retient vraiment mon attention, c’est la possibilité d’inclure des vignettes d’image plus petites dans la conception de la galerie. C'est un plugin assez simple à installer et je vous recommande de tester la démo en direct pour voir ce que vous pensez de la mise en œuvre.
jQuery Litelighter
Beaucoup de grands surligneurs de syntaxe ont été publiés au cours des dernières années. Mais jQuery Litelighter est un autre plugin que j’apprécie beaucoup pour sa simplicité et sa nature gracieuse. Vous pouvez générer une syntaxe surlignée pour presque tous les langages populaires. Elle devrait fonctionner avec l’un des navigateurs Web les plus courants.
bxSlider
bxSlider propose simplement l'une des meilleures expériences utilisateur pour un diaporama d'images. Vous pouvez appliquer ce droit sur votre page d'accueil ou dans toute autre page du site. Il offrira une conception solide aux utilisateurs familiarisés avec les fonctionnalités de diaporama d’images. De plus, les codes jQuery sont très minimalistes et ne gênent pas le site Web pendant de longs temps de chargement.
MeanMenu
Le plugin MeanMenu est une version plus récente et mérite certainement d’être explorée. J'aime beaucoup la façon dont la conception de navigation par défaut sera automatiquement redimensionnée en fonction du nombre total de liens internes. Vous pouvez également inclure des liens de sous-menu qui offrent aux visiteurs une vue plus rapide de votre menu de navigation. Le design n'est pas un excellent choix pour tout le monde, mais c'est un plugin solide et peut s'avérer utile sur certains projets de sites Web.
