Extensions jQuery

Trouver et utiliser un plugin

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 un plugin

Pour vous faire gagner du temps, je vous propose ces quelques sites : plugins.jquery.com ou jquery-plugins.net, ou encore jqueryscript.net. Ils sont assez bien faits, et 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. 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.

Quelques exemples de plugins

• Parseur RSS / Atom
• Validation de formulaires
• Menus déroulants à un ou plusieurs niveaux
• Cartographie
• …

jQuery UI

Si jQuery offre de très nombreuses méthodes pour gérer le DOM, les propriétés CSS, AJAX et la gestion événementielle, jQuery UI le complète parfaitement en offrant des méthodes additionnelles appliquées à la réalisation de l’interface utilisateur (« UI », dans « jQuery UI », signifie « user interface », soit « interface utilisateur » en français). jQuery UI est en quelque sorte un vaste assemblage de plugins accessibles à travers un seul fichier JavaScript.

De quoi est capable jQuery UI ?

Pour avoir un aperçu des possibilités offertes par jQuery UI, rendez-vous sur le site officiel et testez les différentes fonctionnalités proposées.

Nous allons voir comment utiliser les méthodes parmi les plus intéressantes dans jQuery UI. Pour utiliser cette bibliothèque, comme pour utiliser jQuery, il vous suffit d’y faire référence avec une balise <script> qui pointe vers le CDN Google :

• Version non minimisée
• Version minimisée

Pour améliorer le rendu, la mise en forme des éléments manipulés par jQuery UI peut s’appuyer sur un thème CSS, auquel vous ferez référence via une balise <link>, dans l’en-tête du document. Tous les thèmes sont accessibles en cliquant ici.

Déplacement

La méthode draggable() permet à n’importe quel élément du DOM d’être librement déplacé dans la page. Supposons qu’une page Web soit composée des éléments suivants :

<style>
div{
  width: 150px;
  height: 150px;
  padding: 0.5em;
  border: 1px black solid;
} 
</style>

<span>Déplacez les images et le div comme vous l'entendez</span><br /><br />
<img src="miniPaysage1.jpg">
<img src="miniPaysage2.jpg">
<img src="miniPaysage3.jpg">
<div>Déplacez-moi</div>

Après avoir fait référence aux bibliothèques jQuery et jQuery UI, il suffit d’une instruction jQuery pour rendre déplaçables toutes les balises <img> et <div>:

$(function() {
  $('img,div').draggable();
});

La figure suivante vous montre un exemple d’exécution de ce code, avant et après le déplacement des images et de la balise <div>.

Redimensionnement

La méthode resizable() permet de redimensionner un objet quelconque. Bien qu’elle soit utilisable sur tous les objets du DOM, vous l’utiliserez surtout pour permettre à l’utilisateur de redimensionner des images. Une fois encore, jQuery UI brille par sa simplicité : pour rendre un élément redimensionnable, appliquez-lui simplement la méthode resizable().

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css">

<img id="redim" src="visage.jpg">

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
<script>
  $(function() {
    $("#redim").resizable();
  });
</script>

La figure suivante vous montre le résultat obtenu.

Un accordéon

Imaginez un empilement de balises <div> dont le contenu d’une seule est visible à la fois et vous aurez une idée assez précise de ce que peut produire la méthode accordion(). Pour mettre en œuvre cette méthode, commencez par définir une balise <div> conteneur composée de plusieurs balises de titre <h3> associées à des balises <div> dans lesquelles vous placerez le contenu à afficher. Regardez le code suivant, ce devrait être beaucoup plus clair.

<div id="accordeon">
  <h3><a href="#">Titre du bloc 1</a></h3>
  <div>Contenu du bloc 1</div>
  <h3><a href="#">Titre du bloc 2</a></h3>
  <div>Contenu du bloc 2</div>
  etc.
</div>

Faites référence à un fichier CSS jquery-ui.css sur le CDN Google, puis exécutez la méthode jQuery accordion() sur le <div> conteneur, comme dans le code suivant.

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

La figure suivante vous montre le résultat.

N’hésitez pas à tester les thèmes disponibles pour changer radicalement le rendu de l’accordéon.

Des boîtes de dialogue

La méthode dialog() permet de créer des boîtes de dialogue de bien meilleur aspect que celles affichées avec la fonction JavaScript alert(). Voici comment la mettre en œuvre :

1. Créez une balise <div>.
2. Définissez le titre de la boîte de dialogue dans son attribut title.
3. Appliquez la méthode dialog() à la balise <div>.

L’instruction suivante crée une instance de la boîte de dialogue et l’ouvre :

$('sel').dialog();

Si la boîte de dialogue doit être ouverte et fermée plusieurs fois, vous utiliserez d’autres instructions :

$('sel').dialog({ autoOpen: false; }); //Crée une instance de la boîte de dialogue sans l'ouvrir
$('sel').dialog('open'); // Ouvre la boîte de dialogue
$('sel').dialog('close'); // Ferme la boîte de dialogue

Voici quelques autres options utilisables dans les paramètres de la méthode dialog():

Voici un exemple basique dans lequel une balise <div> est transformée en une boîte de dialogue non modale, centrée et dont les dimensions sont celles par défaut :

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css">

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
…
fugiat quo voluptas nulla pariatur?
<div id="dialog" title="Boîte de dialogue de base">
  Cette boîte de dialogue peut être redimensionnée, déplacée et fermée.
</div>

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
<script>
  $(function() {
    $( "#dialog" ).dialog();
  });
</script>

La figure suivante montre le résultat obtenu.

Supposons maintenant que vous vouliez créer une boîte de dialogue modale comportant deux boutons (Oui et Non) et positionnée en (100, 100). Voici le code à utiliser :

  $(function() {
    $( "#dialog" ).dialog({
      modal: true,
      buttons: {
        "Oui": function() {
          $('body').css('background', 'yellow');
          $( this ).dialog( "close" );
        },
        "Non": function() {
          $( this ).dialog( "close" );
        }
      }
    });
  });

La figure suivante montre le résultat obtenu. Comme vous le voyez, la page est grisée et inaccessible. Lorsque l’utilisateur clique sur le bouton Oui, l’arrière-plan de la page devient jaune, puis la boîte de dialogue se ferme. Lorsqu’il clique sur le bouton Non, l’arrière-plan reste inchangé et la boîte de dialogue se ferme. Ce qu’il faut surtout retenir, c’est que vous pouvez définir des fonctions.

Afficher des onglets

En utilisant des onglets, vous pouvez afficher un grand nombre d’informations dans un espace réduit. Pour visualiser l’ensemble de ces informations, il vous suffit de basculer d’onglet en onglet.

Pour définir des onglets, vous devez imbriquer plusieurs <div> enfants (une par onglet) dans une <div> parent. L’identifiant et l’intitulé des différents onglets sont définis dans une liste à puces insérée dans la balise <div> parent. Voici la structure HTML à utiliser :

<div id="onglets">
  <ul>
    <li><a href="#onglet-1">Titre onglet 1</a></li>
    <li><a href="#onglet-2">Titre onglet 2</a></li>
    <li><a href="#onglet-3">Titre onglet 3</a></li>
  </ul>
  <div id="onglet-1">
    <!--contenu -->
  </div>
  <div id="onglet-2">
    <!--contenu -->
  </div>
  <div id="onglet-3">
    <!--contenu -->
  </div>
</div>

Une fois ces instructions mises en place, appliquez la méthode tabs() à la balise <div> parent (ici #onglets ) :

  $(function() {
    $('#onglets').tabs();
  });

jQuery UI se charge alors du reste. Regardez la figure suivante pour en être convaincus.

Le contenu des différents onglets peut également être obtenu en AJAX. Pour cela, précisez l’adresse URL des pages à afficher dans l’attribut href des différents onglets. Ici par exemple, le premier onglet est obtenu à partir de la balise <div> enfant #onglet-1, le deuxième à partir de la page distante page2.htm et le troisième à partir du programme PHP page3.php :

<ul>
  <li><a href="#onglet-1">Titre onglet 1</a></li>
  <li><a href="http://www.site.com/page2.htm">Titre onglet 2</a></li>
  <li><a href=" http://www.site.com/page3.php">Titre onglet 3</a></li>
</ul>

Exercice « formulaire à étapes »

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Formulaire à étapes</title>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <style>
    #etape1 input[type="radio"] {
      opacity: 0;
      position: fixed;
      width: 0;
    }
    #etape1 label {
      display: inline-block;
      background-color: #ddd;
      padding: 10px 20px;
      font-family: sans-serif, Arial;
      font-size: 16px;
      border: 2px solid #444;
      border-radius: 4px;
    }
    #etape1 input[type="radio"]:checked + label {
      background-color:#bfb;
      border-color: #4c4;
    }
    #etape1 input[type="radio"]:focus + label {
      border: 2px dashed #444;
    }
    #etape1 fieldset {
      border: 0;
    }
    #etape1 legend {
      display: inline;
      position: relative;
      float: left;
      line-height: 2.25em;
      padding-right: 1em;
    }
    form > ul a > span {
      display: none;
    }
    form > ul .ui-tabs-active a > span {
      display: initial;
    }
  </style>
</head>
<body>
  <header>
    <h1>Venez visiter notre école !</h1>
    <p>Vous n'en reviendrez pas !</p>
  </header>
  <form action="#" method="get">
    <ul>
      <li><a href="#etape1"><span>Étape </span>1</a></li>
      <li><a href="#etape2"><span>Étape </span>2</a></li>
      <li><a href="#etape3"><span>Étape </span>3</a></li>
    </ul>
    <fieldset id="etape1">
      <fieldset>
        <legend>Je suis :</legend>
        <input type="radio" name="statut" value="etudiant" id="statut-etudiant">
        <label for="statut-etudiant">
          Étudiant
        </label>
        <input type="radio" name="statut" value="intervenant" id="statut-intervenant">
        <label for="statut-intervenant">
          Intervenant
        </label>
        <input type="radio" name="statut" value="exterieur" id="statut-exterieur">
        <label for="statut-exterieur">
          Extérieur
        </label>
      </fieldset>
    </fieldset>
    <fieldset id="etape2">
      <h2>Étape 2</h2>
      <div class="etudiant">
        <p>
          <label for="etudiant-ecole">
            J'étudie dans l'école :
            <input type="text" name="etudiant-ecole" value="" id="etudiant-ecole" placeholder="Nom de mon école" list="ecoles-liste">
            <datalist id="ecoles-liste">
              <option value="ECV">
              <option value="IUT">
            </datalist>
          </label>
        </p>
        <p>
          <label for="etudiant-niveau">
            en :
            <input type="text" name="etudiant-niveau" value="" id="etudiant-niveau" size="4" list="niveaux-liste">
             année 
            <datalist id="niveaux-liste">
              <option value="1ère">
              <option value="2è">
              <option value="3è">
              <option value="4è">
              <option value="5è">
            </datalist>
          </label>
        </p>
      </div>
      <div class="intervenant">
        <p>
          <label for="intervenant-ecole">
            J'interviens dans l'école :
            <input type="text" name="intervenant-ecole" value="" id="intervenant-ecole" placeholder="Nom de l'école" list="intervenant-ecoles-liste">
            <datalist id="intervenant-ecoles-liste">
              <option value="ECV">
              <option value="IUT">
            </datalist>
          </label>
        </p>
        <p>
          <label for="intervenant-niveau">
            en :
            <input type="text" name="intervenant-niveau" value="" id="intervenant-niveau" size="4" list="intervenant-niveaux-liste">
             année 
            <datalist id="intervenant-niveaux-liste">
              <option value="1ère">
              <option value="2è">
              <option value="3è">
              <option value="4è">
              <option value="5è">
            </datalist>
          </label>
        </p>
      </div>
    </fieldset>
    <fieldset id="etape3">
      <h2>Étape 3</h2>
      ...
    </fieldset>
  </form>
  <footer>
    <p>© <abbr title="École de communication Visuelle">ECV</abbr> 2019–2020</p>
  </footer>
</body>
</html>

Animation : une impression de déjà-vu

Je vais ici vous parler des méthodes show(), hide() et toggle(). Nous les avons déjà étudiées, vous ne devriez normalement avoir aucune difficulté à les utiliser. Si je reviens sur ces méthodes, c’est parce que jQuery UI étend ces méthodes et vous permet d’aller beaucoup plus loin…

Avant de continuer, je précise pour tous ceux qui auraient la mémoire courte que la méthode show() anime un élément en le faisant apparaître, la méthode hide() anime un élément en le faisant disparaître et la méthode toggle() anime un élément en le faisant apparaître ou disparaître, en fonction de l’état de l’élément lorsqu’elle est exécutée. Tout cela reste valide lorsque l’on utilise les méthodes jQuery UI.

Voici la syntaxe à utiliser :

show(effet, options, vitesse, retour);
hide(effet, options, vitesse, retour);
toggle(effet, options, vitesse, retour);

… où :

• effet est l’un des effets suivants : blind, clip, drop, explode, fold, puff, slide, scale, size et pulsate.
• options représente les options à appliquer à l’effet. Ce paramètre est optionnel.
• vitesse est la vitesse d’exécution de l’effet : slow, normal (valeur par défaut équivalente à 400 ms), fast ou un nombre qui représente une durée en millisecondes. Ce paramètre est optionnel.
• retour est une fonction de retour, exécutée lorsque l’effet est terminé. Ce paramètre est optionnel.

Voici un exemple pratique d’utilisation de la méthode jQuery UI show() avec l’effet explode:

<style type="text/css">
  #contenu 
  { 
    width: 240px; 
    height: 135px; 
    border: 1px gray solid; 
    background-color: #aaeae1;
  }
  #contenu h3 
  { 
    margin: 0; 
    padding: 0.4em; 
    text-align: center; 
    background-color: #777;
  }
</style>

  <div id="contenu" style="width: 400px;">
    <h3>Un titre</h3>
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
  </div>

  <script src="http://code.jquery.com/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
  <script>
    $(function() {
    $('#contenu').show('explode');
    });
  </script>

Le code CSS n’est là que pour donner un peu de consistance à la balise <div id="contenu">. Cette dernière contient un titre <h3> et un peu de texte. Le code jQuery applique l’effet explode à la balise <div id="contenu"> via la méthode show().

Je vous conseille de tester les autres effets et les méthodes hide()et toggle()pour vous rendre compte des possibilités offertes. Si vous voulez plus d’informations sur les options relatives aux différents effets, consultez la page qui y est consacrée.

Pour appliquer un effet à un élément sans le faire apparaître ou disparaître, passez par la méthode effect(), en utilisant la même syntaxe que pour les méthodes show(), hide()et toggle().