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

  • 2
    kelaya

    Bravo et merci pour ta contrib.

    C’est très astucieux et très utile.
    Mais, je me demande comment faire pour mettre un article diffèrent sous chaques onglets ?

    Répondre à ce message

  • 15
    zikou

    Salut.
    Plugin installé mais aucun résultat (je suis 1.9.1).Je pense que je respecte la synthaxe...
    Ai-je raté quelque chose ?

    • Pi r

      re re essayé sur 1.9.1 vierge, no problem

      Ai-je raté quelque chose ?

      Peut être d’activer le plugin ? ;-)

    • jfredd

      Bonjour,

      même chose mais avec Spip 1.9. J’ai récupéré l’archive que tu proposes sur ton site (Dionysos project). J’ai bien tout fait comme il fallait, j’ai vérifié mon code et il ne se passe rien de rien.

      deux pistes cependant :

      -  existe-t-il une incompatibilité entre ton plugin et les plugins, Lecteur flash pour MP3, FCK editor, PLayer flash flv, Recherche étendue et squelette par mots-clefs ?

      -  La présence d’un autre javascript dans la page peut-elle perturber le bon fonctionnement de ton plugin ?

      Merci d’avance.

    • zikou

      Celà aurait pû être le cas, mais non, il est bien activé !!
      un problème de répertoire, de chemin ?

    • Pi r

      tu peux détailler ce qu’il se passe ?

      Est ce que tu as mis #INSERT_HEAD dans ton <head> ?

    • Pi r

      #INSERT_HEAD ?

    • jfredd

      Oui j’ai la balise #INSERT_HEAD dans mon head. Y a-t-il un endroit préférable (début du head, fin du head, après les meta ?).

      Pour décrire un peu eh bien il ne se passe rien, j’ai l’affichage « à plat » de l’article avec les titres d’onglets en H2 bien gros.

      J’ai d’autre part essayé en supprimant l’autre javascript ( qui servait à l’opuverture d’un bloc) sans plus de succès.

    • Pi r

      du nouveau ?
      j’ai essayé avec une dizaine de plugins,
      dont fck et Lecteur Flash (MP3,flv)
      j’ai pas eu de problèmes

    • jfredd

      oui comme je te l’explique un peu plus bas dans un message précédent, j’ai essayé en désactivant les autres plugins, en enlevant les autres javascripts et j’ai toujours l’artcicle qui s’affiche in extenso avec les titres d’onglets en H2 et pas d’onglet.

      Je ne comprends pas trop...

      Pour compléter donc je suis sous spip 1.9 avec les squelettes sarka modiifiés essentiellemtn via la feuille de style

      voici un lien vers une capture écran du « problème »

      capture

    • Pi r

      vouais, no comptrendo non plus, la copie d’écran n’éclaire pas beaucoup,
      je vois que le javascript n’est pas pris en compte, ça c’est sûr..
      fais un truc :
      installe comme pour la version1.8

      copie les deux dossiers javascript et css à la racine

      fais les deux appels dans le header de ton article

      <script type="text/javascript" src="javascript/mes_onglets.js"></script>
<link rel="stylesheet" href="css/tab.css" type="text/css" media="all" />

      copies ces ligne dans ton texte

      <onglet|debut|titre=Mon titre 1>
contenu du premier onglet
<onglet|titre=Mon titre 2>
contenu du deuxième onglet
<onglet|titre=Mon titre 3>
contenu du troisième onglet
etc...
<onglet|fin>

      ça devrait coller
      c’est peut être un souci avec sarka, je sais pas
      tiens moi au courant, bonne soirée

    • Pi r

      j’ai oublié : copie le dossier modeles du dossier du plugin dans ton dossier squelette...

    • jfredd

      Bonjour,

      je pense que tu t’es un peu mélangé les crayons dans tes néanmoins judicieux conseils. J’ai suivi l’install comme pour la 1.8, et j’ai laissé le code préconisé pour la 1.9, qui est le même pour 1.8 et 1.9 (à base de div), dans mon article et... Ca marche. J’ai désactivé le pugin, ça marche toujorus, normal.

      Enrevanche, j’ai essayé la suite de ton explication sur un autre article (mettre le rep modèles dans mon rep squelette et coder comme dans la 1.9.1) ça ne fonctionne pas.

      Je vais donc m’en tenir à la méthode 1.8.
      En te remerciant chaleureusement pour ton travail et tes explications.

      Bonne fêtes.

    • Pi r

      la 1.9 utilise les plugins mais pas les modeles donc la seule difference
      doit se situer au niveau du remplacement les appels onglets par les div dans le texte
      mais de toute manière je te conseille la 1-9-2.beta-3
      http://trac.rezo.net/files/spip/SPIP-v1-9-2.beta-3.zip

    • jfredd

      Alors par contre, ça marche très bien sous ie (le 6) mais pas du tout sous firefox (le 2) ni sous opera (9.01)

      bon...

      Sinon pour la version de spip j’ai pas le tps d’upgrader en, ce moment. C’est un peu le problème posé par ces passage de versions qui s’accélèrent avec de gros changements à la clef et qui obligent à revoir les squelettes pour peu qu’on ait fait un peu de personnalisation. On a à peine fini de passer en 1.9 que c’est déjà la 1.9.1 avec les modèles voir la 1.9.2. Difficile de suivre et de produire du contenu parallèlement.

      Merci quand même

    • jfredd

      Je me réponds pour préciser que ça y est ça marche dans tous les navigateurs avec un bug dans firefox et opera : j’ai la même chose que Laurence (voir haut de cette page) une grosse zone blanche entre les onglets et les textes. Mais je pense qu’il ségit là plus d’un problème habituel de différence dans l’interprétation de la css entre ie et les autres.

      Je vous tiens au courant si je trouve.

    • jfredd

      j’ai trouvé ! Je mets la réponse à la suite du message de laurence en haut de la page.

    Répondre à ce message

  • 1
    Perline

    Tout est dans le titre !

    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