SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 328 visiteurs en ce moment

Accueil > Rédaction > Sommaires > Onglets dans texte > En onglets dans le texte de SPIP, ou ailleurs...

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

18 décembre 2006 – par Nicolas Hoizey – 128 commentaires

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

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

Zip - 11.3 ko
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 :

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

Un autre tableau dans le texte ? Précisez juste une id dans le premier onglets :

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

Cascading Style Sheet - 1.3 ko
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

Voir en ligne : http://plugins.spip.net/onglets_texte

Dernière modification de cette page le 16 avril 2015

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 29 septembre à 13:41, par rubenxela En réponse à : En onglets dans le texte de SPIP, ou ailleurs...

    Bonjour
    Est-ce que certains d’entre vous arrivent à exploiter les onglets en mode responsive.
    De nombreux scripts permettent aux onglets de devenir des onglets glissants type wikipedia. Est-ce que quelqu’un a déjà développé quelque chose du type pour le plugin ?

    Répondre à ce message

  • Le 21 septembre à 10:53, par PRX En réponse à : En onglets dans le texte de SPIP, ou ailleurs...

    Bonjour,
    je me permets d’INSISTER et de reformuler ma question (Spip 3.1.1) :

    on met les indications de classes Css

    1. (<div class="tab-page">)

    dans l’écriture du style
    « <onglet|titre=xxy>
    contenu du deuxième onglet
    .... »
    en direct dans les pages (un truc facile quoi) et non en mode Squelette.

    car j’ai des thèmes sur lesquels le titre n’apparaît PAS DU TOUT, du tout, ou d’autres en TRES ILLISIBLE...
    MERCI de vos lumières.

    Répondre à ce message

  • Le 10 février 2012 à 09:49, par Martin En réponse à : En onglets dans le texte de SPIP, ou ailleurs...

    Sauf erreur de ma part, les onglets ont une taille fixe, et il n’est pas facile de la modifier. Ça limite pas mal l’intérêt du plugin, non ? Chez moi le titre des articles est coupé, du coup on comprend pas sur quoi on va cliquer. Comment vous faites, vous ?

    • Le 12 mars 2012 à 16:08, par DD En réponse à : En onglets dans le texte de SPIP, ou ailleurs...

      C’est indiqué dans l’explication ci-dessus :

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

    • Le 9 avril 2014 à 17:12, par Christophe Noisette En réponse à : En onglets dans le texte de SPIP, ou ailleurs...

      merci. Je suis surpris de voir que dans le ficher tab.css, il y a plusieurs endroits où la tailel de la police de l’onglet est spécifié. Je n’arrive pas à modifier ce fichier css pour avoir les titres des onglets dans une autre couleur, en plus gros et en gras.
      Pourriez-vous m’indiquer la class qu’il faut modifier ?
      merci
      Christophe

    • Le 13 septembre à 18:08, par PRX En réponse à : En onglets dans le texte de SPIP, ou ailleurs...

      Merci pour ces nouveautés - cela fonctionne en Zpip.
      Au sujet des classes css pour ne pas avoir un titre de largeur fixe , pourriez-vous reprendre SVP pédagogiquement l’explication avec le modèle initial :
      <onglet|debut|titre=xxx>
      contenu du premier onglet

      <onglet|titre=xxy>
      contenu du deuxième onglet

      <onglet|titre=xxz>
      contenu du troisième onglet

      <onglet|fin>
      en le modifiant avec les classes css ?
      merci d’avance

    Répondre à ce message

  • Le 5 avril à 14:17, par DD En réponse à : En onglets dans le texte de SPIP, ou ailleurs...

    Bonjour,

    Je ne sais pas si c’est voulu mais sur les pages de type : ecrire/ ?exec=revision&id_objet=667&objet=article&id_version=4

    On voit ce texte à l’endroit des onglets insérés dans le corps du texte :

    <script type="text/javascript">
    tp1 = new WebFXTabPane( document.getElementById( "tab-pane-" ) );
    //tp1.setClassNameTag( "dynamic-tab-pane-control-luna" );
    //alert( 0 )
    </script>

    dd

    Répondre à ce message

  • Le 29 septembre 2015 à 10:48, par dut En réponse à : En onglets dans le texte de SPIP, ou ailleurs...

    Bonjour à tous.

    J’aimerai que l’onglet actif par défaut soit le second, Par défaut il semble qu’au premier affichage le premier onglet soit toujours affiché et ensuite, le menu garde en mémoire le dernier clic.

    Cela est-il possible ?

    Répondre à ce message

  • Le 15 avril 2011 à 18:41, par tetue En réponse à : En onglets dans le texte de SPIP, ou ailleurs...

    Je découvre ce plugin, pas mal du tout !

    Par contre, la structure générée n’est pas correcte, puisque les onglets sont constitués par des titres h2 successifs (mieux vaudrait une liste ul li), désolidarisés du contenus auquel ils correspondent !

    La structure suivante serait plus appropriée :

    <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>
    • Le 12 janvier 2014 à 14:20, par gilcot En réponse à : En onglets dans le texte de SPIP, ou ailleurs...

      Bonjour.

      J’essayais d’utiliser à nouveau ce plugin (il y a un an et demi j’avais installé puis désinstallé en croyant que ça fonctionnait pas ...en fait ça fonctionne mais seulement dans l’espace public et donc les tests dans l’espace privé ne donnent rien...)

      Je rejoints tetue quand à la structure générée qui n’est pas du tout sémantiquement plaisante ! Mais ceci vient de l’astuce mis en plugin, et pour lequel l’auteur à l’époque n’avait pas ce genre de considération : Il est fait une manipulation de DOM en JS sauf qu’on s’est préoccupé que de l’aspect visuel.

      Bref, le plugin est oncore perfectible... (et pourrait s’inspirer du travail qui a été fait sur les sommaires...)

    • Le 11 août 2015 à 18:43, par Jaseur Boreal En réponse à : En onglets dans le texte de SPIP, ou ailleurs...

      Faut-il supprimer tous les onglets pour être Mobile-Friendly

      Bonjour,

      J’utilisais ce plugin depuis plus de deux ans.

      Or depuis peu : « Erreurs mobile friendly by Google »

      En cherchant pourquoi les nouveaux outils google m’affichaient des erreurs sur une cinquantaine de pages avec ce message : « ces pages contiennent du contenu flash qui ne peut s’afficher sur les appareils mobiles ».

      J’ai découvert que cela concerne en fait , toutes les pages où j’ai placé des onglets pour découper une longue page en plusieurs onglets, avec le plugin « En onglets dans le texte de SPIP, ou ailleurs... »

      A l’époque, j’étais hyper débutant, voire ignare dans les tricotages de spip. Je suis un peu moins débutant, p’tet encore ignare concernant le codage quand il dépasse ma compréhension.

      Faut-il supprimer tous les onglets pour être Mobile-Friendly ?

      J’essaye donc aujourd’hui de simplifier les anciennes pages, pour qu’elles obéissent aux doigts et à l’œil , et mon constat s’oriente plus vers une suppression de tous les onglets posés dans un article, pour le simplifier et en faciliter la lecture en longueur avec des glissades d’écran.

      Pour conserver le coté intéressant des onglets, comment faire, pour que certains articles (mais pas tous) des articles très longs, puisse se décliner avec des « breaks » de couleurs différentes par exemple, tout en restant « mobile friendly » ... par exemple comme ici : http://moulinette.choc02.fr/

      Qu’en pensez-vous ?

      Merci de toutes solutions simples.

    Répondre à ce message

  • Le 12 juillet 2015 à 21:21, par Théo En réponse à : En onglets dans le texte de SPIP, ou ailleurs...

    Bonjour,

    Pas moyen d’obtenir le « sommaire ». J’ai bien placé les ++++ puis « mon titre » (entre 3 parenthèses) mais rien à faire. Je n’obtiens que la numérotation des pages que je souhaitais découper : « 1 2 3 4 5 6 7 8 9 » en tête et en pied (et qui ne fonctionnent pas !).

    Mes lames activées :

    Sécurité : Ecran de sécurité
    Améliorations des textes : Intertitres en image, Sommaire automatique
    Raccourcis typographiques : Découpe en pages et onglets, Tout en couleurs
    Affichage public : SPIP et les liens… externes

    Je suis avec Spip 3.0.20 et SarkaSPIPr v4.5.1

    Quelqu’un pourrait-il m’aider ?

    Répondre à ce message

  • Le 9 avril 2014 à 18:05, par Christophe Noisette En réponse à : En onglets dans le texte de SPIP, ou ailleurs...

    J’apporte de l’eau à mon moulin... Déjà je suis en spip 3.0.16 et j’ai aussi le plugin Couteau suisse.
    Ensuite j’ai vu avec FireBug que la class du titre de l’onglet venait justement de decoupe.css qui est dans le plugin Couteau Suisse. J’ai donc modifié ce dernier. En vain. Voilà l’état de mes réflexions.
    Vraiment merci pour ce bel outil.
    Cordialement
    Christophe

    • Le 9 avril 2014 à 21:14, par Christophe Noisette En réponse à : En onglets dans le texte de SPIP, ou ailleurs...

      Encore moi : en fait mes modifs de decoupe.css étaient bonnes, mais pour être prises en compte, il fallait que je supprime sur le ftp le dossier /tmp/couteau_suisse... Vider le cache de FireFox et de spip ne suffisait pas. Désolé pour le dérangement.
      Christophe

    Répondre à ce message

  • Le 27 octobre 2012 à 07:19, par PRX En réponse à : En onglets dans le texte de SPIP, ou ailleurs...

    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.

    PNG - 22.5 ko

    Répondre à ce message

  • Le 1er septembre 2012 à 18:36, par serginio En réponse à : En onglets dans le texte de SPIP, ou ailleurs...

    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

Répondre à cet article

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Mailsubscribers

    16 janvier 2013 – 274 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes (...)

  • noiZetier v2

    9 novembre 2012 – 36 commentaires

    Le noiZetier offre une interface d’administration permettant d’insérer au choix des éléments modulaires de squelettes (noisettes) et de les ajouter ainsi à ses squelettes. Compatibilité La version 2 du noizetier fonctionne sous SPIP 3. Elle est (...)

  • cirr : plugin « rédacteur restreint »

    29 octobre 2010 – 60 commentaires

    Ce plugin « cirr : rédacteur restreint » permet d’affecter des rubriques aux rédacteurs et modifie les droits afin qu’un rédacteur restreint (ou un administrateur restreint) voit dans l’espace privé uniquement les rubriques qui lui sont affectées (et leur (...)

  • Un retour d’expérience d’utilisation de Formidable

    26 octobre – commentaires

    Il s’agissait de créer un formulaire d’inscription à un évènement modérer les inscriptions dans le privé publier les inscriptions dans le public Nous avons discuté de cette présentation lors de l’apéro SPIP du 15 février 2016 à la Cantine (...)

  • Métas +

    3 décembre – 14 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

Ça spipe par là