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

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

Pour SPIP à partir de version 1.9.1

Installation

Décompressez l’archive onglets_texte_1.9.1.zip et placez le dossier obtenu dans le dossier plugins/ à la racine de votre site (créez le s’il n’existe pas).

plugin onglets_texte_1.9.1.zip

Activez le plugin dans la partie privée.

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

42 discussions

  • 8

    J’aime bien je m’en sert sans doute un peu trop...........

    Voila mais comment augmenter la taille de l’onglet pour qu’il prenne l’ensemble du texte.

    http://bachant.free.fr/spip.php?article594

    • il suffit de supprimer ou commenter les lignes width dans le fichier css

    • aussitôt dit aussitôt fait ; mais ça être encore bizarre une petite barre grise.........

      une autre idée.

      tous les /* width: sont commentés

      merci

    • c’est un reliquat de l’image de fond, suppime auusi la ligne

      background-image: url( “tab.png” );

    • niet cela ne change rien et même si je commente :

      .dynamic-tab-pane-control .tab-row .tab.selected
      /* width: 74px !important;*/
      height: 18px !important;
      /* background-image: url( “tab.active.png” ) !important;
      background-repaet: no-repeat;*/

      j’ai quand même le reliquat.

      une autre idée quelquefois...........

      merci

    • les lignes background sont mal commentée, il faut pour chaque ligne contenant background une fois

      /* ....... */

    • bon rien n’y fait ;donc voici la css

      .dynamic-tab-pane-control.tab-pane {
              position:        relative;
      /*        width:                100%;                /* width needed weird IE bug */
              margin-right:        -2px;        /* to make room for the shadow */
      }
      
      .dynamic-tab-pane-control .tab-row .tab {
      
      /*        width:                                70px;*/
              height:                                16px;
              background-image:        url( "tab.png" );
              
              position:                relative;
              top:                        0;
              display:                inline;
              float:                        left;
              overflow:                hidden;
              
              cursor:                        Default;
      
              margin:                        1px -1px 1px 2px;
              padding:                2px 0px 0px 0px;
              border:                        0;
      
              z-index:                1;
              font:                        11px Tahoma;
      /*        white-space:        nowrap;*/
              text-align:                center;
      }
      
      .dynamic-tab-pane-control .tab-row .tab.selected {
      /*        width:                                74px !important;*/
              height:                                18px !important;
              background-image:        url( "tab.active.png" ) !important;
              background-repaet:        no-repeat;
      
              border-bottom-width:        0;
              z-index:                3;
              padding:                2px 0 0px 0;
              margin:                        1px -3px -3px 0px;
              top:                        -2px;
              font:                                11px Tahoma;
      }
      
      .dynamic-tab-pane-control .tab-row .tab a {
              font:                                11px Tahoma;
              color:                                Black;
              text-decoration:        none;
              cursor:                                default;
      }
      
      .dynamic-tab-pane-control .tab-row .tab.hover {
              font:                                11px Tahoma;
      /*        width:                                70px;*/
              height:                                16px;
              background-image:        url( "tab.hover.png" );
              background-repaet:        no-repeat;
      }
      
      
      .dynamic-tab-pane-control .tab-page {
              clear:                        both;
              border:                        1px solid rgb( 145, 155, 156 );
              background:                rgb( 252, 252, 254 );
              z-index:                2;
              position:                relative;
              top:                        -2px;
      
              font:                                11px Tahoma;
              color:                                Black;
      
              filter:                        progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#fffcfcfe, EndColorStr=#fff4f3ee, GradientType=0)
                                              progid:DXImageTransform.Microsoft.Shadow(Color=#ff919899, Strength=2, Direction=135);
              
              /*244, 243, 238*/
              /* 145, 155, 156*/
              
              padding:                10px;
      }
      
      .dynamic-tab-pane-control .tab-row {
              z-index:                1;
      /*        white-space:        nowrap;*/
      }

      Je regarde coté image png quelquefois..........

    • Merci c’est exactement ça.............

      @llez pour dire merci :

    Reply to this message

  • J’ai des utilisateurs qui ont encore IE 5.xxx pour lesquels les onglets ne s’affichent pas. On ne choisit pas toujours ses utilisateurs, ni leur navigateur...

    :-)

    Reply to this message

  • Sous Safari, comment faire pour que le texte ne dépasse pas le cadre de l’onglet ?

    Voir : exemple

    Merci et encore bravo

    Reply to this message

  • 6

    Bonjour,

    bon travail

    mais ce genre de plugin n’a que peu d’intérêt dans la mesure ou c’est utilisable que dans un squelette, donc que par une personne autorisée à modifier ou créer les squelettes.

    Ca n’a vraiment un réel intérêt que dans un article ou ce sont les rédacteurs qui peuvent décider de créer un article avec des fonctionnalités d’onglets ...

    On peut le réaliser facilement depuis la version 1.9.1 avec les modèles.

    J’ai réalisé un essai au travail sur un serveur de test en spip 1.9.1 avec les modèles qui permet aux rédacteurs de mettre des blocs dépliables dans leurs articles.

    Mais depuis je suis revenu en spip 1.9 à mon travail , car on avait des problèmes en multisites, et donc j’ai abandonné ce plugin.
    Mais il est dans un tirroir.

    Voilà ce qu’il te reste à faire, consulte la doc sur les modèles et tu verra qu’on peut agir sur les articles ...
    Ton plugin sera vraiment utile alors.

    • Avec ce genre de messages, on sera bientôt obligé de modérer à priori, dommage...

    • Et en plus tu n’aimes pas les remarques qui peuvent améliorer tes plugins

      dans la vie il faut être modeste et accepter les remarques, c’est comme ça qu’ont s’améliore.

      Ce n’est pas ton cas

    • je n’ai rien compris à ton message qui est en contradiction avec
      ce script adaptable à toutes les versions spip sans toucher au squelettes
      ce qui n’empêche d’ailleurs en rien son utilisation dans les squelettes.

    • bonjour,

      je rapelle que je t’ai félicité pour ton travail,
      mais que je trouvais simplement que ton plugin n’ai utilisable que dans un squelette, et il serait plus utile d’utiliser les modèles (depuis la version 1.9.1) qui permettent aux rédacteurs de pouvoir inserrer dans leurs articles des effets dynamiques comme des onglets et autres que tu aurais définis en tant que modèles. (voir la doc sur les modèles)

      merci

    • À mon tour de te conseiller comme l’a fait Pierre de relire l’article de la contrib’.

      Pierre propose 3 versions de la contrib’: une pour Spip 1.8.3, un plug-in pour Spip 1.9 et enfin un autre plug-in qui utilise les modèles pour Spip 1.9.1.

      Sa contrib’ est —comme il l’indique très clairement— parfaitement utilisable dans les squelettes et dans les articles. Et ce, quelle que soit la version de Spip (1.8.x ou 1.9.x), évidement en utilisant les modèles pour la version destinée à Spip 1.9.1. Mais aussi, pour mon Spip 1.8, je l’utilise avec bonheur dans des squelettes et dans des articles.

      danou9 tu viens de publier trois messages, sans avoir manifestement lu ce que proposait Pierre (pourtant l’article proposé ici, bien que concis est très complet). Avant d’aller plus loin dans tes réponses, je te recommande donc de lire la description de la contrib’ de Pierre.

    • Et de 4

      voilà quelqu’un de bien ce Pierre

      Mais pourquoi tu ne le fais pas toi même?

    Reply to this message

  • 11

    Bonjour,
    Bravo pour ce plugin.
    J’ai eu le même problème relaté plus haut, pour l’installer sous spip 1.9.1. J’a isuivi la procédure d’installation pour les autres versions, et c’est impec.
    Juste une chose : l’affichage est parfait sous IE7, mais il y a un bug sous Firefox 2, un très grand espace blanc entre les onglets et le contenu.
    ...Une idée ?

    • qu’y a t-il dans le source?

    • J’ai ça :

      <div class="texte_article">
      <div class="tab-pane" id="">
      <div class="tab-page">
      <h2 class="tab">Titre 1</h2>
      ...contenu
      </div>
      <div class="tab-page">
      <h2 class="tab">Titre 2</h2>
      ..contenu
      </div>
      <div class="tab-page">
      <h2 class="tab">Titre 3</h2>
      ...contenu
      </div>
      </div>
      </div>
    • bizarre, t’es sûr que que c’est la source de ta page?
      fais afficher le code source...
      ça ça doit plutôt être le code que tu as copié dans ton texte...
      tu devrais avoir code

      contenu...

    • tiens ya un un pb je voulais dire que tu devrais avoir dans le source

      <p class="spip">contenu...</p>

    • Oui, j’ai pris le code source en abrégeant le contenu... j’ai bien, dans le contenu de chaque onglet,

      <p class="spip">contenu...</p>

      C’est normal, qu’il y ait
      <div class="tab-pane" id=""> ?
      (le id non précisé)

    • oui l’id est vide car tu n’as qu’un set d’onglet et il n’est pas nécessaire
      si tu veux plusieurs set dans la même page il faut le préciser au debut

      ça n’a rien a voir avec ton probleme que je ne comprend pas
      tu ne m’a toujours pas donné les sources complètes de ton set
      à entourer de <code> ton script </code> dans le texte du message de forum

    • J’ai eu le même problème et j’ai trouvé la solution: c’est dans la css, dans la définition de la class .tab-page, il faut enlever le clear: both;

      .dynamic-tab-pane-control .tab-page {
              clear:                        both;

      ça devrait marcher maintenant.

    • how strange...
      en ce qui me concerne ça casse tout...
      je n’ai plus que le premier onglet
      quelle install utilisez vous?
      -  le plugin avec les modeles
      -  le plugin sans les modeles
      -  sans plugin sans modeles

    • J’utilise l’install 1.8 sur une 1.9 avec des squelettes Sarka.

      Je pense que le problème vient de ce que dans le quelette Sarka il ya déjà des déclarations de ce type pour forcer certains div à se positionner ou à se redimensionner. J’ai constaté qu’en remontant le le.tab-page de plus 500px il se rapprochait des tabs mais que la page elle-même était toujours aussi haute. C’est à dire que l’espace blanc que j’avais entre les tabs et le contenu était toujours là, il était simplement passé sous le contenu. C’est là que j’ai commencé à suspecter que cela venait d’une déclarationde type clear: both;

      Je l’ai supprimée et tout s’est arrangé. Je publierai bientôt les articles sur lesquels je compte utiliser le système d’onglets (j’en utilise même un “nested” dans un autre), je dois encore leur rajoutrer des illustrations, et je laisserai le lien ici. Tu pourras constater que ça fonctionne.

      A bientôt

    • Chose promise... voici le lien. Tous les articles de la rubriques comportent des onglets.

      Par contre tu verras j’ai un nouveau problème lié au fait que j’ai des images en float qui n’apparaissent pas dans IE (espace blanc à la place) mais qui sont bien là dans Firefox et Opera.

      Rien n’est parfait en ce bas monde :-(

    • Rebonjour,

      Ca y est j’ai trouvé la solution à mon pb d’affichage des images en float à l’intérieur des onglets dans ie 6 et 7. J’ai retiré la couleur de fond “white” de la class .dynamic-tab-pane-control .tab-page. J’aurais sans doute pu arriver au même résultat par la propriété z-index mais ça aurait pu mettre un peu plus le souk aussi donc...

      Voilà je postais ça juste au cas où qqu’un rencontrerait le même problème.

    Reply to this message

  • 3

    Bonjour,
    Comment ne pas vouloir des ancres qui ramènent à chaque onglet ?
    Ah, oui, mais il faudrait que soit créée automatiquement la suite

    <a name=numero de l'id_nom_de_l_onglet></a> 
    <h2 class="tab">nom_de_l_onglet</h2>

    et que l’appel d’ancre amène à l’onglet direct.

    Ca s’envisage ?

    Sinon, c’est génial quand même....

    • Effectivement les ancres me posent beaucoup souci... Un coup d’œil dans le code me permet —malgré mon incompétence— de voir que ce ne sera pas trivial de changer l’onglet en fonction des ancres qu’il contient (même s’il ne contient qu’une ancre de titre)...

      C’est un peu ennuyeux (en particulier pour les articles contenant des ancres et des liens internes).

      J’ai aussi posé la question à l’auteur du script en JavaScript des onglets (Erik Arvidsson) sur son forum et attends une réponse (ça n’a pas l’air très dynamique comme forum...).

    • Vouais bin là ça risque d’être chaud
      quand je vois que l’auteur du java a fait cette fonction pour appeler les onglets de la même page
      il a réindexé à la mano les titres des onglets un par un...

      function showArticleTab( sName )
      if (typeof tabPane != “undefined” )
      switch ( sName )
      case “mon-titre-d’onglet 1”:
      tabPane.setSelectedIndex( 0 );
      break;
      case “mon-titre-d’onglet 2”:
      tabPane.setSelectedIndex( 1 );
      break;
      etc....

    • Je ne sais pas prpgrammer, mais il me semble que ce qu’il faudrait faire c’est:

      1. scanner la page pour relever toutes les ancres et les placer dans un tableau pour chaque onglet (du genre OuSontLesAncres[onglet][Ancres[liste d’ancres]]
      2. vérifier et extraire les éventuelles ancres de l’url
      3. si ancre il y a, retrouver grâce au tableau dans quel onglet elle se trouve
      4. faire un tabPane.setSelectedIndex( OngletQuiContientAncre )

      C’est sûrement possible et pas très dûr à faire pourquelqu’un qui cause le Javascript... Ce n’est pas mon cas, je vais bidouiller un peu, pour voir si j’y arrive, mais j’y crois pas trop !

    Reply to this message

  • 1

    Bonjour,

    C’est tombé en marche d’abord en local puis sur le site, mais après quelques évolutions :

    -  spip 1.9.1 sur un squelette datant de la 1.6 et qui semble encore tenir la route (/aec.apinc.org>)
    -  il manquait dans mes squelettes la balise #INSERT_HEAD dans l’entête du squelette et les lignes script et css ne s’ajoutaient pas toutes seules 8-(
    -  j’ai modifié les images tab* et le css pour élargir le titre de l’onglet et passer de 70 à 100 pixels. j’ai aussi modifié la couleur pour passer au bleu.
    -  j’ai supprimé le cookie (j’aime pas les cookies ... enfin, si, les vrais, craquants à souhait !)

    Les fichiers du plugin à la mode “aec” sont dispo dans le zip : /aec.apinc.org/IMG/zip/onglets_texte_aec.zip

    Sur le site comme en local, c’est tip-top.

    Merci pour le plugin

    Denis

    • Très beau boulot ! Bravo !

      Il faudrait effectivement rapeller dans le descriptif d’installation qu’il faut la balise #INSERT_HEAD dans le squelette pour que ça marche... je me suis moi aussi fait avoir ;-)

    Reply to this message

  • Lorsque je cherche à générer en pdf un article avec onglets, au résultat, j’ai des bouts de codes :
    <h2 class=\"tab\">Affiche</h2>

    Par ailleurs les images dans les tableaux se superposent...

    Merci et bravo pour votre contribution.

    Reply to this message

  • Superbe ; franchement installation hyper simple...

    Reply to this message

  • 2

    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 ?

    Reply to this message

Add a comment

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 / PostgreSQL
  • 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 apparait.

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.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom