Trouver et utiliser un plugin jQuery sur votre site web

Partagez si vous aimez ->

jQuery sert à coder plus facilement et plus efficacement en JavaScript. Leur devise le dit d’ailleurs mieux que moi :

« Do more, write less » (« Faîtes plus, écrivez moins »)

Les experts y trouveront un terrain de jeu très favorable à leur imagination. Les débutants seront surpris de la simplicité de mise en œuvre et de la puissance de quelques lignes de code.

C’est à vous, débutants, que je m’adresse aujourd’hui.

Un bon moyen de débuter avec jQuery est d’utiliser l’un des nombreux plugins mis à disposition par la communauté.

Où trouver un plugin ?

Le site officiel

Le site officiel était encore l’année dernière le meilleur site pour trouver des plugins de qualité. Malheureusement, il a été victime de la maladresse d’un employé qui a supprimé purement et simplement toutes les données… :/

Cet incident était alors directement mentionné sur le site. Aujourd’hui, ils ont repris cette absence à leur avantage, tel que nous le montre le nouveau message d’attente.

Le site UI

L’accronyme UI signifie « User Interface ».

Cette variante de la libraire jQuery (qui dépends de la librairie de base, comme tout autre plugin), contient (entre autres) quelques plugins bien utiles pour rendre votre site interactif pour vos utilisateurs.

J’aime bien leur Date Picker que je vous conseille.

D’une manière générale, le site est bien monté, avec de nombreux exemples de configuration de chaque plugins et une documentation exhaustive.

Un site prometteur

« The jQuery List » a tout de suite retenu mon attention: j’aime bien leur interface ergonomique, le classement et le grand nombre de plugin présenté.

Ceci dit, après plusieurs années à le fréquenter (épisodiquement), je suis un peu déçue de son manque d’évolution et de rigueur. Idéalement, il devrait présenter des démos sur la page de présentation de chaque plugin ainsi qu’un résumé des tests passés pour le sélectionner.

Ce type d’information apporterait une vraie valeur ajoutée aux visiteurs du site et garantirait des plugins testés et sélectionnés.

Il reste néanmoins que ce site constitue un rassemblement de plugins non négligeable…si vous avez un peu de temps pour tester, comparer et faire votre choix.

Sur le Web

Google et ses accolytes restent une très bonne source pour répondre à tous vos besoins en matières de plugin.

Les développeurs front-end ont tous un site officiel (à 90% du temps en anglais) pour présenter leurs projets.

Certains plugins très gros et très connus comme « DataTables » ont même leur propre site dédié.

Maintenant que vous avez trouvé votre bonheur, reste à savoir comment correctement l’implémenter sur votre site web.

Utiliser un plugin : les 3 fichiers nécessaires

Outre le fichier principal où se trouve le code HTML sur lequel agira le plugin, 3 fichiers sont nécessaires pour utiliser proprement un plugin jQuery :

  • (1) Un fichier JavaScript contenant la librairie jQuery
  • (2) Un fichier JavaScript contenant le plugin
  • (3) Un fichier JavaScript contenant l’appel au plugin

Etape 1 : la librairie jQuery

Si c’est votre première fois avec jQuery, vous devez:

  • Télécharger la librairie sur votre ordinateur. Choississez la version complète, « de production »
  • Envoyez-le sur votre serveur en FTP
  • Insérez-le dans votre site via la balise « script » comme dans l’exemple suivant (à placer dans la section « script » de votre page):
    <script type="text/javascript" src="/js/jquery.min.1.7.1.js"></script>
Dans mon exemple, j’ai placé la librairie dans un dossier nommé « js » à la racine de mon site. Adaptez le chemin si vous choisissez un autre emplacement.
Adaptez aussi le nom du fichier le cas échéant.

Etape 2 : le plugin que vous avez choisi

  • Téléchargez le plugin choisi sur votre ordinateur.
  • Envoyez-le sur votre serveur en FTP
  • Insérez-le dans votre site via la balise « script » comme dans l’exemple suivant (à placer dans la section « script » de votre page, juste après la librairie):
    <script type="text/javascript" src="/js/jquery.lePluginChoisi.js"></script>
Dans mon exemple, j’ai placé le plugin dans un dossier nommé « js » à la racine de mon site. Adaptez le chemin si vous choisissez un autre emplacement.

Etape 3 : Faire le lien entre le plugin que vous avez choisi et le code HTML sur lequel il doit agir.

on appelle cette action « l’appel au plugin ».

Certains développeurs (ou plutôt « des bidouilleurs ») placent les appels aux plugins dans une balise « script » directement dans la page où se trouve le code HTML.

Je ne vous conseille vraiment pas cette solution, certes plus facile dans un premier temps, mais qui empêche tout espoir de débugging et complexifie les évolutions.

C’est un peu comme partir en vacances sans carte ni assurance: c’est plus facile au départ mais le risque de vous perdre est plus grand, et les possibilités de vous en sortir quasi nulles.

Mon conseil ?

  • Créez un fichier javascript que vous appellerez « call.lePluginChoisi.js » ou « appel.lePluginChoisi.js » (pour les réfractaires à l’anglais)
  • Placez dans ce fichier l’appel au plugin (voir les détails du code ci-après).
  • Envoyez-le sur votre serveur en FTP
  • Insérez-le dans votre site via la balise « script » comme dans l’exemple suivant (à placer dans la section « script » de votre page, juste après les autres fichiers):
    <script type="text/javascript" src="/js/call.lePluginChoisi.js"></script>
Dans mon exemple, j’ai placé le fichier dans un dossier nommé « js » à la racine de mon site. Adaptez le chemin si vous choisissez un autre emplacement.

Que devez-vous écrire dans le fichier d’appel au plugin ?

Ce fichier comportera deux instructions:

1. Attendre que la page soit chargée

Tout d’abord, il doit s’assurer que la page est totalement chargée avant d’appeler le plugin. C’est le rôle du code ci-dessous:

Si vous ne comprenez pas tout pour l’instant, lancez-vous quand même ! Ne sous-estimez jamais la capacité de compréhension de votre cerveau à postériori.

2. Appeler le plugin

Remplacez la ligne : // code à exécuter, par:

$('#id-de-votre-element-html').lePluginChoisi();

Il existe de nombreux autres moyens de sélectionner un élément HTML qu’avec son id. Consulter le site officiel pour les connaître ou amusez-vous à les manipuler sur ce site web.

Allez encore plus loin !

Personnalisez votre plugin

Consultez la documentation de votre plugin pour connaître les différentes options de configurations possibles.

Augmenter la vitesse de votre site.

Pour améliorer la fluidité de votre site, vous pouvez déplacer les 3 balises scripts que vous venez de créer, dans le footer de votre site. Placez-les avant le tag « body » de fermeture.

Ne touchez plus à rien, ça devrait marcher tout seul!

Débugger jQuery

Firebug vous sera d’un grand secours en cas de problème. L’onglet « Console » vous donne les erreurs : n’oubliez pas de les lire !!

« $ is not defined »

Ce message d’erreur intervient soit si vous avez oublié de lier la librairie jQuery (voir étape 1), soit si vous utilisez jQuery à côté d’une autre librairie (comme Mootools par exemple).

Dans ce cas, placer en tête de votre fichier d’appel au plugin la ligne suivante:
jQuery.noConflict();

Et partout dans ce fichier, remplacez le dollar « $ » par « jQuery ».

Vos armes sont prêtes, à vous de jouer!

Partagez si vous aimez ->

Youcef

Concepteur de Sites Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Mon objectif est de vous aider à trouver la solution idéale pour créer votre propre Site Internet.

Vous aimerez aussi...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Simple Share Buttons