Article en plusieurs parties : 1 2 3
domtab — des options utiles
Voici le balisage de base pour domtab :
<div class="domtab">
<ul class="domtabs">
<li><a href="#tab1">Test 1</a></li>
<li><a href="#tab2">Test 2</a></li>
</ul>
<div>Contenu accessible par le lien #tab1</div>
<div>Contenu accessible par le lien #tab1</div>
</div>
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!
<ul class="prevnext">
<li class="prev"><a href="#">previous</a></li>
<li class="next"><a href="#">next</a></li>
</ul>
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:'<img src="massivebuttonprev.png" alt="previous" />',
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 ;)
Article en plusieurs parties : Page précédente
PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car Il n'y pas d'amour, il n'y a que des preuves d'amour
(Jean Cocteau) ;) Merci d'avance.
Tiens tu n’aurais pas une erreur dans ton template single.php par hasard, car j’ai pas de titre dans le navigateur pour ton article :s Je peux te faire un screen si tu veux ;)
J’ai envie de dire qu’ils sont pourris tous les deux ! Je m’explique : le clic sur les liens ne fait pas afficher les ancres dans la barre d’adresse… Pourtant l’intérêt de travailler avec les ancres est que n’importe qui puisse copier l’adresse qui redirigera vers l’onglet approprié. Bref c’est une fonctionnalité très simple à ajouter grâce à location.hash, alors ajoutez là !
@Jérémy: C’est exact, je savais bien que All in One SEO était une vraie m…. catastrophe, mais là j’en ai la preuve (sous réserve que l’erreur ne vienne pas d’un mauvais réglage du bouzin venant de ma part) :p
@Sylvain: C’est l’occasion de demander aux intéressés d’ajouter cette idée à leur todo list !
Merci pour les tutoriels,
J’ai plutôt l’habitude de développer une solution maison à chaque fois. Mais, ce serait bien de changer certaines habitudes :)
On m’avait conseillé nanotabs , pour sa légèreté : 2Ko! Après, je suis pas un expert, mais il me semblait fonctionner très bien… Qu’en penses-tu ?
Par contre, il n’a pas l’air de pouvoir fonctionner sans le JavaScript. Alors, je m’étais inspiré de cette solution et de cet excellent tutoriel pour créer des onglets 100% CSS.
Bonne journée, Thoams ;-)
C’est réparé à ce que je vois :p Perso aucun soucis avec All In one… D’où venait le soucis?
@Thoams : Nanotab est le nouveau projet de celui qui a fait idTabs. J’ai juste fait une petite note dessus il y a quelques jours parce que je ne l’ai pas testé.
Avant de découvrir jQuery, je bidouillais surtout des trucs à base de Suckerfish, (quoique il existe une version de Suckerfish basée sur jQuery si ma mémoire est bonne). Maintenant, je rentabilise les 30ko de jQuery ;)
@Jérémy : J’ai fait un truc à la main dans le
headpour mettre des titles sur les billets seuls.Je ne sais pas pourquoi AiOSEO ne veux pas m’écrire ce satané
title… Enfin, c’est pas grave car j’ai surtout besoin des descriptionss uniques par billet, et là ça fonctionne.Du coup, je me suis rendu compte que le plus important pour moi dans ce plugin pouvait être fait avec un ou deux Customs fields… M’enfin, au moins je le sais pour la prochaine installation ;)
Tient, moi j’ai résolu mon problème, j’ai réussit à mettre mon tableau, mais là je viens de trouver un plugin intéressant pour les wordpresseur qui ne veulent pas trop mettre la main à la pâte… http://www.geekeries.fr/articles/sidebar-tabs-onglet-sidebar-wordpress/
[...] un onglet et la mise en place de liens suivant et précédent pour accéder aux onglets. Voir mon comparatif entre DOMTab et idTabs pour en savoir [...]
[...] un onglet et la mise en place de liens suivant et précédent pour accéder aux onglets. Voir mon comparatif entre DOMTab et idTabs pour en savoir [...]