jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Accueil du site > Débuter > Danse avec jQuery : troisième pas

Danse avec jQuery : troisième pas

lundi 2 octobre 2006, par toggg

Article original : http://jquery.bassistance.de/jquery...
merci à © 2006, Jörn Zaefferer - mise à jour : 2006-09-12.

La suite de Danse avec jQuery : deuxième pas


Notez-moi : utilisation d’AJAX

Dans ce chapitre nous écrivons une petite application AJAX qui permet à l’utilisateur d’attribuer une note à quelque chose, exactement comme sur youtube.com.

Nous avons besoin de code serveur pour cela. Mon exemple utilise un fichier php qui lit le paramètre « notation » et retourne le nombre de notes et leur valeur moyenne. Regardez rate.php dans Guide de démarrage jQuery pour le code côté serveur.

Nous n’avons pas pour objectif de faire fonctionner cet exemple sans AJAX [1], c’est pourquoi nous générons les balises nécessaires avec jQuery et nous les attachons à une <div> englobante dont l’ID est « rating ».

$(document).ready(function() {
  // genérer les balises
  var ratingMarkup = ["Veuillez noter: "];
  for(var i=1; i <= 5; i++) {
    ratingMarkup[ratingMarkup.length] = "<a href='#'>" + i + "</a> ";
  }
  // adjoindre les balises au container
  // et appliquer les gestionnaires click aux ancres
  $("#rating").append( ratingMarkup.join('') ).find("a").click(function(e) {
    e.preventDefault();
    // envoyer la requête
    $.post("rate.php", {rating: $(this).html()}, function(xml) {
      // formater le résultat
      var result = [
        "Merci d'avoir noté, moyenne actuelle: ",
        $("average", xml).text(),
        ", nombre de votes: ",
        $("count", xml).text()
      ];
      // afficher le résultat
      $("#rating").html(result.join(''));
    } );
  });
});

Cet extrait génère cinq éléments ancre et les adjoint à l’élément container possédant l’ID « rating ». Ensuite, pour chaque ancre à l’intérieur du container, un gestionnaire click est rajouté. Quand l’ancre est cliquée, une requête POST est envoyée à rate.php avec le contenu de l’ancre comme paramètre. Le résultat retourné au format XML est alors ajouté au container, en remplacement des ancres.

Si vous n’avez pas de serveur web avec PHP installé sous la main, vous pouvez voir un exemple en ligne

Pour un exemple de système de notation très agréable et fonctionnant même sans javascript, vistez softonic.de et cliquez sur « Kurz bewerten ! ».

Vous trouverez plus de documentation sur les méthodes AJAX de jQuery ici ou sur Visual jQuery sous l’index AJAX.

Un problème rencontré très communément lorsqu’on charge du contenu par AJAX est le suivant : en ajoutant à votre document des gestionnaires d’événements qui devraient aussi s’appliquer au contenu chargé, vous devez appliquer ces gestionnaires après que le contenu soit chargé. Pour éviter des duplications de code, vous pouvez déléguer à une fonction.
Exemple :

// utilisons des raccourcis
$(function() {
  var addClickHandlers = function() {
    $("a.clickMeToLoadContent").click(function() {
      $("#target").load(this.href, addClickHandlers);
    });
  };
  addClickHandlers();
});

Maintenant, addClickHandlers() est appliquée une fois que le DOM est chargé et chaque fois que l’utilisateur clique un lien avec la classe clickMeToLoadContent et que le contenu a fini de se charger.

Veuillez noter que la fonction addClickHandlers est définie comme une variable locale, au lieu d’une fonction globale (comme function addClickHandlers() {...}. Conformez vous à cela pour éviter des conflits avec d’autres variables ou fonctions globales.

Avec de l’AJAX simple comme ça, nous couvrons déjà pas mal de « Web 2.0 ». Mais jusqu’à présent, nous manquons d’effets spéciaux.

Liens à retenir :
- jQuery Module AJAX
- API jQuery : descriptions et exemple pour append() et toute autre méthode jQuery
- Thickbox : un plugin jQuery qui améliore la fameuse lightbox en jQuery

Animez-moi : Utilisation de FX

Des animations simples avec jQuery peuvent être réalisées avec show() et hide().

$(document).ready(function() {
  $("a").toggle(function() {
    $(".stuff").hide('slow');
  }, function() {
    $(".stuff").show('fast');
  });
});

Vous pouvez créer toute combinaison d’animations avec animate(), exemple un diaporama avec un fondu :

$(document).ready(function() {
  $("a").toggle(function() {
    $(".stuff").animate({
      height: 'hide',
      opacity: 'hide',
    }, 'slow');
  }, function() {
    $(".stuff").animate({
      height: 'show',
      opacity: 'show'
    }, 'slow');
  });
});

Des effets encore plus surprenants peuvent être réalisés avec la collection de plugins interface. Le site fournit des démonstrations et de la documentation.
Interface n’est que la partie émergée des plugins jQuery, il y en a beaucoup d’autres. Le chapitre suivant montre comment se servir du plugin tablesorter.

Liens à retenir :
- jQuery Module FX
- Le plugin Interface

Triez-moi : utilisation du plugin tablesorter

Le plugin tablesorter permet de trier des tableaux côté client. Vous incluez jQuery et le plugin et spécifiez à celui-ci quelles tables vous voulez trier.

Pour essayer cet exemple, ajoutez cette ligne à starterkit.html (en dessous de l’include jQuery) :

<script src="lib/jquery.tablesorter.js" type="text/javascript"></script>

Après avoir inclus le plugin, vous l’appelez comme ceci :

$(document).ready(function() {
  $("#large").tableSorter();
});

Essayez de cliquer sur les entêtes de la table et constatez comment elle est triée croissante au premier click et décroissante au second.

Le tableau peut être agrémenté de marquage de lignes (rayures), que l’on peut ajouter en passant quelques options :

$(document).ready(function() {
  $("#large").tableSorter({
   // Noms de classes fournis pour les rayures sous forme de tableau.
    stripingRowClass: ['odd','even'],
   // Faire les rayures à l'init de tableSorter.
    stripRowsOnStartUp: true
  });
});

Plus d’exemples et de documentation sur les options disponibles se trouvent sur la page de tablesorter.

La plupart des plugins sont utilisables de cette façon : inclure le fichier du plugin et appeler la méthode du plugin sur certains éléments, en passant des réglages optionnels pour particulariser le plugin.

Liens à retenir :
- Plugins pour jQuery
- Le plugin Tablesorter

P.-S.

Quand vous utiliserez jPlugin plus avant, il vous sera peut-être utile d’empaqueter votre propre code en plugin, aussi bien pour le réutiliser par vous-même ou pour votre entreprise, ou le partager avec la communauté. Le prochain chapitre donne quelques conseils sur la structuration d’un plugin.

Suite : Danse avec jQuery : quatrième et dernier pas

Notes

[1] Ce serait toutefois possible.

Répondre à cet article

2 Messages de forum

  • (logo)

    Danse avec jQuery : troisième pas

    31 août 2008 18:46, par step

    Effectivement tablesorter est un bon pluggin. Toutefois à noter l’absence de documentation pour le tri des données. En effet, le tri ne prend pas en compte les caractères accentués.

    Une piste à ce sujet ?

    Répondre à ce message

  • (logo)

    Danse avec jQuery : troisième pas

    2 octobre 2008 15:38, par Le Loup

    Est il possible de reprendre la main après l’exécution du plug-in sans passer par un nouvel évènement ?
    Par exemple, modifier la mise en forme après le tri du tableau

    Répondre à ce message


Derniers commentaires

Nouveautés sur le Web