Onglets SPIP

Quelques notes-spécifications pour faire aisément des onglets dans SPIP. L’idée est de proposer une saisie simple et pérenne, c’est-à-dire où le contenu reste propre et correctement exploité, même en l’absence du plugin.

Saisie des contenus

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 temps :

1. saisir un texte structuré, avec des intertitres (niveau 2 ou 3 ou autre)
2. puis d’encapsuler cette portion de texte entre 2 balises <tabs> (de préférence parce que c’est court) ou <onglets> (pour compatibilité avec le Couteau Suisse (lame "Découpe en pages et onglets") et le plugin Onglets dans le texte).

C’est tout !

Bouton d’insertion :

Pour faciliter la saisie, un bouton dans la barre typo permettrait d’insérer le raccourci SPIP autour du texte sélectionné.

Code généré

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

Fonctionnement

Ce plugin repose sur un script.

Lorsque Javascript est désactivé, la balise <tabs> est tout simplement ignorée et le contenu reste correctement structuré, sans autre incidence. Idem en l’absence du plugin.

Lorsque ce plugin et Javascript sont activés, 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 de titre éventuellement présents entre ces balises <tabs>.
Ceci force à structurer le contenu, d’une part, et évite d’avoir trop de code spécifique à écrire (comme par exemple actuellement « <onglet|debut|id=xx|titre=xxx> » dans le plugin En onglets dans le texte de SPIP, ou ailleurs...), ce qui est peu pérenne.

Dans les squelettes

Pas besoin de code spécial pour les squelettes. Pour bénéficier du script ajouté par ce plugin, il suffit de placer un div englobant doté du sélecteur adéquat, comme ci-dessus.