Trouver et utiliser un plugin jQuery sur votre site web

Trouver et utiliser un plugin jQuery sur votre site web

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 oeuvre 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!

débutant, développeur, JavaScript

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

11 commentaires

  1. Merci pour cet article sur Jquery !

    C’est clair que les bibliothèques sont très pratiques pour enrichir son site.

    Une bonne découverte par rapport à un lien pour rechercher des plugin Jquery =)

    Répondre
  2. Bonjour,

    Merci pour ce tutorial.

    J’ai beau faire, je n’arrive pas à utiliser le plugin qui m’intéresse. Si je vous envoie mes 4 docs (librairie, plugin, call, et page test html), vous pourriez me dire ce qui cloche SVP?

    Merci d’avance,

    Antoine Canal

    Répondre
    • Ca + l’url de la page avec le bug et je devrais pouvoir vous aider. Pas avant la fin de la semaine ceci dit!

      Répondre
      • Ok. Merci beaucoup. Comment je fais pour vous faire parvenir tout ça? Je ne peux pas joindre de pièces ici.

        Amicalement,

        Antoine

  3. Je viens de voir que vous étiez le webmaster.

    Je vous ai envoyé toutes les infos par la section contact.

    Je me suis également inscrit, mais le mail de confirmation ne contenait pas le lien cliquable de validation.

    Amicalement,

    Antoine

    Répondre
    • Bonjour Antoine,

      Je viens d’activer votre compte, vous devriez recevoir la notification par mail. Merci pour votre inscription :)

      Je n’ai pas eu le temps de traiter votre email aujourd’hui, mais je vais y jeter un oeil ce we.

      Amicalement,

      Répondre
      • Ok, merci beaucoup. Je viens de me rendre compte moi-même d’une grosse erreur dans la ligne de code, j’avais mal compris ce qu était sur le site de wordpress. Mais même après correction, je dois me tromper de code, car cela ne marche pas.

        Merci d’avance.

        Amicalement,

        Antoine

  4. bjr mrc pour l’explication !!
    j’ai utilisé un fichier jawr qui sert à regrouper les css, et js et aussi les importations des plugins de jquery mais il ne fonctionne pas avec les plugins

    Répondre
    • Bonjour,

      Merci pour l’info, je ne connaissais pas ce service.

      Répondre
      • bonsoir

        jawr est un fichier d’extension .properties ,comme j’ai dit il compresse les feuilles de style ;fichiers JavaScript et aussi les images .le vrai but est d’évité d’importer chaque (link ou script)seulement et de n’est pas importé tous les fichiers et aussi il diminuer la taille des fichiers.
        voilà un exemple de jawr sans intégration avec jquery:::::::::

        #jawr.css.bundle.header.id=/bundles/headerBundle.css
        #jawr.css.bundle.header.mappings=/_style/_style.css, /jsptabcontrol/jsptabcontrol.css, /theme/extremecomponents.css, /theme/popup/dhtmlwindow.css, /theme/ext-all.css, /theme/style/communStyle.css, /theme/autosuggest/autosuggest_inquisitor.css
        #jawr.css.bundle.basedir=/_style, /theme,/theme/popup, /jspcontrol, /config, /notifier
        #
        #jawr.js.bundle.header.id=/bundles/headerBundle.js
        #jawr.js.bundle.header.mappings=/theme/autosuggest/bsn.AutoSuggest_2.1.3_comp.js
        #jawr.js.bundle.basedir=/theme
        #
        ####### SLIDER :
        #
        #jawr.js.bundle.slider.id=/bundles/sliderBundle.js
        #jawr.js.bundle.slider.mappings=/javascripts/prototype.js, /theme/agenda/jquery/jquery-1.5.2.min.js, /theme/agenda/jquery/jquery-ui-1.8.11.custom.min.js, /notifier/jquery.pnotify.min.js
        #jawr.js.bundle.basedir=/javascripts, /theme, /notifier
        #
        #jawr.css.bundle.slider.id=/bundles/sliderBundle.css
        #jawr.css.bundle.slider.mappings=/notifier/jquery.pnotify.default.css, /notifier/jquery.pnotify.default.icons.css, /notifier/jquery-ui-1.8.16.custom.css
        #jawr.css.bundle.basedir=/notifier
        #

Trackbacks/Pingbacks

  1. Rétrospective 2012 et bonne année 2013 ! - Les Doigts dans le Net - [...] Trouver et utiliser un plugin jQuery sur votre site web [vidéo] [...]

Soumettre un commentaire

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

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint