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 :
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...
plugin onglets_texte_1.9.1.zip
css onglets taille variable
RSS 2.0
Vos commentaires
# Le 29 décembre 2009 à 19:10, par ?
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
# Le 20 septembre 2009 à 23:00, par pascalw
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
# Le 2 septembre 2008 à 01:45, par Tropicaloo
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.
# Le 12 septembre 2008 à 23:50, par Tropicaloo
[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
# Le 20 octobre 2007 à 08:09, par rcaron
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
# Le 10 juillet 2008 à 20:17, par Klesk
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
# Le 31 décembre 2007 à 02:07, par alm
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
# Le 9 novembre 2007 à 00:19, par loloboy
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
# Le 6 novembre 2007 à 22:39, par Nicolas
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
# Le 7 novembre 2007 à 10:13, par ?
et en mettant un height à l’onglet dans la css ?
# Le 7 novembre 2007 à 18:55, par nicolas
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.
# Le 7 novembre 2007 à 19:02, par nicolas
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.
# Le 7 novembre 2007 à 19:26, par nicolas
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
# Le 8 octobre 2007 à 10:45, par hodj
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.
# Le 8 octobre 2007 à 11:07, par Pi r
faire un article "onglets paginés " sur ce site ?
Répondre à ce message
# Le 20 septembre 2007 à 15:38, par Perline
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
# Le 21 septembre 2007 à 00:35, par Perline
Je précise que mettre une ancre dans le modèle de la forme :
<a name="#ENV{titre}"></a>ne fonctionne pas.
# Le 6 octobre 2007 à 18:47, par Pi r
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-...
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...
# Le 6 octobre 2007 à 21:14, par Perline
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.
# Le 7 octobre 2007 à 12:25, par Pi r
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.
# Le 7 octobre 2007 à 22:05, par Perline
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
# Le 20 août 2007 à 18:10, par asso.bachant
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?art...
# Le 20 août 2007 à 18:44, par troll
il suffit de supprimer ou commenter les lignes width dans le fichier css
# Le 20 août 2007 à 19:37, par asso.bachant
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
# Le 20 août 2007 à 19:48, par troll
c’est un reliquat de l’image de fond, suppime auusi la ligne
background-image : url( "tab.png" ) ;
# Le 20 août 2007 à 23:11, par asso.bachant
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
# Le 21 août 2007 à 07:54, par troll
les lignes background sont mal commentée, il faut pour chaque ligne contenant background une fois
/* ....... */
# Le 21 août 2007 à 11:04, par ?
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..........
# Le 21 août 2007 à 11:50, par troll
prends cette css
http://www.dionysos.org/download/tab.css
# Le 22 août 2007 à 08:05, par ?
Merci c’est exactement ça.............
@llez pour dire merci :
Répondre à ce message