Article en plusieurs parties : 1 2 3
idTabs — des options futiles
Voici le balisage de base pour idTabs :
<div>
<ul class="menu">
<li><a class="selected" href="#tab1">itemMenu1</a></li>
<li><a href="#tab2">itemMenu2 ?></a></li>
</ul>
<div>
<div id="tab1">Contenu accessible par le lien #tab1</div>
<div id="tab2">Contenu accessible par le lien #tab2</div>
</div>
</div>
Après l’installation de idTabs, voici le bout de code jQuery à ajouter pour signaler au script qu’il doit prendre en compte l’élément ayant la classe .menu :
<script type="text/javascript">
$(".menu").idTabs();
</script>
Voilà, c’est tout. Le script va se débrouiller tout seul comme un grand pour afficher par défaut la div id="#tab1" et masquer les autres.
C’est déjà pas mal, et finalement c’est tout ce qu’on demande à ce genre de script. Mais idTabs va plus loins en proposant quand même quelques options utiles :
- Afficher par défaut un autre onglet que le premier,
- Afficher-masquer les éléments sur un événement
onmouseoverà la place deonclick, - Fondu-enchainé au passage d’un onglet à un autre,
- fonctions personnalisés.
J’espère vous avoir donné envie d’en savoir plus sur idTabs et de voir les paramètres en action.
Passons maintenant à domtab »
Article en plusieurs parties : Page précédentePage suivante
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 [...]