Ce script utilise JavaScript mais se comporte bien en cas de désactivation. De plus il place un cookie de sorte qu’au retour sur la page, il s’ouvre sur l’onglet que vous avez quitté ;-)
Vous pouvez mettre ce que vous voulez dans le contenu, texte, image, vidéo...
.
Utilisation
A la rédaction du texte de votre article procédez comme suit :
<onglet|debut|titre=xxx>
contenu du premier onglet
<onglet|titre=xxx>
contenu du deuxième onglet
<onglet|titre=xxx>
contenu du troisième onglet
etc...
<onglet|fin>
Utilisation dans le squelette
Je vous livre à titre d’exemple ce script qui m’a été demandé par un utilisateur. Il affichera les différentes traductions de votre article, l’onglet s’ouvrira dans la langue courante, SPIP c bô...
<B_traductions>
<div class="tab-pane" id="xx">
<BOUCLE_malang(ARTICLES){traduction}{lang}>
<div class="tab-page">
<h2 class="tab">#LANG</h2>
#TEXTE
</div> </BOUCLE_malang>
<BOUCLE_traductions(ARTICLES){traduction}{exclus}{par lang}>
<div class="tab-page">
<h2 class="tab">#LANG</h2>
#TEXTE
</div>
</BOUCLE_traductions>
</div>
</B_traductions>
Un autre tableau dans le texte ? Précisez juste une id dans le premier onglets :
<onglet|debut|id=xx|titre=xxx>
Pointer directement vers un onglet
En mettant un id
à un onglet (<div id="toto" class="tab-page">
par exemple), il suffit d’ajouter l’ancre de même nom à l’URL pour que l’onglet soit automatiquement sélectionné (example.com/article42.html#toto
par exemple).
Personnalisation
Par défaut les onglets ont une taille fixe de 70 pixels. Vous pouvez changer celà dans la feuille de style, il vous faudra ajuster aussi les images.
Vous pouvez aussi décider de tailles variant avec la longueur de titre de l’onglet, pour cela utilisez la feuille de style fournie ici, enregistrez la dans votre dossier squelettes/css
Have fun ;-)
Cet article est une adaptation du script d’Erik Arvidsson que vous pouvez voir en ligne ici
F.A.Q :
J’ai bien tout fait mais rien ne se passe ! ;-(
Vérifiez que la balise #INSERT_HEAD est bien présente dans vos squelettes. Elle est indispensable au fonctionnement des plugins. A partir de la version 1.9 de SPIP, cette balise est en standard dans le fichier inc-head.html appelé dans le header de tous les squelettes.
Reproduisez ce principe sur votre site, placez vos css et vos javascripts dans ce fichier vous gagnerez du temps...
Voir aussi
- la lame du couteau suisse : Découper un texte en pages et/ou en onglets
Aucune discussion
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |