Carnet Wiki

Onglets

Version 1 — Avril 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...