Débuter avec jQuery

Le code HTML de la page est relativement simple. En dehors du titre de la page, il est composé des deux éléments principaux : les onglets, sous forme de liste non ordonnée <ul> et le contenu des onglets, inséré dans une <div> globale, chaque sous-ensemble étant lui aussi intégré dans une balise <div> comprenant un titre <h2> et du texte. Pour l'affectation des styles ainsi que pour faciliter l'utilisation de jQuery, les deux parties principales possèdent des identifiants, les éléments de contenu possèdent eux une classe commune.

Le style de la liste #onglet définit la propriété display à none pour rendre invisible les onglets si JavaScript est désactivé.

Pour les éléments de la liste, la position fixée à relative va permettre d'utiliser la propriété z-index pour gérer l'empilement des éléments, en particulier l'effet de suppression de la bordure du contenu. La propriété float annule le mode d'affichage vertical par défaut et aligne les onglets horizontalement, de même, list-style fixé à none permet de ne pas afficher de puce. Le padding permet d'agrandir l'espace autour du texte et le margin-right de décaler les onglets les uns par rapport aux autres. S'agissant d'éléments à cliquer, la propriété cursor permet de le signaler en modifiant l'image du pointeur de la souris lors du survol.

Une classe particulière pour les éléments de liste concernera l'onglet en cours d'affichage. Dans ce cas, on supprime la bordure inférieure (il aurait été possible de la supprimer pour tous les onglets, mais cela aurait nécessité de multiplier les déclarations pour chaque coté des bordures, de cette façon, le rendu est identique et simplifié). On applique un style spécifique (texte en gras) et surtout, on indique que cet onglet doit se trouver au-dessus de la pile des calques avec un z-index plus élevé que les autres..

La <div> #contenu possède elle aussi une position en relative, cela va permettre de la décaler vers le haut et de la superposer aux onglets sur quelques pixels (propriété top). Si aucune bordure n'est présente, les éléments seront collés, il faut donc la décaler de l'épaisseur de la bordure de la <div> #content plus de celle de la liste #onglets, soit 6 pixels. En fonction de la valeur du z-index de ceux-ci, ils seront positionnés en-dessous ou au dessus dans la pile d'affichage, ce qui permet de masquer ou non la bordure supérieure et de donner l'impression d'association entre l'onglet et le contenu affiché. La propriété margin permet de décaler la balise par rapport au bord de la page, padding décale le texte par rapport aux bords de la balise. Les angles sont arrondis avec la propriété border-radius (si elle est prise en charge par le navigateur). La propriété overflow, permet de masquer le contenu qui dépasse de l'espace alloué à la balise. Elle sera utile ultérieurement lorsque nous ajouterons des effets. Enfin, la propriété clear permet d'annuler l'effet du float de l'élément précédent et de rétablir un flux normal.

Le script jQuery pour gérer l'affichage du contenu des onglets est particulièrement court. Si nous n'avions pas utilisé jQuery, le code aurait été beaucoup plus long, mais aussi beaucoup plus complexe à comprendre et donc à reprendre ultérieurement. Grâce à jQuery, seule la partie gérant réellement le comportement est codée, le reste (il s'agit souvent de boucles et de conditions, que ce soit sur les éléments à traiter ou les capacités du navigateur) est géré par la bibliothèque. En résumé, vous n'avez qu'à vous préoccuper de l'aspect « métier ».

La première ligne : $(function(){…} comme ce sera le plus souvent le cas, est destinée à faire patienter jQuery jusqu'à ce que le DOM soit chargé (le DOM, pas la page, c'est-à-dire qu'ici, s'il y avait des images à afficher, jQuery n'attendrait pas leur chargement intégral avant de commencer à travailler).

Une fois le DOM prêt à être utilisé, la première action va être d'afficher la barre d'onglets :

$('#onglets').css('display', 'block');

pour pouvoir commencer à naviguer. L'intérêt de procéder de la sorte, en dehors de rendre l'ensemble de la page accessible sans JavaScript, est que même si le chargement de la page était long, il ne serait pas possible de naviguer avant que la fonctionnalité ne soit en place et utilisable.

On met ensuite en place le gestionnaire d'événements pour le clic sur chaque onglet :

$('#onglets').click(function(event) {...}

Vous noterez que l'on ne va pas placer un gestionnaire sur chacun des onglets mais sur la barre d'onglets (balise <ul>) elle-même. On peut considérer que cela reviendrait au même de le faire sur les balises <li> car l'instruction serait quasiment la même. En fait, le gain ne se fait pas au niveau de la taille du code mais de la façon dont il va fonctionner. Même s'il suffit d'une seule instruction pour affecter le gestionnaire sur chaque item de la liste, cela nécessite malgré tout de mettre en réalité autant de gestionnaires que d'onglets. En plaçant le gestionnaire sur la balise <ul>, il n'y aura qu'un seul événement géré par JavaScript, on peut donc considérer que cette façon de faire est plus optimisée.

Une fois l'événement clic détecté, on commence par vérifier quelle balise a réellement reçu l'événement (notez que la propriété target retourne l'élément du DOM, qui possède donc des propriétés standards nodeName et className).

var actuel = event.target;

Si ce n'est pas une balise <li> ou si c'est celle déjà active (repérable par son nom de classe CSS), on ne fait rien et on stoppe l'exécution de la fonction avec l'instruction return.

if (!/li/i.test(actuel.nodeName) || actuel.className.indexOf('actif') > -1)
{
    return;
}

Notez l'utilisation de l'expression régulière /li/i pour vérifier le nom de la balise. Le i signifie que l'on fait une recherche insensible à la casse car la propriété nodeName est supposée retourner le nom en majuscules. Notez aussi que dès que l'instruction return est rencontrée dans le code, cela stoppe l'exécution de la fonction : si l'on entre dans cette condition, alors le reste du code de la fonction ne sera pas exécuté.

On actualise ensuite les noms de classe pour mettre à jour l'affichage de l'onglet actif (on est maintenant obligés d'utiliser la fonction $() pour transformer actuel en objet jQuery) :

$(actuel).addClass('actif').siblings().removeClass('actif');

On souhaite que seul l'onglet sur lequel on vient de cliquer possède la classe actif, comme on connait cet élément (référencé par la variable actuel), on peut lui attribuer directement, il ne reste ensuite qu'à supprimer si besoin le nom de classe pour tous ses éléments frères (.siblings()).

Enfin, on lance la fonction setDisplay() qui va ajuster l'affichage du contenu correspondant à l'onglet actif.

La fonction setDisplay() commence par définir la variable qui sera utilisée :

var modeAffichage;

Puis, elle fait une boucle sur tous les onglets :

$('#onglets li').each(function(rang){...}

Dans cette boucle, on vérifie s'il s'agit de l'onglet actif ou non pour déterminer la valeur de la propriété display à affecter pour la balise <div> correspondant :

modeAffichage = $(this).hasClass('actif') ? '' : 'none';

Enfin, on récupère, cette <div> de contenu (les onglets et le contenu étant dans le même ordre dans le code, le paramètre passé à la fonction de boucle peut être utilisé dans la méthode .eq() pour retrouver le bon élément) et on lui affecte le display adapté :

$('.item').eq(rang).css('display', modeAffichage);

Pour le moment, on a fait que prévoir ce qui va se passer lors d'un clic, mais l'ensemble des contenus des onglets est toujours visible sur la page, on appelle donc la fonction setDisplay() pour initialiser l'affichage.

Le rendu dans le navigateur au chargement de la page est illustré à la figure 5-1.

On constate que cette fonctionnalité particulièrement utile se met en place avec une vingtaine de lignes jQuery. En comparaison, la même fonctionnalité en JavaScript pur pourrait donner :

window.onload = function(){
    document.getElementById('onglets').style.display = 'block';
    document.getElementById('onglets').onclick = function(e){
        var actuel = e ? e.target : window.event.srcElement;
        if (!/li/i.test(actuel.nodeName) || actuel.className. 
indexOf('actif') > -1) {
            return;
        }
        var allOnglets = document.getElementById('onglets'). 
getElementsByTagName('li'),
            i = allOnglets.length;
        while(i--){
            if(allOnglets[i] == actuel){
                allOnglets[i].className += ' actif';
            }
            else{
                allOnglets[i].className = allOnglets[i].className. 
replace('actif', '');
                if(String.trim){
                    allOnglets[i].className.trim();
                }
            }
        }
        setDisplay();
    }
    setDisplay();
};
function setDisplay(){
    var allOnglets = document.getElementById('onglets'). 
getElementsByTagName('li'),
        allContenus = document.getElementById('contenu'). 
getElementsByTagName('div'),
        i = allOnglets.length;
    while(i--){
        if(allOnglets[i].className.indexOf('actif') == -1){
            allContenus[i].style.display = 'none';
        }
        else{
            allContenus[i].style.display = 'block';
        }
    }
}

Bien entendu, ce code ne prend pas en compte des méthodes JavaScript telles que forEach() pour un tableau ou getElementsByClassName(), tout simplement parce que ces méthodes ne peuvent pas encore être considérées comme compatibles sur tous les navigateurs, or le code se doit d'être fonctionnel quel que soit le navigateur utilisé.

D'autre part, la gestion des événements se fait à l'aide de onload et onclick comme propriétés d'éléments HTML. Or, cette façon de procéder n'est pas satisfaisante pour un code réutilisable car elle risque de poser des problèmes pour ajouter, avec d'autres scripts, des gestions d'événements identiques pour ces éléments (chaque nouvelle déclaration écrasera la précédente). Une gestion similaire à celle que propose jQuery alourdira un peu plus le code.

Pour des exemples plus complexes, le ratio sera beaucoup plus élevé.