Developpez.com - Rubrique JavaScript

Le Club des Développeurs et IT Pro

Mise en place d'une navigation par onglets avec jQuery

Par Didier Mouronval

Le 2011-11-21 19:14:00, par Bovino, Rédacteur


Suite à la sortie de mon livre sur jQuery (jQuery. La bibliothèque qui simplifie l'interaction), je vous propose d'en découvrir un extrait.

Cet article vous montre comment mettre en place facilement une navigation par onglets avec jQuery.

Vous trouverez aussi en fin d'article un autre exemple ajoutant des effets sur l'exemple décrit.

N'hésitez pas à me faire part de vos commentaires et remarques.
De plus, vous aurez peut-être envie d'ajouter vos propres effets à ceux déjà disponibles, n'hésitez pas à les partager !

Mise en place d'une navigation par onglets avec jQuery.

  Discussion forum
8 commentaires
  • 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
    Très bonne idée !

    $('#onglets').click(function(event) {...}
    Moins bonne idée !
    Les délégués servent à placer ce type d'évènements.

    Code : 
    1
    2
    3
    4
    $("#onglets").delegate('li', 'click', function() { };
// ou avec jQuery 1.7
$("#onglets").on('click', 'li', function() { };
    if (!/li/i.test(actuel.nodeName) || actuel.className.indexOf('actif') > -1) {
    A faire du jQuery, autant en faire jusqu'au bout. Surtout quand l'équivalent javascript pur, bien que plus performant, devient très difficile à lire !
    Code : 
    1
    2
    3
    var $target = $(event.target);
if ( ! $target.is('li') || $target.hasClass('actif') ) { }
    Sinon bon tuto
    le 22/11/2011 à 22:52
  • Bovino
    Rédacteur
    J'ai le choix entre ta vidéo de formation et "Javascript: The Definitive Guide" de Danid Flanagan aux éditions Broché.
    A mon sens, les deux ne répondent pas aux mêmes besoins.

    Ma formation sur JavaScript permet d'apprendre la programmation en JavaScript. C'est-à-dire qu'elle ne se veut pas exhaustive au niveau de la syntaxe, mais elle te permet d'apprendre comment coder en JavaScript.
    Le livre de David Flanagan quant à lui est un livre assez particulier puisqu'il constitue une référence écrite du langage (et particulièrement à jour dans sa dernière version), en revanche, apprendre JavaScript avec risque d'être compliqué voire ardu car il présente plus un listing des objets existants et de leurs propriétés et méthodes plus qu'une façon de les mettre en oeuvre dans un script.

    Du coup, si tu en as les moyens, je te conseillerais les deux, sinon, pour débuter, ce serait plutôt ma formation.
    le 26/11/2011 à 16:14
  • Bovino
    Rédacteur
    Salut yotsumi.

    Merci pour ces commentaires pertinents

    C'est un choix que j'ai fait mais tes remarques sont d'autant plus appropriées que je suis aussi un fervent militant de
    A faire du jQuery, autant en faire jusqu'au bout.
    le 23/11/2011 à 20:27
  • dupard2006
    Candidat au Club
    A mon niveau débutant, on fait ce genre de menu rien qu'avec du CSS, j'ai un peu de mal à comprendre l'intérêt de javascript ou de jQuery
    Cela ne retire pas les soucis de compatibilité aux navigateurs ou personnes qui désactivent les scripts ?
    Pouvais-vous m'éclairer.
    Un grand merci d'avance
    le 24/11/2011 à 9:36
  • Bovino
    Rédacteur
    on fait ce genre de menu rien qu'avec du CSS


    J'aimerais bien voir comment
    le 24/11/2011 à 11:54
  • Aurelien Plazzotta
    Membre extrêmement actif
    Bonjour et merci pour le tuto

    Je suis intéressé par l'achat du bouquin mais je m’interroge.

    Faut-il déjà avoir un niveau correct en javascript ou est-il accessible à des débutants?

    Pour être honnête, je n'ai aucune compétence en Javascript.
    le 24/11/2011 à 17:59
  • Bovino
    Rédacteur
    Salut Kenaryn.

    Je ne sais pas si je suis le mieux placé pour te répondre, parce que moi, je préférerais que tu l'achètes

    Pour être franc, il n'est pas nécessaire à mon avis d'être très expérimenté en JavaScript pour le lire, mais un minimum de connaissance du langage est malgré tout requis.
    Malgré tout, j'ai essayé de mettre un maximum d'exemples afin de permettre aux moins expérimentés de bien visualiser ce dont il est question.
    le 24/11/2011 à 20:28
  • Aurelien Plazzotta
    Membre extrêmement actif
    Ok jte remercie pour ta franchise

    Si j'ai bien saisi, je dois donc passer par l'apprentissage du Js.

    J'ai le choix entre ta vidéo de formation et "Javascript: The Definitive Guide" de Danid Flanagan aux éditions Broché.

    Le 1e en français, y en a pour 8h, le 2e en anglais y en a pour... 8 semaines
    le 24/11/2011 à 22:49
  Poster une réponse