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

jQuery UI

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

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.

Dans la suite de ce chapitre, je vais vous montrer comment utiliser les méthodes qui m'ont paru les plus intéressantes dans jQuery UI. Pour utiliser cette bibliothèque, il vous suffit d'y faire référence avec une balise<script>qui pointe vers le CDN Google :

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.

Ce chapitre n'est qu'une introduction à jQuery UI. Si vous voulez en savoir plus, je vous conseille de lire le cours « Découvrez la puissance de jQuery UI » écrit par Sainior.

Déplacer et redimensionner des éléments

Déplacement

La méthodedraggable()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 mobiles 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>.

Les trois images et la balise <div> peuvent être déplacées où bon vous semble
Les trois images et la balise <div> peuvent être déplacées où bon vous semble

Redimensionnement

La méthoderesizable()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éthoderesizable().

<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.

L'image peut être redimensionnée en agissant sur les bords droit et inférieur, et sur l'angle inférieur droit
L'image peut être redimensionnée en agissant sur les bords droit et inférieur, et sur l'angle inférieur droit

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éthodeaccordion(). 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 CSSjquery-ui.csssur le CDN Google, puis exécutez la méthode jQueryaccordion()sur le<div>conteneur, comme dans le code suivant.

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

Essayer

La figure suivante vous montre le résultat.

Une seule balise <div> s'affiche
Une seule balise <div> s'affiche

Sélection de date

La méthodedatepicker()transforme une simple zone de texte<input type="text">en un calendrier dans lequel l'utilisateur peut choisir une date. La date choisie est alors copiée dans la zone de texte. Pour utiliser cette méthode, il suffit de l'appliquer à une zone de texte quelconque, après avoir fait référence à un thème et aux bibliothèques jQuery et jQuery UI :

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

Date <input type="text" id="datepicker">

<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() {
    $( "#datepicker").datepicker();
  });
</script>

La figure suivante illustre le résultat obtenu.

La zone de texte a été transformée en un datepicker en une ligne de code
La zone de texte a été transformée en un datepicker en une ligne de code

Qu'en dites-vous ? Plutôt sympathique, non ? Mais que diriez-vous d'avoir un calendrier français ? Ce serait mieux, non ? Pour cela, vous allez initialiser le tableau$.datepicker.regional['fr']comme ceci :

$.datepicker.regional['fr'] = {
  closeText: 'Fermer',
  prevText: 'Précédent',
  nextText: 'Suivant',
  currentText: 'Aujourd\'hui',
  monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
  monthNamesShort: ['Janv.','Févr.','Mars','Avril','Mai','Juin','Juil.','Août','Sept.','Oct.','Nov.','Déc.'],
  dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
  dayNamesShort: ['Dim.','Lun.','Mar.','Mer.','Jeu.','Ven.','Sam.'],
  dayNamesMin: ['D','L','M','M','J','V','S'],
  weekHeader: 'Sem.',
  dateFormat: 'dd/mm/yy',
  firstDay: 1,
  isRTL: false,
  showMonthAfterYear: false,
  yearSuffix: ''};

Puis indiquer que vous voulez utiliser ces données dans la méthodedatepicker():

$.datepicker.setDefaults($.datepicker.regional['fr']);

Ces instructions doivent être placées juste au-dessus de l'appel à la méthodedatepicker(). Vous voilà avec un calendrier en français !

Des boîtes de dialogue

La méthodedialog()permet de créer des boîtes de dialogue de bien meilleur aspect que celles affichées avec la fonction JavaScriptalert(). 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 attributtitle.

  3. Appliquez la méthodedialog()à 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éthodedialog():

Options

Signification

heightetwidth

Hauteur et largeur de la boîte de dialogue à l'ouverture.

modal

Initialisé àtrue, rend la boîte de dialogue modale (c'est-à-dire interdit l'accès à la page). La valeur par défaut estfalse.

position

Position de la boîte de dialogue sur la page (elle est centrée par défaut).

zindex

Z-index de la boîte de dialogue (1000 par défaut).

buttons

Un ou plusieurs boutons affichés dans la boîte de dialogue.

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.

Une boîte de dialogue de base
Une boîte de dialogue de base

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

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

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 boutonOui, l'arrière-plan de la page devient jaune, puis la boîte de dialogue se ferme. Lorsqu'il clique sur le boutonNon, 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.

Une boîte de dialogue modale avec deux boutons
Une boîte de dialogue modale avec deux boutons

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éthodetabs()à la balise<div>parent (ici#onglets) :

<script>
  $(function() {
    $('#onglets').tabs();
  });
</script>

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

La définition d'onglets est un vrai jeu d'enfant avec jQuery UI
La définition d'onglets est un vrai jeu d'enfant avec jQuery UI

Le contenu des différents onglets peut également être obtenu en AJAX. Pour cela, précisez l'adresse URL des pages à afficher dans l'attributhrefdes 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 distantepage2.htmet le troisième à partir du programme PHPpage3.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>

Animation : une impression de déjà-vu

Je vais ici vous parler des méthodesshow(),hide()ettoggle(). 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éthodeshow()anime un élément en le faisant apparaître, la méthodehide()anime un élément en le faisant disparaître et la méthodetoggle()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ù :

  • effetest l'un des effets suivants :blind,clip,drop,explode,fold,puff,slide,scale,sizeetpulsate.

  • optionsreprésente les options à appliquer à l'effet. Ce paramètre est optionnel.

  • vitesseest la vitesse d'exécution de l'effet :slow,normal(valeur par défaut équivalente à 400 ms),fastou un nombre qui représente une durée en millisecondes. Ce paramètre est optionnel.

  • retourest 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 UIshow()avec l'effetexplode:

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

Essayer

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'effetexplodeà la balise<div id="contenu">via la méthodeshow().

Je vous conseille de tester les autres effets et les méthodeshide()ettoggle()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.

Animation de couleurs

Dans la troisième partie du cours, vous avez appris à animer des éléments avec la méthodeanimate(). jQuery UI étend cette méthode : vous pourrez désormais animer la couleur des éléments ! Les propriétés sur lesquelles vous pouvez agir sont les suivantes :

  • backgroundColor

  • borderBottomColor

  • borderLeftColor

  • borderRightColor

  • borderTopColor

  • color

  • outlineColor

La syntaxe de la méthodeanimate()ne change pas :

$('sel').animate({ prop1: val1, prop2: val2, prop3: val3, etc. }, durée, modèle, function() {
  //Une ou plusieurs instructions
});

… où :

  • selest un sélecteur jQuery ;

  • prop1,prop2,prop3sont des propriétés CSS etval1,val2,val3les valeurs associées ;

  • duréeest la durée de l'animation ;

  • modèleest le modèle de progression de l'animation ;

  • function()contient une ou plusieurs instructions qui seront exécutées lorsque l'animation sera terminée.

Pour illustrer l'animation de couleurs, nous allons modifier progressivement la couleur d'arrière-plan et la couleur du texte dans une balise<div>, tout en combinant ces animations avec une modification de la largeur et de la position horizontale de la balise.

<style>
#contenu 
{
  border: 4px gray solid; 
  background-color: #aaeae1; 
  color: black; 
  width: 100px;
  position: relative;
}
#contenu h3 
{
  margin: 0; 
  padding: 0.4em; 
  text-align: center; 
  background-color: #777;
}
</style>

<div id="contenu">
  <h3>Cliquez ici</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').toggle(
    function() {
    $( '#contenu').animate({
      backgroundColor: '#fff',
      color: 'red',
      left: '+=200',
      width: 500
    }, 1000 );
  },
  function() {
    $('#contenu').animate({
      backgroundColor: '#aaeae1',
      color: 'black',
      left: '-=200',
      width: 100
    }, 1000 );
  }
  );  
  });
</script>

Essayer

Le code CSS définit les caractéristiques de la balise<div>et du titre<h3>qui y est inclus. La propriétépositionest initialisée avec la valeurrelativepour permettre le déplacement de la balise.

Le code jQuery applique la méthodetoggle()à la balise<div id="contenu">. Lorsque l'utilisateur clique sur cette balise, les deux fonctions définies dans les paramètres de la méthodetoggle()sont exécutées alternativement.

La première fonction anime la couleur d'arrière-plan, la couleur des caractères, la position horizontale (+=200) et la largeur (500) de la balise<div>. La deuxième fonction redonne à la balise ses caractéristiques à l'ouverture de la page. Pour cela, elle anime la couleur d'arrière-plan, la couleur des caractères, la position horizontale (-=200) et la largeur (100) de la balise<div>.

Modèles de progression

Avec jQuery, vous n'avez accès qu'à deux modèles de progression pour vos animations :swingetlinear. La bibliothèque jQuery UI propose un bien plus grand nombre de modèles de progression :

easeInOutQuad

easeInCubic

easeOutCubic

easeInOutCubic

easeInQuart

easeOutQuart

easeInOutQuart

easeInQuint

easeOutQuint

easeInOutQuint

easeInSine

easeOutSine

easeInOutSine

easeInExpo

easeOutExpo

easeInOutExpo

easeInCirc

easeOutCirc

easeInOutCirc

easeInElastic

easeOutElastic

easeInOutElastic

easeInBack

easeOutBack

easeInOutBack

easeInBounce

easeOutBounce

easeInOutBounce

Après avoir fait référence à la bibliothèque jQuery UI, vous pouvez les utiliser dans toutes les méthodes d'animation :show(),hide(),fadeIn(),fadeOut(),fadeTo(),slideUp(),slideDown()etanimate(). Pour avoir une idée de l'effet des modèles de progression, rendez-vous sur la page qui y est consacrée (voir figure suivante) et cliquez sur les vignettes.

Démonstration en ligne des modèles de progression de jQuery UI
Démonstration en ligne des modèles de progression de jQuery UI

Voici un court exemple qui vous montre comment appliquer les modèles de progression de jQuery UI sur une image :

<button id="easeOutElastic">Effet easeOutElastic</button>
<button id="easeInOutBack">Effet easeInOutBack</button><br />
<img src="balle.png" style="position: relative;">

<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() {
    $('#easeOutElastic').click( function() {
      $('img').css('left','0px');
      $('img').animate({ left: '+=200'}, 3000, 'easeOutElastic' );
    });  
    $('#easeInOutBack').click( function() {
      $('img').css('left','0px');
      $('img').animate({ left: '+=200'}, 3000, 'easeInOutBack' );
    });  
  });
</script>

Essayer

Lorsque le premier bouton est cliqué, l'image est déplacée vers la droite de 200 pixels en utilisant un modèle de progressioneaseOutElastic. Le deuxième bouton fait de même, mais en utilisant le modèle de progressioneaseInOutBack.

  • jQuery UI est le complément idéal de jQuery. Les très nombreuses méthodes proposées dans cette bibliothèque vous permettront d'améliorer l'aspect et les possibilités de vos pages.

  • Pour accéder à la totalité des méthodes contenues dans la bibliothèque jQuery UI, il suffit d'ajouter une balise<script>pour y faire référence.

  • Pour améliorer le rendu, la mise en forme des éléments manipulés par jQuery UI peut s'appuyer sur des thèmes CSS accessibles sur un CDN.

  • Les méthodesshow(),hide()ettoggle()de la bibliothèque jQuery UI donnent accès à de nombreux effets supplémentaires.

  • jQuery UI propose un très grand nombre de modèles de progression, utilisables dans toutes les méthodes d'animation :show(),hide(),fadeIn(),fadeOut(),fadeTo(),slideUp(),slideDown()etanimate().

  • Avec jQuery UI, la méthodeanimate()de jQuery est étendue. Elle peut être utilisée pour animer la couleur des éléments suivants :backgroundColor,borderBottomColor,borderLeftColor,borderRightColor,borderTopColor,coloretoutlineColor.

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