Carnet Wiki

Onglets

Version 1 — April 2011 tetue

Raccourcis de saisie dans les articles

Syntaxe dans les articles :

<tabs>

<h2>Onglet 1</h2>
lorem ipsum
- liste
- liste
- liste

<h2>Onglet 2</h2>
<h3>toto</h3>
bla bla bla
<h3>toto</h3>
bla bla bla

<h2>Onglet 3</h2>
lorem ipsum
- liste
- liste
- liste

</tabs>

L’idée est de proposer une saisie simple, en deux étapes :

  1. saisir un texte structuré, avec des intertitres (niveau 2 ou 3 ou autre)
  2. puis d’encapsuler cette portion de texte saisie entre 2 balises <tabs> (de préférence parce que c’est court) ou <onglets> (pour compatibilité avec le couteau suisse et le plugin onglets dans le texte).

Bouton d’insertion

Un bouton dans la barre typo permettrait d’insérer

Code généré

Cela générerait :

<div class="tabs">

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

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

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

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

</div>

L’onglet est généré avec le premier niveau de titre rencontré après l’ouverture de la balise <tabs>, que ce soit du h2, h3 ou autre, généré ou pas via raccourci SPIP d’intertitre, et en ignorant les autres niveaux d’intertitre présents entre les balises <tabs>.

Autres contributions


-  lame du Couteau Suisse Découper un texte en pages et/ou en onglets
-  plugin En onglets dans le texte de SPIP, ou ailleurs...