Article : présentation par onglets en javascript
Voici une fonction javascript, NavTab, pour présenter le contenu d'une page web sous forme d'onglets, inspiré par le DomTab de Chris Heilmann.
J'ai commencé à utiliser le DomTab original en octobre 2004. Je l'ai ensuite simplifié pour l'adapter aux besoins de la page d'accueil du site. Finalement, j'en suis venu à écrire ma propre fonction, NavTab.
La différence essentielle entre DomTab et NavTab, outre le fait qu'ils sont codés différemment, c'est que ce dernier ne nécessite aucune addition de code html : il analyse l'arborescence du document pour le présenter sous forme d'onglets sans avoir besoin de blocs div pour les délimiter, comme c'est le cas dans DomTab.
Cela le rend sans doute un peu moins performant, surtout avec des textes longs, puisque le script analyse une plus grande quantité de noeuds du document pour afficher/masquer ce qui est nécessaire. Mais la raison qui m'a poussé à développer cette méthode est simple : ne pas avoir à insérer dans les pages du code html dont on peut se passer.
Les blocs div délimitant les onglets dans DomTab sont en effet des structures qui n'ont de sens que pour la présentation, et pour rien d'autre, contrairement à d'autre blocs div tel « header » et « footer » qui, s'ils sont tout autant des balises de présentation, assurent aussi un rôle de structure dans la page en définissant respectivement un en-tête et un pied-de-page.
NavTab s'inscrit donc aussi dans une évolution plus générale qui tend à limiter dans les pages web - voir à supprimer totalement - le code qui a uniquement un rôle de présentation.
A lire :
- Rui Nibau, « Présentation sous forme d'onglets en javascript », Omacronides, 29 août 2005.