[Article] Mise en place d'une navigation par onglets avec jQuery

[Bovino]

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.

[yotsumi]

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

[Bovino]

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.

[dupard2006]

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

[Bovino]

on fait ce genre de menu rien qu'avec du CSS

J'aimerais bien voir comment

[Kenaryn]

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.

[Bovino]

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.

[Kenaryn]

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

[Bovino]

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.