En onglets dans le texte de SPIP, ou ailleurs...

Published : 18 December 2006 – updated on 14 March 2025 – by Nicolas Hoizey – 136 commentaires

1
2
3
4
5
18 Votes
Une mise en page en blocs superposés, très pratique pour des fiches techniques par exemple, toutes versions SPIP!

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

css onglets taille variable

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

Discussion

5 years 1 year 3 months Without limit
par date
Filter

44 discussions

  • stéphane de SpipFactory

    Hello ,
    j’ai beau relire et relire la doc

    je trouve pas la syntaxe pour mettre des onglets dans des onglets, je tourne en rond

    Un autre tableau dans le texte ? Précisez juste une id dans le premier onglets :

    <onglet|debut|id=xx|titre=xxx>

    qui pourrais le donner la bonne syntaxe
    merci

    <onglet|debut|titre=xxx>
    <onglet|debut|id=xx|titre=xxx>

    <onglet|titre|premier sous onglet>
    contenu premier sous onglet>

    <onglet|titre|deuxiéme sous onglet>
    contenu deuxiéme sous onglet

    <onglet|titre=xxx>
    contenu du deuxième onglet

    <onglet|titre=xxx>
    contenu du troisième onglet

    etc...

    <onglet|fin>

    Reply to this message

  • Jean Christophe Villeneuve

    Pour info ; ce plugin fonctionne bien en SPIP 4.1 juste en changeant les bornes de compatibilité.

    Reply to this message

  • 4
    tetue

    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 :

    <div class="tabs-bloc">

<div class="tabs">
	<ul>
		<li class="tab tab1 on"><a href="#tab1">Onglet 1</li>
		<li class="tab tab2"><a href="#tab2">Onglet 2</li>
		<li class="tab tab3"><a href="#tab3">Onglet 3</li>
	</ul>
</div>

<div class="tab-page on" id="tab1">
	<h2 class="none">Onglet 1</h2>
	<p>lorem ipsum</p>
	<ul class="spip">
		<li>liste</li>
		<li>liste</li>
		<li>liste</li>
	</ul>
</div><!--#tab1-->

<div class="tab-page none" id="tab2">
	<h2 class="none">Onglet 3</h2>
	<h3>toto</h3>
	<p>bla bla bla</p>
	<h3>toto</h3>
	<p>bla bla bla</p>
</div><!--#tab2-->

<div class="tab-page none" id="tab3">
	<h2 class="none">Onglet 3</h2>
	<p>lorem ipsum</p>
	<ul class="spip">
		<li>liste</li>
		<li>liste</li>
		<li>liste</li>
	</ul>
</div><!--#tab3-->

</div>
    • gilcot

      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...)

    • Jaseur Boreal

      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.

    • Jean Christophe Villeneuve

      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 !

    • Jean Christophe Villeneuve

      Bon je vais passer les h2 en h4
      Si ça pose problème à quelqu’un, on reviendra en arrière.

    Reply to this message

  • 3
    spipfactory.fr

    Pour info après changement des bornes

    compatibilite=“[3.0.0;3.2.*]”

    RAS

    Reply to this message

  • Ras Rubenxela

    Bonjour
    Est-ce que certains d’entre vous arrivent à exploiter les onglets en mode responsive.
    De nombreux scripts permettent aux onglets de devenir des onglets glissants type wikipedia. Est-ce que quelqu’un a déjà développé quelque chose du type pour le plugin ?

    Reply to this message

  • PRX

    Bonjour,
    je me permets d’INSISTER et de reformuler ma question (Spip 3.1.1):

    on met où les indications de classes Css

     (<div class="tab-page">)

    dans l’écriture du style
    “<onglet|titre=xxy>
    contenu du deuxième onglet
    ....”
    en direct dans les pages (un truc facile quoi) et non en mode Squelette.

    car j’ai des thèmes sur lesquels le titre n’apparaît PAS DU TOUT, du tout, ou d’autres en TRES ILLISIBLE...
    MERCI de vos lumières.

    Reply to this message

  • 3
    Martin

    Sauf erreur de ma part, les onglets ont une taille fixe, et il n’est pas facile de la modifier. Ça limite pas mal l’intérêt du plugin, non ? Chez moi le titre des articles est coupé, du coup on comprend pas sur quoi on va cliquer. Comment vous faites, vous ?

    • DD

      C’est indiqué dans l’explication ci-dessus :

      “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 celà utilisez la feuille de style fournie ici, enregistrez la dans votre dossier squelettes/css”

    • Christophe Noisette

      merci. Je suis surpris de voir que dans le ficher tab.css, il y a plusieurs endroits où la tailel de la police de l’onglet est spécifié. Je n’arrive pas à modifier ce fichier css pour avoir les titres des onglets dans une autre couleur, en plus gros et en gras.
      Pourriez-vous m’indiquer la class qu’il faut modifier?
      merci
      Christophe

    • PRX

      Merci pour ces nouveautés - cela fonctionne en Zpip.
      Au sujet des classes css pour ne pas avoir un titre de largeur fixe , pourriez-vous reprendre SVP pédagogiquement l’explication avec le modèle initial :
      <onglet|debut|titre=xxx>
      contenu du premier onglet

      <onglet|titre=xxy>
      contenu du deuxième onglet

      <onglet|titre=xxz>
      contenu du troisième onglet

      <onglet|fin>
      en le modifiant avec les classes css ?
      merci d’avance

    Reply to this message

  • DD

    Bonjour,

    Je ne sais pas si c’est voulu mais sur les pages de type : ecrire/?exec=revision&id_objet=667&objet=article&id_version=4

    On voit ce texte à l’endroit des onglets insérés dans le corps du texte :

    <script type="text/javascript">
tp1 = new WebFXTabPane( document.getElementById( "tab-pane-" ) );
//tp1.setClassNameTag( "dynamic-tab-pane-control-luna" );
//alert( 0 )
</script>

    dd

    Reply to this message

  • dut

    Bonjour à tous.

    J’aimerai que l’onglet actif par défaut soit le second, Par défaut il semble qu’au premier affichage le premier onglet soit toujours affiché et ensuite, le menu garde en mémoire le dernier clic.

    Cela est-il possible ?

    Reply to this message

  • Théo

    Bonjour,

    Pas moyen d’obtenir le “sommaire”. J’ai bien placé les ++++ puis “mon titre” (entre 3 parenthèses) mais rien à faire. Je n’obtiens que la numérotation des pages que je souhaitais découper : “1 2 3 4 5 6 7 8 9” en tête et en pied (et qui ne fonctionnent pas !).

    Mes lames activées :

    Sécurité : Ecran de sécurité
    Améliorations des textes : Intertitres en image, Sommaire automatique
    Raccourcis typographiques : Découpe en pages et onglets, Tout en couleurs
    Affichage public : SPIP et les liens… externes

    Je suis avec Spip 3.0.20 et SarkaSPIPr v4.5.1

    Quelqu’un pourrait-il m’aider ?

    Reply to this message

Add a comment

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

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.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom