SPIP-Contrib

SPIP-Contrib

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

288 Plugins, 197 contribs sur SPIP-Zone, 142 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 – 132 commentaires

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

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

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 22 octobre 2017

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 26 mars à 18:28, par amilcar En réponse à : En onglets dans le texte de SPIP, ou ailleurs...

    Pour info après changement des bornes

    compatibilite=« [3.0.0 ;3.2.*] »

    RAS

    Répondre à ce message

  • Le 29 septembre 2016 à 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 2016 à 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 2016 à 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 2016 à 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.

    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

  • GIS 4

    11 août 2012 – 1417 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

  • Plugin Domlang : Domaines par secteur de langue

    4 septembre – commentaires

    Domlang est un plugin qui permet d’associer un nom de domaine ou un sous-domaine à un secteur de langue. Ce plugin convient pour un site qui utilise des secteurs de langues. En configuration, pour chaque secteur, vous pourrez définir une URL (...)

  • Menu de langues sous forme de liens

    30 novembre 2009 – 121 commentaires

    Par défaut, le menu de langue de SPIP s’affiche : Sous la forme d’une liste déroulante ; En affichant toutes les langues du site, qu’elles soient utilisées ou non (c’est à même si elles ne sont pas affectées à au moins un article ou une rubrique) ; Sans (...)

  • Agenda 2.0

    3 novembre 2008 – 1098 commentaires

    Voici la version pour SPIP 2.0 du Plugin Agenda pour SPIP 1.9.2, avec une interface remaniée pour encore plus de plaisir. Pour une documentation concernant l’utilisation d’Agenda 3 pour SPIP 3, veuillez pour l’instant vous référer à SPIP 3, Agenda (...)

  • Mailsubscribers

    16 janvier 2013 – 332 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 de (...)