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