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

Publié le : 18 décembre 2006 – Dernière modification le 28 mars 2023 – par Nicolas Hoizey – 135 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 ans 1 an 3 mois Sans limite
par date
Filtrer

43 discussions

  • PRX

    Excellent, je l’avis utilisé sous uin site dont j’avais fait les css, parfait.
    Par contre cela n’a pas été prévu sous Sarka-spip visiblement : (voir image), cela m’étonnerait que mes lecteurs puisse deviner de taper sur l’onglet suivant.

    Que doit-on faire de simple dans ce dernier cas ? Les styles css : je comprends, mais ne sais pas où les mettre car c’est pas prévu pour être modifié sous Sarka (vu les thèmes etc ..)

    Pourrait-on envisager une version avec l’utilisation du plugin « Cfg » pour configurer justement ?
    Et sous Zpip cela fonctionne ?
    Merci d’avance.

    Répondre à ce message

  • 1
    serginio

    En un mot. Sublime.

    Grand merci à l’auteur de ce plugin que j’utilise en spip 3.0.4 sans aucun soucis (inclu dans un squelette ou dans un article). Si ca peut aider certains comme moi pas très fort en prog, Voici un modéle à inclure dans un squelette. Je l’ai déduis (avec difficulté) de l’exemple sur les traductions.

    <div class="tab-pane" id="numéro du groupe d'onglets">
         <div class="tab-page">
           	<h2 class="tab">titre du 1er onglet</h2>
		script ou texte du 1er onglet
  	 </div>
	  
 	<div class="tab-page">
   		<h2 class="tab">titre du 2nd onglet</h2>
		script ou texte du second onglet
 	</div>

    Répondre à ce message

  • 1
    fd

    Encore moi sur ce forum car utilise intensément ce plugin :) je constate par contre une chose mystérieuse, ca fait 3-4 heures que suis dessus et ne trouve pas :(

    J’ai inséré dans mes squelettes les différentes classes qui affichent les onglets. Chaque onglet contenant le contenu d’un champs extra.
    Par contre dans certaines pages qui pourtant utilisent le même squelette de rubrique il n’affiche que 2 onglets et le titre des suivants et leur contenu s’affiche en dessous :(

    Déjà vu ce symptôme ??? ai décortiqué le code généré et je lai comparé, rien ne change à part le texte des onglets.... si une bonne âme a une idée...

    • fd

      vous pouvez effacez mon message....après des heures ai trouvé...la personne qui a remplis le site n’avais pas fermé un tag à l’intérieur du texte du champs précédent !!

    Répondre à ce message

  • fd

    Alors si je fais un lien vers cette url spip.php ?page=allnews&id_rubrique=1 qui contient une présentation à onglets, si j’ajoute le #iddelonglet à la fin de l’url ça ne marche pas :( une idée ? c’est parceque l’url devrait être plus propre ?

    Répondre à ce message

  • 1
    DD

    Bonjour,

    Est-il possible d’utiliser ce système d’onglet pour autre chose que le texte d’un article ?

    J’ai essayé une boucle pour lister des événements (un onglet = 1 date) mais tout le contenu s’affiche en liste sans onglets :

    		
<div class="tab-pane">
<BOUCLE_date_event(EVENEMENTS) {par date_debut}{id_rubrique}>
<h2 class="tab">[(#DATE_DEBUT))]</h2>

<div class="tab-page">
<a href="[(#URL_EVENEMENT})]">#TITRE</a></div>
</BOUCLE_date_event>
</div>

    ..je n’ai sans doute pas bien compris les modèles fournis avec le plugin.

    dd

    • fd

      tu as fait une erreur. Le div class « tab-page » correspond à l’onglet, donc le h2 doit être après ce div sinon c’est normal que les onglets ne se crèent pas, comme ca :

      <div class="tab-pane">
<BOUCLE_date_event(EVENEMENTS) {par date_debut}{id_rubrique}>

<div class="tab-page"><h2 class="tab">[(#DATE_DEBUT))]</h2>
<a href="[(#URL_EVENEMENT})]">#TITRE</a></div>
</BOUCLE_date_event>
</div>

    Répondre à ce message

  • 6
    Fred

    Bonjour,

    j’ai installé le plugins, j’ai vérifé que la balise #INSERT_HEAD était bien présente dans mon squelette,

    mais je n’ai pas d’onglet. Voici ma page :

    http://www.picardie-1939-1945.org/article29.html

    et voici ce que j’ai mis suivant ce qui est indiqué sur ce tutoriel :

    ... onglet|debut|titre=accueil ...
    contenu du premier onglet

    ...onglet|titre=Infos...
    contenu du deuxième onglet

    ... onglet|titre=Mises à jour ...
    contenu du troisième onglet

    Que se passe-t-il ? que n’ai-je pas compris ? que n’ai-je pas fait. Merci de votre aide

    Fred

    • heuuu, avant tout, il me semble qu’il y a un drapeau indésirable sur votre site....

    • Fred

      Avant tout , je disais « bonjour ».

      Ce drapeau en quoi vous gêne-t-il ? C’est le drapeau des forces allemandes pendant la 2de GM. C’est une réalité historique et non de propagande. Les personnes qui écrivent sur ce site, sont des historiens, clairement identifiés et ne se cachent pas. Nous sommes là pour raconter ce qui s’est passé, pas pour faire de la politique. Lisez quelque peu le contenu du site, avant de dire des sottises.

      Mais jeune homme ou jeune fille, je ne viens pas vous donner une leçon d’histoire alors je ne viens pas chercher une leçon de morale. si vous pouvez m’aider, merci, sinon tant pis.

      cordialement

      Fred

    • bonsoir, il me semblait que c’était juste interdit, me trompe je ?

    • Fred

      bonsoir,

      pas davantage que sur ce site là : http://fr.wikipedia.org/wiki/Drapeau_de_l’Allemagne#L.27Allemagne_nazie

      LE drapeau, utilisé sur notre site n’est utilisé qu’à des fins historiques et même pédagogiques. Nous avons déjà travaillé avec des scolaires. Lors de nos expositions, nous de dissimulons aucun signe. Nos visiteurs quand ils lisent nos panneaux et écoutent nos conférences savent à qui ils ont à faire.
      Si tu as pris le temps de visiter le site, tu as peux être pu t’en rendre compte.

      Maintenant que je me suis justifié, puis avoir un coup de main ? :-)

    • re, vous avez sans doute raison, (tiens la page dont vous parlez est vidée actuellement....). j’ai été choqué dans une exposition récente au musée du jeu de Paume de deux photographes contemporains, par une image esthétisante représentant un officier nazzi, et aussi par un récent séjour en allemagne de l’est, des manifestations qui font peur.. Mais bon ce n’est pas le sujet, je vous l’accorde.
      En ce qui concerne votre problème,
      Le plugin est bien acivé ? Avez vous essayé de désactiver le compression js dans l’espace privé
      ou bien d’appeler le js en dur avant la balise comme

      <script type="application/javascript" src="[(#CHEMIN{javascript/mes_onglets.js})]"></script>

      après la balise #INSERT_HEAD
       ?

    • Fred

      Bonjour,

      non la page n’est pas vide, c’est le forum de Spip qui bouffe le la longueur du lien ;-)
      Voilà la page : http://fr.wikipedia.org/wiki/Drapeau_de_l’Allemagne

      Merci pour votre aide. Oui plugin activé, bien sur, par contre pour la suite, va falloir que je mette les mains dans le cambouis et là ce n’est pas mon fort ... :-( Je vais essayer. Merci

    Répondre à ce message

  • 2
    fd

    Alors il y a un bug avec ce plugin et le mix champs extra/conditions.

    n effet le problème viens aussi du mix champs extra - onglets - conditions.

    Ce code :

    	
	[(#POURQUOI|?{'
	<div class="tab-page">
	<h2 class="tab">Pourquoi </h2>
				#POURQUOI
				<ul class="liste-articles">
				<BOUCLE_articlespourquoi(ARTICLES){id_rubrique}{titre_mot=Pourquoi Prologiq}{par date}>
				<li><a href="#URL_ARTICLE">[(#TITRE|supprimer_numero)]</a></li>
				</BOUCLE_articlespourquoi>
				</ul>
</div>
				',''})]

    devrait créer un onglet si le champs extra POURQUOI contient qq chose, sinon rien.
    Ce code ne fonctionne que sil ne contient pas un inclure ou une autre boucle(comme ci-dessus) permettant d’afficher par ex des articles.
    En gros impossible de créer cette condition :( Une solution ?

    • Patrice Vanneufville

      Pourquoi tu romps le fil de conversation ? As-tu essayé ce que je propose plus bas :

              [(#POURQUOI|oui)  blablabla]

      Maintenant si tu vx mettre une boucle à l’intérieur de ta condition, utilise plutôt un inclure :

              [(#POURQUOI|oui)  <INCLURE{ ... }>]

      voire :
              [(#POURQUOI|oui)  [(#INCLURE{ ... })]]

      A lire :
      -  http://www.spip.net/fr_article1828.html (doc officielle)
      -  http://www.armetiz.info/simple-cond... (astuce sur une boucle feinte)
      -  http://spipotoulouse.org/spip.php?a... (un peu ancien : n’utilise pas les filtres |oui et |non)

    • fd

      Excuse moi le premier message ne s’est affiché que qq heures après contrairement au dernier ! Tu peux le supprimer ! Ce que tu m’as montré ne fonctionne pas !
      La réponse m’a été donnée par Beurt que je remercie et la voici :

      Il ne faut pas mettre l’inclure entre guillemets (ni droits, ni doubles).

      Solution : utiliser un inclure statique avec les textes précédant et
      suivant optionnels :

      [REM condition :si champs nest pas vide, création de l'onglet]
  [(#POURQUOI|?{
       [<div class="tab-page">
       <h2 class="tab">Pourquoi </h2>
                               #POURQUOI
                               (#INCLURE{fond=pourquoi}{id_rubrique})</div>]
                               })]
</div>
</div>})]

      (il n’est pas non plus nécessaire de mettre des guillemets vides si tu
      n’utilises pas la condition non [(#BALISE| ?’oui elle est là’)])

    Répondre à ce message

  • 1
    fd

    Ce plugin magnifique me crèe un bug avec les inclusions et les champs extra :(
    Je désire créer une boucle avec des champs extra et deux niveaux de conditions.

    Première condition : si le champs extra(oui/non) PRESENTATION est sur
    -  oui (m’afficher une présentation à onglets,
    -  sinon n’afficher que le texte de la rubrique)
    Deuxième condition : Les onglets sont générés à partir de champs extra.
    N’afficher un onglet que lorsque le champs extra contient de l’information, sinon pas d’onglet.

    Eh bien impossible à réaliser :(

    Code de base :

    [(#PRESENTATION|?{

<div class="tab-pane" id="xx">
  <div class="tab-page">
					<h2 class="tab">Premier onglet</h2>
texte premier onglet, ca marche
</div>

[REM condition :si champs nest pas vide, création de l'onglet]
   [(#POURQUOI|?{'
	<div class="tab-page">
	<h2 class="tab">Pourquoi </h2>
				#POURQUOI
				<INCLURE{fond=pourquoi}{id_rubrique}></div>
				',''})]
</div>
</div>, ''})]

    Résultat : il m’affiche dans l’onglet la balise #POURQUOI !!!! au lieu de m’afficher le contenu du champs et bien entendu pas d’articles en dessous !!

    Si je modifie la partie de l’onglet-condition « pourquoi » de cette façon (avec paranthèse et crochet autour du nom du champs) :
    [(#POURQUOI)]
    il m’affiche ceci sur le site (et tj pas la liste d’articles !) : %##11@ (bizarre...)

    Si par contre je ne fais pas d’inclure de cette façon :

    			
				<div class="tab-page">
				<h2 class="tab">Pourquoi </h2>
				#POURQUOI
				<ul class="liste-articles">
				<BOUCLE_articlespourquoi(ARTICLES){id_rubrique}{titre_mot=Pourquoi Prologiq}{par date}>
				<li><a href="#URL_ARTICLE">[(#TITRE|supprimer_numero)]</a></li>
				</BOUCLE_articlespourquoi>
				</ul></div>

    Là le système d’onglets et leur contenu fonctionne, par contre c’est du code de ce genre qui s’affiche autour du cadre [(oui| ? .... comme si la condition principale ne fonctionnait plus et s’affichait.

    J’ai également essayé d’enlever la condition principale qui affiche ou moins les onglets mais là aussi ca foire...
    D ou pourrait venir le soucis ?

    • Patrice Vanneufville

      Salut. Et si tu simplifiais un peu ? Du genre :

      [(#PRESENTATION|oui)  blablabla !!]
[(#PRESENTATION|non)  blablabla !!]

      Par contre, je ne suis pas sûr qu’on puisse intégrer une boucle dans une struture comme celle-là... Il faut probablement passer par l’inclusion d’une noisette ;-)

    Répondre à ce message

  • fd

    Magnifique !! Merci !!
    J’ai pu faire la pagination de mes articles par année en onglets :)

    			<div class="tab-pane" id="xx">
					<BOUCLE1(ARTICLES){par date}{id_rubrique}{inverse}{fusion YEAR(date)}{tout}>
		
					<div class="tab-page">
					<h2 class="tab">[(#DATE|annee)]</h2>
					<BOUCLE2(ARTICLES){id_rubrique}{annee_relatif}{par date}{inverse}>
					<a href="#URL_ARTICLE">[(#TITRE|supprimer_numero)]</a><br /></BOUCLE2>
					 </div></BOUCLE1>
				
					</div>

    Répondre à ce message

  • 10
    Nicolas Hoizey

    Utilisant ce plugin, j’aimerais donner la possibilité aux rédacteur de pointer directement vers l’onglet de leur choix dans les URL, avec une ancre.

    Il « suffirait » que le plugin détecte une ancre dans l’URL, et rende automatiquement actif l’onglet ayant l’id correspondant.

    Est-ce envisageable ?

    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 :

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

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom