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
Discussions par date d’activité
2 discussions
Pour info ; ce plugin fonctionne bien en SPIP 4.1 juste en changeant les bornes de compatibilité.
Répondre à ce message
Je découvre ce plugin, pas mal du tout !
Par contre, la structure générée n’est pas correcte, puisque les onglets sont constitués par des titres h2 successifs (mieux vaudrait une liste ul li), désolidarisés du contenus auquel ils correspondent !
La structure suivante serait plus appropriée :
Bonjour.
J’essayais d’utiliser à nouveau ce plugin (il y a un an et demi j’avais installé puis désinstallé en croyant que ça fonctionnait pas ...en fait ça fonctionne mais seulement dans l’espace public et donc les tests dans l’espace privé ne donnent rien...)
Je rejoints tetue quand à la structure générée qui n’est pas du tout sémantiquement plaisante ! Mais ceci vient de l’astuce mis en plugin, et pour lequel l’auteur à l’époque n’avait pas ce genre de considération : Il est fait une manipulation de DOM en JS sauf qu’on s’est préoccupé que de l’aspect visuel.
Bref, le plugin est oncore perfectible... (et pourrait s’inspirer du travail qui a été fait sur les sommaires...)
Faut-il supprimer tous les onglets pour être Mobile-Friendly
Bonjour,
J’utilisais ce plugin depuis plus de deux ans.
Or depuis peu : « Erreurs mobile friendly by Google »
En cherchant pourquoi les nouveaux outils google m’affichaient des erreurs sur une cinquantaine de pages avec ce message : « ces pages contiennent du contenu flash qui ne peut s’afficher sur les appareils mobiles ».
J’ai découvert que cela concerne en fait , toutes les pages où j’ai placé des onglets pour découper une longue page en plusieurs onglets, avec le plugin « En onglets dans le texte de SPIP, ou ailleurs... »
A l’époque, j’étais hyper débutant, voire ignare dans les tricotages de spip. Je suis un peu moins débutant, p’tet encore ignare concernant le codage quand il dépasse ma compréhension.
Faut-il supprimer tous les onglets pour être Mobile-Friendly ?
J’essaye donc aujourd’hui de simplifier les anciennes pages, pour qu’elles obéissent aux doigts et à l’œil , et mon constat s’oriente plus vers une suppression de tous les onglets posés dans un article, pour le simplifier et en faciliter la lecture en longueur avec des glissades d’écran.
Pour conserver le coté intéressant des onglets, comment faire, pour que certains articles (mais pas tous) des articles très longs, puisse se décliner avec des « breaks » de couleurs différentes par exemple, tout en restant « mobile friendly » ... par exemple comme ici : http://moulinette.choc02.fr/
Qu’en pensez-vous ?
Merci de toutes solutions simples.
Hello
J’ai un petit conflit avec le sommaire automatique.
En effet les intertitres de spip sont en h3, donc si on met un système d’onglets dans un paragraphe, le h2 passe avant et le sommaire devient surprenant !
Bon je vais passer les h2 en h4
Si ça pose problème à quelqu’un, on reviendra en arrière.
Répondre à ce message
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 :
|
