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
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
Discussions par date d’activité
43 discussions
Pour info ; ce plugin fonctionne bien en SPIP 4.1 juste en changeant les bornes de compatibilité.
Répondre à ce message
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 :
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...)
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.
Hello
J’ai un petit conflit avec le sommaire automatique.
En effet les intertitres de spip sont en h3, donc si on met un système d’onglets dans un paragraphe, le h2 passe avant et le sommaire devient surprenant !
Bon je vais passer les h2 en h4
Si ça pose problème à quelqu’un, on reviendra en arrière.
Répondre à ce message
Pour info après changement des bornes
compatibilite=« [3.0.0 ;3.2.*] »
RAS
Tu parles de la version 1 ou 2 du plugin ?
Onglets dans le texte 2.0.1 - dev
Merci, j’ai fait le changement :-)
Répondre à ce message
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
Bonjour,
je me permets d’INSISTER et de reformuler ma question (Spip 3.1.1) :
on met où les indications de classes Css
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
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 ?
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 »
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
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
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 :
dd
Répondre à ce message
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
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
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
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
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
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.
Oups j’ai oublié ceci à la fin
Répondre à ce message
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...
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
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
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 :
..je n’ai sans doute pas bien compris les modèles fournis avec le plugin.
dd
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 :
Répondre à ce message
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....
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 ?
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
?
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
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 :
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 ?
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)
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 :
Répondre à ce message
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 :
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 :
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 ?
Salut. Et si tu simplifiais un peu ? Du genre :
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
Magnifique !! Merci !!
J’ai pu faire la pagination de mes articles par année en onglets :)
Répondre à ce message
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 ?
waoo 5 ans déjà....
salut nicolas,, la question avait été posée à l’époque mais n’avait pas trouvé de soluce, désolé
Une piste : Découper un texte en pages et/ou en onglets ;-)
Tu veux vraiment que je réponde, Patrice ?
Pierre, j’ai fait ce qu’il faut, mais je ne vois pas le plugin sur la zone, comment puis-je ajouter mon code ?
salut nicolas, heu j’ai pas d’accès à la zone, je m’en occupe aujourd’hui ou bien tu postes ?
Si tu veux, je l’ajoute à la zone. Tu peux m’ajouter comme auteur de cet article, que je complète la doc, du coup ?
c fait, et merci et bravo pour le boulot ! ;)
J’ai vu que tu as demandé un compte pour la zone, donc finalement tu ajoutes ton code et je me contente de modifier ensuite ?
J’ai déjà créé le dossier :
svn://zone.spip.org/spip-zone/_plugins_/onglets_textefait, waoo que 5 minutes pour piger comment comiter, balaise tortoise, merci Nicolas
Et voilà, c’est ajouté :
http://zone.spip.org/trac/spip-zone/changeset/43676
Répondre à ce message
Bonjour
Débutant sur spip 2.0.10, j’utilise sarka spip 3.0.2.
Je découvre les onglets qui me permettrai d’avoir des articles moins long.
voir un article d’essai sur mon site avec onglet ici
ma question : pour avoir des onglets et des fonds de pages sur le même thème que mon site, ou je vais trouver le fichier css et ou je doit le mettre ensuite ?
Merci de votre aide et de toutes les améliorations que vous nous apportez.
Cordialement
Eric
Répondre à ce message
Problème résolu :
pb de clic sur les onglets sous IE 7 (et pas sous Mozilla FF)
Solution simple :
enlever la ligne :
« cursor : default ; »
du css.tab
En espérant en avoir aidé d’autres.
Répondre à ce message
bonjour,
j’ai installé le plugin sous spip 2.0
Il est idéal pour le site que je créé mais je ne parviens pas à trouver comment modifier l’apparence de mes onglets...aucune de mes modifications CSS n’est prise en compte, que ce soit pour les onglets comme pour leur contenu !!(taille de la vignette, couleur....)
Merci de votre réponse !!
Répondre à ce message
Salut
merci pour ce plugin bien sympa
j’ai un (tout petit) souci concernant l’ordre des onglets. Je crois connaître l’origine du problème mais je ne connais pas assez bien javascript pour y remédier :
j’utilise en fait le plugin pour générer des onglets à la fois dans le squelette et dans le texte (via des modèles).
Tout fonctionne à merveille. Au niveau du code source de la page, mes titres et mes contenus sont dans le bon ordre, mais ce sont simplement les onglets qui ne sont pas dans le même ordre que le contenu : les onglets créés dans le texte via les modèles sont positionnés avant les onglets générés directement dans le squelette.
J’imagine que c’est simplement que dans le code du js c’est le champ texte qui passe d’abord à la moulinette, puis le squelette ?
C’est gênant car lorsqu’on arrive sur la page, c’est un onglet secondaire qui s’affiche et l’onglet principal se retrouve après tous les autres...
Quelqu’un saurait comment corriger le js pour que le squelette passe avant le champ texte ?
merci du coup de main
Répondre à ce message
Bonjour,
Quelqu’un sait-il comment résoudre via les CSS le bug d’IE6 qui n’affiche pas les images (documents) inclus dans un article lorsqu’ils sont alignés à gauche ou alignés à droite (float left et float right) ?
J’ai beau mettre des z-index à 10, 100, ... etc sur les classes .spip_documents .spip_documents_right et .spip_documents_left
rien y fait, IE6 ne veut rien entendre et la suppression de la couleur sur .dynamic-tab-pane-control .tab-page dans tab.css (astuce donnée dans un commentaire si dessous) n’est possible que sur un site au fond de couleur identique au tab.page.
Merci.
[Résolu]
Pour ceux qui rencontreraient le même problème avec IE6, j’ai trouvé la solution en rajoutant la propriété position : relative ; aux classes du css de spip :
.spip_documents_right et .spip_documents_left
Répondre à ce message
Bonjour,
J’utilise avec succès ce plugins. Il est vraiment impressionnant.
Juste une idée de variation : la possibilité d’avoir les onglets en vertical (un peu comme un répertoire papier...) ?
Je ne sais pas si cela est possible, voire même esthétique...
Merci en tout cas et bravo
Ca serait une très bonne idée que de faire des onglets a la verticale avec un choix possible entre les deux et le top du top la possibilité de les alterner en cascade par exemple pour pouvoir créer des hierarchie en onglets. Il serait fort éagréable dans le meme sens de pouvoir attribuer des styles différents a des onglets imbriqués les uns dans les autres.
Genre 1er niveau blanc, niveau infirieur dans la hierarchie d’une autre couleur etc... J’ai essayé de le faire mais j’ai l’impression que le plugin est trop dépendant des class et id qui sot attribuées aux div, on ne peut donc pas faire des class différentes ou difficilement.
Répondre à ce message
Bonjour pierre,
Merci pour ton plugin, j’ai ajouté un peu de javascript pour avoir en plus le code généré dans le 3em onglet, difficile à expliquer mais visible ici http://elastick.net/Astuces-SPIP
si ça peut servir, help yourself
++
*alm remember chatillon virtutus
Répondre à ce message
Un grand merci tout d’abord pour ce plug très pratique !
N’étant pas très expérimenté, je voudrais savoir comment changer la couleur de fond des onglets (bleue par défaut) pour la rendre transparente par exemple ou mieux (soyons fou !) attribuer une couleur par onglet.
Merci encore
Répondre à ce message
J’utilise ce plugin avec grand bonheur... Jusqu’à ce que j’ai changé un peu mon squelette... et là cata avec IE (sur firefox pas de soucis)
La partie du squelette contenant l’article a désormais une auteur fixée (en px), et un scroll... or avec internet exploreur les onglets restent fixe sur l’image, le reste de l’article défilant derrière.
De plus mon menu (plugin menu déroulant) devient transparent, et donc se confond avec le texte contenu dans les onglets)
Que faire pour contenir les caprices d’IE ???
Voici mon CSS pour la partie contenant les articles.
Pour le CSS de l’onglet pas de modif avec l’origine
Merci d’avance pour votre coup de pousse
et en mettant un height à l’onglet dans la css ?
Je viens d’essayer... mais ça ne change pas le bug sous IE.
Le tableau déterminé par l’onglet semble ne pas être inclus dans le « div contenu ».
Le contenu de l’article est « scrollé » par la barre de défilement déterminée dans le « div contenu » alors que le tableau des ongets est scrollé par la barre de défilement de la page entière....
J’essaye de regarder dans le code source de la page ce qui peut clocher... mais je ne vois pas...
est-ce que ce ne serait pas le « .dynamic-tab-pane-control »... dont je ne connais pas rôle ?
Merci pour l’idée quand même.
Voilà en gros le code source de la partie concernée..
désolé pour le format, j’ai enlevé les < de début de balise, je ne sais plus comment on cite du code.
Je m’auto-réponds (vraiment désolé de polluer le forum... mais on peut éventuellement supprimer mes messages intermédiaires.)
Une solution qui fonctionne :
J’ai ré-étalonné le z-index dans le fichier tab.css
Si j’ai bien compris ce critère gère la superposition des différents éléments. Il devait y avoir un conflit au niveau de la valeur par défaut du z-index des éléments du squelette dans habillage.css.
En augmentant tous les z-index d’une unité dans tab.css le problème s’est réglé.
Répondre à ce message
Dans un squelette, j’avais besoin d’afficher un liste d’article avec un onglet par article, pour que la ligne ne soit pas trop longue, j’ai modifié le plugin pour permettre un genre de pagination (en fait faire apparaitre en premier onglet « <" et en dernier "> » qui permettent d’avancer ou de reculer dans la liste)
Je mettrais bien volontier ces modifs à disposition mais je ne sais pas comment.
faire un article « onglets paginés » sur ce site ?
Répondre à ce message
La nouvelle feuille de style rend l’ensemble du texte déterminé par l’onglet gris comme l’onglet, ce qui est très laid !
Que changer pour que cela revienne à l’état antérieur, où le texte était sur fond blanc ?
Peut-on déterminer des ancres aux onglets, de manière à faire des appels directs ?
Merci
Je précise que mettre une ancre dans le modèle de la forme :
<a name="#ENV{titre}"></a>ne fonctionne pas.
La nouvelle feuille de style n’est proposée que pour obtenir des tailles d’onglets variables.
La couleur grise n’est pas imposée, elle est modifiable à ta convenance. Que tu trouves ça laid n’implique pas que ce soit laid, de même que je trouve ta formulation très désagréable n’implique pas qu’elle soit désagréable, à chacun de se faire une idée...
Pour le reste, une question que tu as déjà posée à propos des ancres, http://www.dionysos.org/En-onglets-dans-le-texte-de-spip#forum32289
je n’ai toujours pas de solution, ni l’auteur du script d’ailleurs. Mais si tu codes quelque chose qui le fait, n’hésites pas à en faire profiter les autres, tu verras, même si tu t’exposes à des critiques désagréables, donner apporte un certain plaisir...
au plaisir...
Bonjour,
Je suis désolée de t’avoir vexé, loin de moi cette idée ! Si j’ai dit que c’était laid, cela signifiait évidemment que JE trouvais ça laid < :-)
La question était surtout : peut-on mettre sa feuille de style dans son propre dossier squelettes, afin d’éviter de devoir la reprendre à chaque nouvelle version ? Et dans ce cas comment savoir ce qui a changé pour n’avoir plus qu’à agir sur le changé.
Quant aux onglets, désolée aussi, mais je pensais que peut-être depuis le message de fin décembre quelqu’un avait trouvé une solution, que je n’ai pas trouvée moi-même.
Vexé ? décidément tu fais dans la finesse !
Pour ta css, enregistres la dans ton dossier css, tu verras que ça fontionne.
Pour l’ancre il doit y avoir moyen de modifier le js vers la ligne 81 pour récupérer tabIndex dans l’url mais je sais pas faire.
J’essaie d’être délicate et tu me le reproches ?! Décidément, je vais renoncer à poser mes questions et problèmes dans ce forum-ci, si le moindre de mes mots est mal pris....
Merci pour l’info pour le script, si j’arrive à quelque chose peut-être oserai-je poster ici, mais avec quels mots ?
Répondre à ce message
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
Je regarde coté image png quelquefois..........
prends cette css
http://www.dionysos.org/download/tab.css
Merci c’est exactement ça.............
@llez pour dire merci :
Répondre à ce 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...
:-)
Répondre à ce message
Sous Safari, comment faire pour que le texte ne dépasse pas le cadre de l’onglet ?
Voir : exemple
Merci et encore bravo
Répondre à ce message
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 ?
Répondre à ce message
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 :
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,
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 ;
ç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.
Répondre à ce message
Bonjour,
Comment ne pas vouloir des ancres qui ramènent à chaque onglet ?
Ah, oui, mais il faudrait que soit créée automatiquement la suite
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 :
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 !
Répondre à ce message
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 ;-)
Répondre à ce 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.
Répondre à ce message
Superbe ; franchement installation hyper simple...
Répondre à ce message
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 ?
Peut-on mettre un article dans un autre article ?
C’est pas bien compliqué : tu fais ça dans le squelette
Répondre à ce message
Salut.
Plugin installé mais aucun résultat (je suis 1.9.1).Je pense que je respecte la synthaxe...
Ai-je raté quelque chose ?
re re essayé sur 1.9.1 vierge, no problem
Peut être d’activer le plugin ? ;-)
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.
Celà aurait pû être le cas, mais non, il est bien activé !!
un problème de répertoire, de chemin ?
tu peux détailler ce qu’il se passe ?
Est ce que tu as mis #INSERT_HEAD dans ton <head> ?
#INSERT_HEAD ?
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.
du nouveau ?
j’ai essayé avec une dizaine de plugins,
dont fck et Lecteur Flash (MP3,flv)
j’ai pas eu de problèmes
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
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
copies ces ligne dans ton texte
ça devrait coller
c’est peut être un souci avec sarka, je sais pas
tiens moi au courant, bonne soirée
j’ai oublié : copie le dossier modeles du dossier du plugin dans ton dossier squelette...
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.
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
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
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.
j’ai trouvé ! Je mets la réponse à la suite du message de laurence en haut de la page.
Répondre à ce message
Tout est dans le titre !
Sans sushi
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 :
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.
Suivre les commentaires :
|
