• Facile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Trouver et utiliser un plugin

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

 

 

   

La bibliothèque jQuery a été écrite de telle sorte qu'il est très simple de l'étendre en installant des modules additionnels, connus sous le nom d'extensions ou de plugins. De nombreux sites Web se sont spécialisés dans les plugins jQuery.

Dans ce chapitre, je vais vous indiquer deux sites répertoriant ces fameux plugins. Je vous montrerai enfin comment les utiliser.

Trouver et utiliser un plugin jQuery

Trouver un plugin

Pour vous faire gagner du temps, je vais limiter (du moins dans un premier temps) vos recherches à deux sites :The Ultimate jQuery ListetjQuery Plugins. Tous deux très bien faits, ils donnent accès à de très nombreux plugins classés par catégories.

Il vous suffit donc d'aller dans une catégorie et de regarder les plugins proposés. SurThe Ultimate jQuery List, cliquez sur un plugin pour en avoir une description. Si le plugin vous intéresse, rendez-vous sur le site Web dédié afin de le télécharger ; la plupart du temps, la documentation du plugin s'y trouve également. Vous trouverez également souvent une démonstration, ce qui est toujours intéressant pour se décider.

Utiliser un plugin

Vous allez voir qu'utiliser un plugin est la plupart du temps un jeu d'enfant. Nous allons utiliser le plugin « Websanova Color Picker », proposé sur le siteThe Ultimate jQuery List. Rendez-vous donc sur ce site, allez dans la catégorie « Color Pickers » et cliquez surWebsanova Color Picker, puis surVisit Website. Une fois sur le site en question, téléchargez le plugin (il s'agit d'un fichier compressé, choisissez donc le format qui vous convient).

Décompressez l'archive et copiez la version minimisée des fichiers JavaScript et CSS dans le dossier dans lequel vous faites vos développements jQuery. Vous êtes maintenant prêts à utiliser le plugin. Il ne vous reste plus qu'à consulter la documentation. Dans notre cas, elle se trouve en ligne. La figure suivante vous montre à quoi elle ressemble.

La documentation en ligne du plugin « Websanova Color Picker »
La documentation en ligne du plugin « Websanova Color Picker »

Il ne reste plus qu'à faire référence au plugin en utilisant une balise<script>, au code CSS en utilisant une balise<link>dans l'en-tête, et à appliquer les consignes données dans la documentation. Voici un exemple d'utilisation de ce plugin :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Websanova Color Picker</title>
    <link rel="Stylesheet" type="text/css" href="wColorPicker.1.2.min.css" />
  </head>
  <body>
    <div id="wcp1">
      <input id="wcp-input" type="text"/><br />
    </div>

    <script src="jquery.js"></script>
    <script src="wColorPicker.1.2.min.js"></script>
    <script>
      $(function() {
        $("#wcp1").wColorPicker({
            initColor: '#ccf',
            onSelect: function(color){
              $('body').css('background', color);
            },
            onMouseover: function(color){
              $('#wcp-input').css('background', color).val(color);
            }
        });
      });
    </script>
  </body>
</html>

Le code jQuery est directement tiré de la documentation du plugin. Dans cet exemple, la couleur d'arrière-plan de la zone de texte#wcp-inputest modifiée lorsque la souris se trouve au-dessus d'une des couleurs du nuancier et la couleur correspondante est affichée dans la zone de texte :

onMouseover: function(color){
  $('#wcp-input').css('background', color).val(color);
}

Quand l'utilisateur clique sur une des couleurs du nuancier, la couleur d'arrière-plan de la page est mise à jour en conséquence :

onSelect: function(color){
  $('body').css('background', color);
}

L'image suivante montre le résultat.

Le plugin est opérationnel
Le plugin est opérationnel

Et c'est tout ?

Oui, c'est la démarche à utiliser pour interfacer un plugin jQuery quelconque. Si la documentation est bien faite (!) et si vous comprenez un peu l'anglais technique, vous ne devriez avoir aucun mal à utiliser tous les plugins possibles et imaginables.

Quelques exemples de plugins

Cette section s'intéresse à quelques plugins dignes d'intérêt et vous montre comment les utiliser en jQuery. Il existe de très nombreux plugins, et il fallait faire un choix. Si vous ne trouvez pas le plugin de vos rêves dans cette section, cette lecture devrait vous donner les bases pour savoir comment l'utiliser…

Parseur RSS/Atom

De nombreux sites Web proposent des flux de données au format RSS et/ou Atom. En utilisant un parseur, vous pouvez récupérer ces flux de données et les intégrer à votre site. Je vous propose d'utiliser le plugin « FeedEk » qui excelle dans ce domaine.

Rendez-vous sur la page de téléchargement du plugin et cliquez surDownload. Décompressez le fichierFeedEk.rar.

Nous allons maintenant parser un des flux RSS proposés par le sitelemonde.fr. Rendez-vous sur la pagehttp://www.lemonde.fr/rss/, choisissez un des flux proposés, cliquez du bouton droit sur l'icône XML correspondante et sélectionnezCopier le raccourci(ou équivalent) dans le menu contextuel, comme le montre l'image suivante.

L'adresse du flux « À la une » se trouve dans le presse-papiers
L'adresse du flux « À la une » se trouve dans le presse-papiers

Double-cliquez sur le fichierFeedEk_demo.htmlet identifiez la présentation qui vous convient le mieux. Le code jQuery correspondant apparaît juste en-dessous. Il vous suffit alors de la coller dans un nouveau document HTML, de modifier l'adresse du flux en renseignant la propriétéFeedUrlet de compléter ce document  en faisant référence au plugin.

Voici un exemple de code :

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>FeedEk jQuery RSS/ATOM Feed Plugin Demo | jQuery RSS/ATOM Parser Plugin FeedEk Demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="http://momentjs.com/downloads/moment-with-langs.min.js"></script>
  <script src="js/FeedEk.js"></script>
  <link href="css/FeedEk.css" rel="stylesheet" type="text/css" />
  <style>
    body { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;background-color: #efefef;font-size: 13px;line-height: 17px !important; }
    .rssDiv{float: left;padding-right: 35px;}
    ul{width: 300px !important;}
  </style>
</head>
<body>
  <h1>Le Monde - A la Une</h1>
  <div id="divRss"></div>
  <script>
    $(document).ready(function () {
        $('#divRss').FeedEk({
            FeedUrl: 'http://www.lemonde.fr/rss/une.xml',
            MaxCount: 3
        });
    });
  </script>
</body>
</html>

Et voici le résultat correspondant (ici par exemple, c'est le flux « À la une » du journal Le Monde qui s'affiche) :

Le flux « À la une » du site lemonde.fr a été parsé

Validation de formulaires

Vous voulez valider un formulaire avec jQuery ? Aucun problème, si ce n'est le temps passé à imaginer toutes les saisies possibles et à différencier celles qui sont valides de celles qui ne le sont pas. Une autre solution s'offre à vous : utiliser le plugin « Validate ».
Si vous avez choisi la première solution, retroussez vos manches, je vous souhaite bon courage. Si vous avez choisi la deuxième solution, vous pouvez poursuivre la lecture.

Téléchargez le plugin « Validate » , décompressez-le et copiez les fichiers nécessaires dans votre espace de travail. Faites-vous une idée des possibilités du plugin en exécutant le fichierdemo > index.html.

Pour utiliser le plugin « Validate », il suffit d'exécuter la méthodevalidate()lorsque le DOM est disponible :

<script>
  $(document).ready(function() {
    $("#commentForm").validate();
  });
</script>

Pour définir le type de validation souhaité sur un champ du formulaire, affectez-lui la classe correspondante :

  • required: champs requis ;

  • email: adresse e-mail ;

  • url: adresse URL ;

  • date: date ;

  • number: nombre ;

  • creditcard: numéro de carte bancaire.

Si vous regardez le fichierexample.html, vous devriez voir la ligne suivante :

<input id="cemail" name="email" class="required email" />

Ce code signifie que le champ est obligatoire et doit contenir une adresse e-mail. Plutôt facile à mettre en place, non ?

La figure suivante est un exemple d'exécution du script.

Des messages d'erreur sont affichés sous les zones de texte lorsque les informations entrées ne sont pas valides

Les messages d'erreur sont affichés en anglais, mais peut-être les voudriez-vous en français. Pour cela,il vous suffit de faire référence au  fichiermessages_fr.jsdans l'en-tête du document HTML avec une instruction de ce type :

<script src="../dist/localization/messages_fr.js"></script>

Les messages d'erreur seront alors affichés en français :

Un menu déroulant à un ou plusieurs niveaux

Il est souvent nécessaire de mettre en place un menu déroulant dans un site. Plutôt que de tout concevoir « à la main », je vous propose d'utiliser un plugin. L'image suivante montre ce que vous obtiendrez simplement en écrivant quelques lignes de code HTML.

Un menu déroulant en quelques lignes de code HTML avec le plugin « Simple jQuery Dropdowns »
Un menu déroulant en quelques lignes de code HTML avec le plugin « Simple jQuery Dropdowns »

Rendez-vous sur cette page et téléchargez le plugin. Décompressez ce fichier et double-cliquez sur le fichierindex.htmlpour obtenir le résultat de la figure précédente. Voyons ce qui se cache dans le code de cette page. Le plugin utilisé estjquery.dropdownPlain.js. Le simple fait d'exécuter ce script vous dédouane de tout autre code jQuery ! Pour construire votre menu, il vous suffira de définir une liste<ul><li></li></ul>à un ou plusieurs niveaux. Examinons les premiers éléments de la liste définie dans le fichierindex.html:

<ul class="dropdown">
  <li><a href="#">For Facilities</a>
    <ul class="sub_menu">
       <li><a href="#">Artificial Turf</a></li>
       <li>
        <a href="#">Batting Cages</a>
        <ul>
          <li><a href="#">Indoor</a></li>
          <li><a href="#">Outdoor</a></li>
        </ul>
       </li>
       <li><a href="#">Benches &amp; Bleachers</a></li>
       <li><a href="#">Communication Devices</a></li>
       <li><a href="#">Dugouts</a></li>
       <li><a href="#">Fencing &amp; Windscreen</a></li>
       etc.

La première ligne crée une liste de classedropdown. Cette classe correspond aux commandes principales du menu. La balise<li>suivante définit le titre du premier menu. Vient ensuite une balise<ul>de classesub_menu. Cette balise contient toutes les commandes attachées au premier menu. Pour créer des commandes de menu secondaires, il suffit d'imbriquer une autre liste<ul>composée d'autant de balises<li>que de commandes de menu secondaires. Par exemple, la commande « Batting Cages » donne accès aux commandes de menu secondaires « Indoor » et « Outdoor ». Rien de plus compliqué !

Si vous devez mettre en place un menu sur un de vos sites Web, ce plugin devrait vous faciliter grandement la tâche. Pensez simplement à insérer les fichiersjquery.dropdownPlain.jsetstyle.cssdans les dossiersjsetcssde votre site (ou d'adapter selon vos besoins), et le tour sera joué !

Cartographie

Que diriez-vous d'afficher sur votre site Web une carte géographique centrée sur un point particulier ? C'est ce que je vous propose de faire avec le plugin « gMap », qui interface le système de cartographie Google Maps. Rendez-vous sur cette page et téléchargez la dernière version compressée du plugin.

Voyons comment afficher une carte du monde. Créez un nouveau document HTML et insérez une balise<div>dans le corps du document. Donnez à cette balise la dimension que vous voulez lui voir occuper dans la page et affectez la valeurhiddenà son attributoverflow:

<div id="map1" style="width: 800px; height: 600px; border: 1px solid #777; overflow: hidden;"></div>

Pour accéder à toute la puissance de Google Maps, utilisez trois balises<script>pour faire référence à la bibliothèque jQuery, à l'API de Google Maps et au pluginjquery.gmap.min.js:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAA6cQIrMEc9zlaKBjWiPM5rxSjlBXfTSDcGsB79vzL90uiOHMpbBRa1FFoX2YfuQNFvFKxQtpz0ZCeuw&amp;hl=fr"></script>
<script type="text/javascript" src="jquery.gmap.min.js"></script>

Pour afficher la carte du monde dans la balise<div id="map1">, il vous suffit de lui appliquer la méthodegMap()dès que le DOM est disponible :

<script>
  $(function() {
    $('#map1').gMap();
  }); 
</script>

L'image suivante vous montre le résultat.

Une seule instruction permet d'afficher une carte
Une seule instruction permet d'afficher une carte

Plusieurs paramètres peuvent être passés à la méthodegMap(). Entre autres :

  • La latitude et la longitude : propriétéslatitudeetlongitude;

  • Des informations sur le centre de l'affichage : propriétéaddress;

  • Le facteur de zoom : propriétézoom(entre 1 et 19) ;

  • Le type de la carte : propriétémaptype(HYBRID,TERRAIN,SATELLITE,ROADMAP).

Pour connaître la latitude et la longitude d'une ville, allez sur le site de Google Maps, tapez le nom de la ville dans le champ de recherche et appuyez sur la touche Entrée de votre clavier. La carte se centre sur la ville avec une icône. Faites un clic droit sur cette icône et choisissezPlus d'infos sur cet endroit. Le champ de recherche est alors mis automatiquement à jour avec la latitude et la longitude.

Pour terminer, voici un exemple concret d'utilisation. Nous allons afficher une carte centrée sur la ville d'Albi, située aux coordonnées (43.92, 2.14). Le texte « Albi » sera affiché dans une bulle, le facteur de zoom sera égal à 10 et la carte sera de type « vue en relief ». Voici le code à utiliser :

$("#map").gMap({ markers: [{ 
  latitude: 43.92,
  longitude: 2.14,
  html: "Albi",
  popup: true }],
  maptype: 'TERRAIN',
  zoom: 10 });
  • Il est possible d'élargir les possibilités de jQuery en utilisant des plugins. Il en existe beaucoup et ils vous rendront de grands services.

  • Pour faire référence à un plugin, il suffit de l'appeler en utilisant une balise<script>.

  • Une fois le plugin référencé, vous pouvez l'appeler comme n'importe quelle autre méthode jQuery. Par exemple :$('#monId').monPlugin(10, 'rouge').

 

Exemple de certificat de réussite
Exemple de certificat de réussite