Menu à onglets (tabs) — idTabs ou domTab ?

### domtab — des options utiles

Voici le balisage de base pour *domtab* :

Il faut ajouter la classe `domtab` à la `div` qui enveloppe le menu et les contenus et la classe `domtabs` pour la liste `ul` du menu seulement. Par défaut, les balises `div` qui suivent la liste `ul` seront prises en compte comme éléments à afficher-masquer par le script. Il s’agit toutefois d’un paramètre modifiable si vous voulez agir sur d’autres balises HTML.

Peu de différences entre les deux scripts, si ce n’est qu’il n’y a pas besoin d’ajouter du code Javascript pour désiger les classes à atteindre : elles sont déjà prévues dans le script. Si les noms de classes par défaut ne vous conviennent pas, vous pourrez les changer.

En effet, le script offre de nombreuses options paramétrables :

tabClass:’domtab’, // classe pour déclencher les onglets
listClass:’domtabs’, // classe pour le menu
activeClass:’active’, // classe pour le lien courant
contentElements:’div’, // élément à parcourir par la boucle du script
backToLinks:/#top/, // ancre permettant de revenir à l’état d’origine
printID:’domtabprintview’, // identifiant permettant d’imprimer tout les contenus masqués
showAllLinkText:’show all content’, // texte pour l’ancre du texte d’impression des contenus masqués

Comme vous pouvez le constater, les options sont pléthoriques et font de ce *domtab* un petit bijou. Que demander de plus ? Vous auriez tord de vous gêner car Chris Heilmann a pensé à mettre en place des liens *précédent* et *suivant* pour naviguer dans les onglets à partir d’un lien ou d’une image !

Pour celà, il suffit d’ajouter la classe `doprevnext` à la `div` enveloppante qui contient déjà la classe `domtab` ainsi que les liens *précédent* et *suivant* and *the cat’s in the bag!*

• previous
• next

Cette fonction dispose de ses propres paramètres optionnels que voici :

prevNextIndicator:’doprevnext’, // classe pour déclencher les liens *précédent* et *suivant*
prevNextClass:’prevnext’, // classe pour la liste contenant les liens *précédent* et *suivant*
prevLabel:’previous’, // contenu HTML pour le lien *précédent*
nextLabel:’next’, // contenu HTML pour le lien *suivant*
prevClass:’prev’, // classe pour le lien *précédent*
nextClass:’next’, // classe pour le lien *suivant*

L’utilisation de la méthode `innerHTML` au lieu d’une insertion plus propre en manipulant le `dom`, permet d’utiliser des images pour les liens *précédent* et *suivant*, si besoin :

prevLabel:’‘,

J’espère (comment ça, encore) vous avoir donné envie d’en savoir plus sur domtab et de voir les paramètres en action.

### Conclusion

Ces deux scripts ont un fonctionnement similaire. La différence se situe principalement dans les options. A ce titre, *domtab* se distingue particulièrement avec la gestion des liens *suivant* et *précédent* et la possibilité d’imprimer tout les contenus masqués.

*idTabs* n’est pas en reste avec sa gestion du fondu-enchainé. Toutefois, si vous êtes intéressé par des menus à onglets qui pétillent de partout, je vous conseille plutôt jQuery User Interface qui propose — entre autre — une gestion des *tabs* dont vous pouvez voir la démo sur stilburo.

Pour ma part, comme j’ai déjà installé *jQuery*, *idTabs* s’est imposé naturellement, mais *domtab* me fait de l’œil 😉

scoopeo_url=’http://www.css4design.com/menu-a-onglets-tabs-idtabs-ou-domtab’