Médiaforma

All posts in jquery

En utilisant les méthodes first() et next() et en précisant une fonction callback dans les méthodes show() et hide(), il est possible d’enchaîner automatiquement les apparitions et disparitions des éléments.

Tapez le code suivant et sauvegardez-le sous le nom apparition-disparition-chainee.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Apparition et disparition d'un élément</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <button id="afficher">Afficher les images</button>
    <button id="cacher">Cacher les images</button><br/>
    <img src="glace.jpg">
    <img src="desert.jpg">
    <img src="montagne.jpg">
    <img src="mer.jpg">

    <script>
      $(function() {
        $('#afficher').attr('disabled','disabled');

        $('#afficher').click(function(){
          $('#afficher').attr('disabled','disabled');
          $('#cacher').removeAttr('disabled');
          $('.im').first().show(1000, function afficheSuivante(){
            $(this).next('.im').show(1000, afficheSuivante);
          });
        });

        $('#cacher').click(function(){
          $('#cacher').attr('disabled','disabled');
          $('#afficher').removeAttr('disabled');
          $('.im').first().hide(1000, function cacheSuivante(){
            $(this).next('.im').hide(1000, cacheSuivante);
          });
        });
      });
    </script>
  </body>
</html>

 

Quatre images de classe im sont insérées dans le document avec la balise <img> :

<img src="glace.jpg">
<img src="desert.jpg">
<img src="montagne.jpg">
<img src="mer.jpg">

 

Lorsque le bouton #cacher est cliqué :

$('#cacher').click(function(){

 

La première image de classe im est cachée. Lorsque la disparition de l’image est terminée, la fonction callback cacheSuivante() est exécutée :

$('.im').first().hide(1000, function cacheSuivante(){

 

Cette fonction passe à l’image suivante (next()) et la cache à son tour (hide). Lorsque la disparition de l’image est terminée, la fonction callback cacheSuivante() est exécutée. Ainsi de suite jusqu’à la disparition de toutes les images :

$(this).next('.im').hide(1000, cacheSuivante);

 

La même technique est utilisée pour afficher les images les unes après les autres. Lorsque le bouton #afficher est cliqué :

$('#afficher').click(function(){

 

La première image est affichée puis la fonction callback afficheSuivante() est exécutée :

$('.im').first().show(1000, function afficheSuivante(){

 

Cette fonction affiche l’image suivante, puis appelle la fonction callback afficheSuivante(). Ainsi de suite jusqu’à la dernière image :

$(this).next('.im').show(1000, afficheSuivante);

Par défaut l’apparition et la disparition des éléments utilise un modèle de progression swing. Il est possible de modifier ce comportement par défaut en choisissant un modèle linear. Pour cela, il suffit de préciser la valeur ‘linear’ en deuxième paramètre des méthodes show() et hide() :

$('#zebre').show(3000,'linear');
$('#zebre').hide(3000,'linear');

Les méthodes show() et hide() permettent respectivement de faire apparaître et disparaître des éléments quelconques dans le DOM :

show(durée en millisecondes);
hide(durée en millisecondes);

 

Pour illustrer ces deux méthodes, nous allons permettre à l’utilisateur d’afficher et de cacher une image.

 

Saisissez le code suivant et sauvegardez-le sous le nom apparition-disparition.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Apparition et disparition d'un élément</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <img id="zebre" src="zèbre.jpg"><br />
    <button id="afficher">Afficher l'image</button>
    <button id="cacher">Cacher l'image</button>
    <script>
      $(function() {
        $('#afficher').attr('disabled','disabled');
        $('#afficher').click(function(){
          $('#afficher').attr('disabled','disabled');
          $('#cacher').removeAttr('disabled');
          $('#zebre').show(3000);
        });
        $('#cacher').click(function(){
          $('#cacher').attr('disabled','disabled');
          $('#afficher').removeAttr('disabled');
          $('#zebre').hide(3000);
        });
      });
    </script>
  </body>
</html>

 

A l’affichage de la page, le bouton Afficher est désactivé :

$('#afficher').attr('disabled','disabled');

 

Lorsque le bouton #cacher est cliqué, il est désactivé et le bouton #afficher est activé :

$('#cacher').click(function(){
  $('#cacher').attr('disabled','disabled');
  $('#afficher').removeAttr('disabled');

 

L’image est alors cachée en 3000 millisecondes :

$('#zebre').hide(3000);

 

Inversement, lorsque le bouton #afficher est cliqué, il est désactivé et le bouton #cacher est activé :

$('#afficher').click(function(){
  $('#afficher').attr('disabled','disabled');
  $('#cacher').removeAttr('disabled');

 

L’image est alors affichée en 3000 millisecondes :

$('#zebre').show(3000);

jQuery est souvent utilisé pour ajouter des éléments dans une page Web. Si des événements sont attachés aux éléments de même type déjà existants, il est possible d’attacher les mêmes événements aux nouveaux éléments. En utilisant la délégation événementielle, vous ne serez pas obligé de définir une méthode événementielle pour chacun des nouveaux éléments.

Pour mettre en place une délégation événementielle, vous devez utiliser la méthode on() en lui transmettant trois arguments :

$('#del').on('ev', 'sel', function () {
  //Une ou plusieurs instructions
});

 

Où :

  • del est l’élément dont on souhaite cloner le ou les gestionnaires d’événements ;
  • ev est le nom de l’événement concerné ;
  • sel est un sélecteur qui agit comme un filtre ;
  • function() est la fonction à exécuter lorsque l’événement ev est détecté.

A titre d’exemple, nous allons définir un code permettant de dupliquer un élément div en héritant de sa gestion événementielle.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Délégation événementielle</title>
    <style>
      div {
        background:#cfe;
        font-style: italic;
        cursor:pointer;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <script src="jquery.js"></script>
    <div id="master">
      <div>Cliquez pour insérer un autre &ltdiv&gt</div>
    </div>
    <script>
      $('#master').on('click', 'div', function(){
        $(this).after('<div>Cet élément a les mêmes caractéristiques que son parent</div>');
      });
    </script>
  </body>
</html>

 

Le corps du document contient deux éléments div imbriqués :

<div id="master">
  <div>Cliquez pour insérer un autre &ltdiv&gt</div>
</div>

 

Au clic sur le div parent :

$('#master').on('click', 'div', function(){

 

Un élément div est inséré après le div parent. Cet élément div a les mêmes caractéristiques que son parent :

$(this).after('<div>Cet élément a les mêmes caractéristiques que son parent</div>');

 

Il est donc possible de cliquer dessus pour insérer un nouvel élément div.

Voici le code généré après deux clics sur un élément div :


La méthode one() permet de gérer un événement unique et d’ignorer les suivants.

Ici par exemple, seul le premier clic sur le bouton est pris en compte. Les suivants sont ignorés :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Gestionnaire d'événement unique</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <button id="unique">Cliquez sur ce bouton</button>
    <script>
      $(function() {
        $('#unique').one('click',function(e){
          alert('Merci pour ce clic. Les prochains seront ignorés.');
        });
      });
    </script>
  </body>
</html>

Certains éléments du DOM génèrent des événements. Je les ai rassemblés dans ce tableau :

Méthode Événement géré
focus() Réception de focus par l’élément
blur() Perte de focus par l’élément
focusin() Réception de focus par l’élément ou un de ses enfants
focusout() Perte de focus par l’élément ou un de ses enfants
resize() Redimensionnement d’un élément
change() Modification d’un élément

 

A titre d’exemple, ce code utilise l’événement blur() pour tester la validité d’une zone de texte dans un formulaire.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test de la validité d'une zone de texte</title>

  </head>
  <body>
    <script src="jquery.js"></script>
    <table>
    <tr><td>Entrez un nombre compris entre 10 et 20</td><td><input type="text" id="saisie1" autofocus></td></tr>
    <tr><td>Entrez un texte</td><td><input type="text" id="saisie2"></td></tr>
    </table>
    <span id="message"></span>
    <script>
      $(function() {
        $('#saisie1').blur(function(){
          var zone1 = parseInt($('#saisie1').val());
          if ((zone1>=10) && (zone1<=20))
            $('#message').html('La valeur dans la première zone de texte entrée est valide');
          else
            $('#message').html('La valeur dans la première zone de texte entrée ne respecte pas la consigne');
        });
      });
    </script>
  </body>
</html>

 

Lorsque la première zone de texte perd le focus :

$('#saisie1').blur(function(){

 

Le contenu de la zone de texte est lu et mémorisé sous une forme entière (parseInt()) dans la variable zone1 :

var zone1 = parseInt($('#saisie1').val());

 

Si la valeur saisie est dans la fourchette autorisée, un message est affiché dans le span #message :

if ((zone1>=10) && (zone1<=20))
  $('#message').html('La valeur dans la première zone de texte entrée est valide');

 

Dans le cas contraire, un autre message est affiché dans le span #message :

else
  $('#message').html('La valeur dans la première zone de texte entrée ne respecte pas la consigne');

 

Exercice

Affichez la taille de la fenêtre suite à son redimensionnement

Note : L’élément window représente la fenêtre.

 

Solution

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Taille de la fenêtre au redimensionnement</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <span id="message">Redimensionnez la fenêtre</span>
    <script>
      $(function() {
        $(window).resize(function(){
          var x = $(window).width();
          var y = $(window).height();
          $('#message').html('Taille de la fenêtre : ' + x + 'px x ' + y + 'px');
        });
      });
    </script>
  </body>
</html>

 

Au redimensionnement de la fenêtre :

$(window).resize(function(){

Les nouvelles dimensions de la fenêtre sont stockées dans les variables x et y :

var x = $(window).width();
var y = $(window).height();

Puis affichées dans le span d’id #message :

$('#message').html('Taille de la fenêtre : ' + x + 'px x ' + y + 'px');

 

Remarque

Quelques autres événements sont dignes d’intérêt :

  • $(élément).load() est levé quand l’élément est entièrement chargé où élément peut être la page (window) ou un élément auquel est associé une URL (img, script, frame ou iframe).

  • $(window).unload() est levé quand l’utilisateur demande à changer de page


Il est possible d’activer/de désactiver dynamiquement un gestionnaire d’événements.

Pour créer un gestionnaire d’événement à la volée, vous appliquerez la méthode on() à l’élément jQuery concerné :

on('événement',function(e){
  //Traitement de l'événement
}

Pour supprimer un gestionnaire d’événements à la volée, vous appliquerez la méthode off() à l’élément jQuery concerné :

off('événement')

 

A titre d’exemple, ce code définit/annule un gestionnaire d’événements lié au clic sur l’image d’identifiant #target :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Gestionnaire d'événements dynamique</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <img id="target" src="desert.jpg"><br/>
    <button id="activer">Activer le clic</button>
    <button id="desactiver">Désactiver le clic</button>
    <script>
      $(function() {
        $('#activer').click(function(){
          $('#target').on('click',function(e){
            var largeur = $('#target').width();
            $('#target').css('width',largeur+10);
          });
        });
        $('#desactiver').click(function(){
          $('#target').off('click');
        });
      });
    </script>
  </body>
</html>

 

Lorsque l’utilisateur clique sur le bouton d’identifiant #activer :

$('#activer').click(function(){

Un gestionnaire d’événements est mis en place concernant le clic sur l’image :

$('#target').on('click',function(e){

A chaque clic sur l’image, sa largeur est augmentée de 10 pixels :

var largeur = $('#target').width();
$('#target').css('width',largeur+10);

Lorsque l’utilisateur clique sur le bouton d’identifiant #desactiver, le gestionnaire d’événements lié au clic sur l’image est supprimé :

$('#desactiver').click(function(){
  $('#target').off('click');
});

 

Exercice

En partant du code ci-dessous :

  1. Reliez au premier bouton un gestionnaire d’événements qui affiche les coordonnées du pointeur lorsqu’il est au-dessus de l’image.
  2. Annulez ce gestionnaire d’événements au clic sur le deuxième bouton.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Gestionnaire d'événements dynamique</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <img id="target" src="chat.jpg" draggable><br/>
    Position du pointeur <span id="xy"></span><br/>
    <button id="activer">Afficher la position du pointeur</button>
    <button id="desactiver">Ne pas afficher la position du pointeur</button>
    <script>
      $(function() {
        //Insérer le code ici
      });
    </script>
  </body>
</html>

 

Voici le résultat à obtenir :

 

Solution

Voici le code jQuery à utiliser :

$(function() {
  $('#activer').click(function(){
    $('#target').on('mousemove',function(e){
      var y = e.pageY;
      var x = e.pageX;
      $('#xy').html("x = " + x + ", y = " + y);
    });
  });
  $('#desactiver').click(function(){
    $('#target').off('mousemove');
  });
});

Lorsque le premier bouton est cliqué :

$('#activer').click(function(){

Un gestionnaire d’événements est mis en place sur l’événement mousemove de l’image #target :

$('#target').on('mousemove',function(e){

Les coordonnées du pointeur sont alors affichées dans le span d’id #xy :

var y = e.pageY;
var x = e.pageX;
$('#xy').html("x = " + x + ", y = " + y);

Lorsque le deuxième bouton est cliqué, l’événement mousemove n’est plus pris en compte sur l’image #target :

$('#desactiver').click(function(){
  $('#target').off('mousemove');
});