Utilitaires

Parmi les méthodes jQuery on trouve quelques fonctions très pratiques qui seront employées assez souvent.

length et size

Ces deux techniques sont équivalentes (mais attention à la syntaxe qui diffère). Elles retournent le nombre d’éléments d’un objet jQuery.

C’est très pratique pour tester la présence d’un élément dans la page également.

if($("#form").length) {    
// ...
}
$("img").size(); 

each

Là encore jQuery permet de se simplifier les tâches les plus courantes en JS. Pour boucler sur une liste d’éléments, il suffira donc d’écrire :

$("img").each(function(){
     console.log($(this).attr("src"));
}); 

browser

Pour tester facilement quel navigateur est utilisé et sa version on utilisera par exemple :

if($.browser.msie) {
     if($.browser.version > 6)     {        
     // ...    
     }
}

trim

On trouve aussi d’autres utilitaires comme trim qui permet de supprimer les espaces en début et fin de chaine.

$.trim("  une chaine  "); 

Exemple

Regardons à travers un exemple concret les concepts évoqués plus haut. Il s’agit ici de créer des onglets.

Structure HTML

<div id="onglets">
     <h1>Onglets</h1>
     <ul>
         <li><a href="#onglet_1">Lorem ipsum</a></li>
         <li><a href="#onglet_2">Pan</a></li>
         <li><a href="#onglet_3">Onglet 3</a></li>
     </ul>
     <div class="onglet" id="onglet_1">
         <h3>Onglet 1</h3>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
     </div>     <div class="onglet" id="onglet_2">
         <h3>Onglet 2</h3>
         <p>Portez ce vieux whisky au juge blond qui fume.</p>
     </div>
     <div class="onglet" id="onglet_3">
         <h3>Onglet 3</h3>
         <p>Voix ambigüe d'un cœur qui, au zéphyr, préfère les jattes de kiwis.</p>
     </div>
 </div>

Trois onglets, ainsi qu’un menu composé d’ancres afin de rendre cette structure accessible lorsque JavaScript est désactivé.

Initialisation

$(function(){
     $("#onglets .onglet").hide();
     $("#onglets .onglet:eq(0)").show();
}); 

On commence par n’afficher que le premier onglet par défaut. Pour cela, on masque tout les onglets, et on affiche ensuite le premier.

Notez que $("#onglets .onglet:eq(0)") à pour équivalent $("#onglets .onglet:first"). Notez également que la méthode not permet de simplifier la syntaxe :

$(function(){
     $("#onglets .onglet").not(":first").hide();
}); 

Comportement des liens

$(function(){
     $("#onglets ul a").click(function(){
         $("#onglets .onglet").hide();
         $(this.hash).show();
         this.blur();
         return false;    
     });
}); 

Au click que les liens du menu, on annule le comportement par défaut des liens avec return(false); et avec this.blur(); pour ne pas conserver le focus. Il s’agit ensuite de récupérer l’attribut hash du lien cliqué et d’afficher le div associé en fonction. On masque alors de nouveau tout les onglets pour ne ré-afficher que le bon ensuite.

…Et c’est terminé !

Améliorations

Pour aller un peu plus loin, on peut envisager quelques améliorations.

Animations

En changeant quelques méthodes, on peut facilement animer nos onglets :

$(function(){
     $("#onglets .onglet").not(":first").hide();
     $("#onglets ul a").click(function(){
         $("#onglets .onglet").slideUp("slow");
         $(this.hash).slideDown("slow");
         this.blur();
         return false;    
     });
}); 

Notez néanmoins qui est préférable de bien tester sur les navigateurs supportés l’affichage des animations : elles manquent parfois d’un peu de fluidité. Dans le cas où il est important d’obtenir un effet très fluide, il faudra alors ce tourner vers les plugins.

Onglet courant

Bien souvent, il va être important de faire ressortir graphiquement, quel onglet est activé.

$(function(){
     $("#onglets .onglet").not(":first").hide();
     $("#onglets .onglet:first").addClass("actif");
     $("#onglets ul a").click(function(){
         $("#onglets ul a").parent("li").removeClass("actif");
         $("#onglets .onglet").hide();
         $(this.hash).show();
         $(this).blur().parent("li").addClass("actif");
         return false;    
     });
}); 

Ici, on applique la classe actif aux éléments li du menu.

On y associe par exemple cette feuille de style :

#onglets .onglet {
     border:1px solid #000;
     clear:left;
     padding:5px;
     zoom:1 /* ie */
}
#onglets ul {
     border-right:1px solid #000;
     float:left;
     margin:0;
     padding:0
}
#onglets li {
     position:relative;
     margin-bottom:-1px;
     list-style-type:none;
     padding:5px;
     border-top:1px solid #000;
     border-bottom:1px solid #000;
     border-left:1px solid #000;
     float:left
}
#onglets li.actif {
     border-bottom-color:#FFF
}
#onglets li.actif a {
     text-decoration:none
}
#onglets h3 {
     margin-top:0
}

Génération du menu de navigation

On peut aussi préférer générer le menu nécessaire au fonctionnement des onglets et ne pas le voir apparaitre si JavaScript est désactivé.

$(function(){
     $("#onglets .onglet:first").before(''
     +'<ul>'
     +'  <li class="actif"><a href="#onglet_1">Lorem ipsum</a></li>'
     +'  <li><a href="#onglet_2">Pangrammes</a></li>'
     +'  <li><a href="#onglet_3">Pangrammes (accentu&eacute;)</a></li>'
     +'</ul>'
     +'');
     $("#onglets ul a").click(function(){
         $("#onglets .onglet").hide();
         $(this.hash).show();
         this.blur();
         return false;    
     });
}); 

Onglet par défaut

Il pourrait facilement être envisageable de laisser à l’utilisateur la possibilité d’activer l’onglet qu’il désire par défaut. En passant l’ancre qu’il désire dans l’url par exemple.

$(function(){
     if((window.location.hash) && ($("#onglets").children(window.location.hash).length))     {
         $("#onglets .onglet").hide();
         $(window.location.hash).show();
    }
    else     {
         $("#onglets .onglet").not(":first").hide();    
    }
    $("#onglets ul a").click(function(){
         $("#onglets .onglet").hide();
         $(this.hash).show();
         $(this).blur();
         return false;    
    });
}); 

On teste donc dans un premier temps si une ancre est passée dans l’url et si elle correspond à un élément de nos onglets. Auquel cas, on affiche le div correspondant.

Affichage au survol

Dernier exemple avec la méthode hover qui accepte deux fonctions en paramètre, une pour le mouseover, une pour le mouseout :

$(function(){
     $("#onglets .onglet").hide();
     $("#onglets ul a").hover(function(){
         $("#onglets .onglet").hide();
         $(this.hash).show();
         $(this).blur().parent("li").toggleClass("actif");
         return(false);
    },function(){
         $("#onglets .onglet").hide();
         $("#onglets li").removeClass("actif");
    });
}); 

On cache au chargement tout les onglets, puis au survol des liens on déclenche les fonctions d’affichage et de disparition. La méthode toggleClass supprimer ou ajoute la classe passée en paramètre en fonction de sa présence.

Plugins

Une des autres forces de jQuery, c’est le nombre important de personnes actives dans la communauté. Notamment, ceux qui réalisent des plugins. Les plugins sont en fait des extensions qui vont venir se greffer sur la bibliothèque initiale afin d’en étendre les possibilités.

Il ne sera pas question dans ce tutoriel d’expliquer en détail le fonctionnement de chaque plugin mais plutôt d’en étudier sommairement quelques-un afin de comprendre globalement les mécanismes qui permettent de les mettre en place.

Appel

Pour utiliser un plugin, il faudra l’appeler dans l’entête de notre document. Attention d’ailleurs à l’ordre d’appel qui est important.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
     <head>
         <meta http-equiv="Content-Type" content="application/xhtml+xml;charset=iso-8859-15" />
         <title>Exemple</title>
         <script type="text/javascript" src="./js/lib/jquery.js"></script>
         <script type="text/javascript" src="./js/lib/plugin.js"></script>
         <script type="text/javascript" src="./js/exemple.js"></script>
     </head>
     <body>
         &hellip;
     </body>
 </html> 

Parmis les nombreux plugins, voici une sélection des plus utiles :

jQuery Flash Plugin

Ce plugin (qui est une adaptation de SWFObject en jQuery) permet de charger simplement vos animations Flash. Le tout de manière accessible et transparente.

$("#exemple").flash({
     src:"./swf/flash.swf,
     width:250,
     height:350,
     wmode:"transparent",
     flashvars:{
         param_1:"oui",
         param_2:"non"
    }},{
         version:8
    }
); 

Ici, le contenu du conteneur identifié par exemple sera remplacé (si l’utilisateur active JS et Flash) par le fichier flash.swf. Les dimensions de l’animation sont passées en paramètre, ainsi que (si nécessaire) le wmode, les variables Flash et la version minimale désirée du plugin.

C’est donc dans ce conteneur que se trouvera l’alternative au contenu Flash.

Tooltip

Il s’agit ici de créer dynamiquement une infobulle personnalisée en fonction de l’attribut title d’un élément.

En appliquant ce script :

$(".infobulle[title]").Tooltip({
     track:true,
     delay:0,
     showURL:false,
     showBody:" - ",
     fixPNG:true,
     opacity:0.95,
     left:0;
     top:0
}); 

Le code HTML suivant :

<span title="Titre - Paragraphe" class="infobulle">exemple</span> 

Sera “transformé” en :

<div id="tooltip">
     <h4>Titre</h4>
     <div class="body">Paragraphe</div>
     <div class="url" style="display:none"></div>
 </div> 

Et sera affiche au survol de l’élement.

Comme pour la plupart des plugins, une documentation est fournie, et présente une liste exhaustive des options disponibles. Des exemples illustrent souvent l’utilisation typique également.

Validation

Ce plugin permet de valider un formulaire côté client. Il sera bien sûr fortement recommandé de doubler cette vérification côté serveur toutefois.

Il s’initialise ainsi (avec ici, un exemple de formulaire d’inscription typique) :

if($("#mon_formulaire").length) {     $.validator.methods.telephone_fr =
function(value, element, param){
         return this.required(element) || /^0dsddsddsddsdd$/.test(value);    
};
     $("#mon_formulaire").validate({
         errorContainer:$("#mon_formulaire #message""),
         showErrors:function(errorMap,errorList){
             $("#mon_formulaire #message").html("Votre formulaire comporte des erreurs.");
             this.defaultShowErrors();        
},         rules:{
             adresse_email:{
                 required:true,
                 email:true            
},             mot_de_passe:"required",
             mot_de_passe_verification:{
                 required:true,
                 equalTo:"#mot_de_passe_inscription"            
},             nom:"required",
             telephone:{
                 telephone_fr:true            
}
       
},         messages:{
             adresse_email:{
                 required:"Votre courriel est requis.",
                 email:"Votre courriel est mal complété."            
},             mot_de_passe:"Un mot de passe est requis.",
             mot_de_passe_verification:{
                 required:"Ce champs doit être complété.",
                 equalTo:"Les deux champs ne sont pas identiques."            
},             nom:"Votre nom est requis.",
             telephone:{
                 telephone_fr:"Le numéro ne respecte pas le format français (0× ×× ×× ×× ××)."            
}
       
}
   
});
}

On précise avant tout quel formulaire sera testé, puis ses régles et les messages générés en fonction. On peut également prévoir un conteneur qui affichera un message par défaut. C’est le cas ici avec #message. Notez également la méthode qui précéde la validation et qui permet ici de vérifier un numéro de téléphone avec une expression régulière.

Interface

Il s’agit d’un ensemble de plugins spécialements dédiés aux effets d’animations. On y trouve : sliders, carroussels, infobulles, drag’n’drop, etc. À noter, la page de téléchargement qui permet de sélection précisement les éléments que l’on souhaite.

User Interface

Une nouvelle approche pour les effets d’animation là encore. La collection semble très prometteuse, mais souffre encore de quelques défauts de jeunesse (documentation incomplète et toujours wip).

Datepicker

L’indispensable aide à la saisie de date. Personnalisable à souhait : langue, dates, apparence, etc.

$("input.calendar').attachDatepicker({
     showOn:"both",
     buttonImage:"img/calendar.gif",
     buttonImageOnly:true
}); 

Ce plugin est maintenant inclus dans le package de plugins de User Interface.

Autres plugins intéressants

On le voit, la philosophie de chaque plugin est sensiblement la même. Il faut simplement bien lire la documentation associée, prendre le temps de tester la mise en place et éventuellement bien vérifier l’évolutivité et l’accessibilité de chaque.

En voici quelques autres :

• ThickBox
• pngFix
• Metadata
• Chili

Vous aurez peut-être remarqué que parfois certains plugins nécessitent l’appel d’autres plugins annexes pour fonctionner (comme c’est le cas de Metadata par exemple).

Lire la 3^ème partie de cet article sur jQuery.