Vrai-faux tableau à onglet

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Vrai-faux tableau à onglet

Message par Daewyn le Lun 8 Juil 2013 - 19:03

Bonjour / Bonsoir, et d'avance merci à celui qui m'aidera.

Alors, ma demande est un peu compliquée, mais ayant déjà vu ça sur un autre forum, je sais que c'est possible.

J'aimerais réaliser un "tableau à onglet" (donc avec un contenu qui s'affiche au click sur un onglet), mais sans utiliser de script de façon à ce que ce soit affichable dans les messages de n'importe quel forum, et surtout modifiable par n'importe quel membre. Bien sûr je pourrais utiliser une iframe, mais ce n'est pas mon but puisque je veux que ce soit modifiable directement en éditant le message.

J'avais pensé à une solution hybride en jouant sur les infobulles, mais ça n'afficherait les contenus qu'au passage de la souris et pas au click.
Du coup j'ai pensé utiliser les ancres de messages, mais... je n'arrive pas à positionner mon contenu pour qu'il reste à une place fixe -w-

Bref, je ne sais pas si c'est très clair mais mon but est de réaliser un tableau qui "fasse" comme un tableau à onglet, mais uniquement via HTML/CSS (donc possiblement en se servant des ancres de messages). Merci d'avance si quelqu'un sait comment faire ! **


Dernière édition par Daewyn le Mar 16 Juil 2013 - 15:47, édité 1 fois

Daewyn
***

Féminin
Messages : 182
Inscrit(e) le : 23/06/2011

Daewyn a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Vrai-faux tableau à onglet

Message par Daewyn le Mar 9 Juil 2013 - 11:29

Up !

Daewyn
***

Féminin
Messages : 182
Inscrit(e) le : 23/06/2011

Daewyn a été remercié(e) par l'auteur de ce sujet.

L'auteur de ce message est actuellement banni du forum - Voir le message

Résolu Re: Vrai-faux tableau à onglet

Message par Daewyn le Mar 9 Juil 2013 - 11:37

Euh pas un en particulier, justement, puisqu'avec un tel code ce serait faisable partout (sur Phpbb2 en tout cas).

EDIT : houlà je suis blonde, j'avais pas compris la question. Le forum où j'ai vu ça est Like a boss, aujourd'hui fermé et inaccessible (du coup je ne donne pas le lien).

Daewyn
***

Féminin
Messages : 182
Inscrit(e) le : 23/06/2011

Daewyn a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Vrai-faux tableau à onglet

Message par Daewyn le Mer 10 Juil 2013 - 15:22

Up !

Daewyn
***

Féminin
Messages : 182
Inscrit(e) le : 23/06/2011

Daewyn a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Vrai-faux tableau à onglet

Message par Daewyn le Jeu 11 Juil 2013 - 13:07

Up ~

Daewyn
***

Féminin
Messages : 182
Inscrit(e) le : 23/06/2011

Daewyn a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Vrai-faux tableau à onglet

Message par Daewyn le Ven 12 Juil 2013 - 20:02

Up !

Daewyn
***

Féminin
Messages : 182
Inscrit(e) le : 23/06/2011

Daewyn a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Vrai-faux tableau à onglet

Message par Daewyn le Sam 13 Juil 2013 - 15:45

Up

Daewyn
***

Féminin
Messages : 182
Inscrit(e) le : 23/06/2011

Daewyn a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Vrai-faux tableau à onglet

Message par [AoH]Insane le Sam 13 Juil 2013 - 17:16

En fait, pour faire ce genre de chose, il te suffis de mettre un code JavaScript à son emplacement habituel:

Panneau d'Administration (PA) Arrow Modules Arrow HTML & JAVASCRIPT Arrow Gestion des codes Javascript

Tu y colle ce code (à modifier au besoin):

Code:
$(function(){ $("#menu dl").hover(function(){$("#menu dl dd").slideUp("500");$(this).find("dd").stop(true,true).slideDown("500");},function(){$(this).find("dd").slideUp("500");}); });

et tu n'oublis pas de cocher Sur toutes les pages, comme ceci:


Une fois ce fait, dans ton message, tu place un code de ce genre:

Code:
<div id="menu"><dl><dt>Titre Onglet 1</dt>
<dd>
<ul>
<li><a style="margin-bottom:4px;" href="URL_1">Lien 1</a></li>
<li><b>Séparation 1</b></li>
<li><a style="margin-bottom:4px;" href="URL_2">Lien 2</a></li>
</ul>
</dd>
</dl>

<dl><dt>Titre Onglet 2</dt>
<dd>
<ul>
<li><a style="margin-bottom:4px;" href="URL_3">Lien 3</a></li>
<li><b>Séparation 2</b></li>
<li><a style="margin-bottom:4px;" href="URL_4">Lien 4</a></li>
</ul>
</dd>
</dl>

[...]</div>

Ce signe [...] signifie jusqu'à l'infini. Cependant, il faut savoir que dans les messages, les passages de lignes sont pris en compte, il faudra donc tous les enlever après avoir codé. Ce qui donnerait quelque chose comme ceci:

Code:
<div id="menu"><dl><dt>Titre Onglet 1</dt><dd><ul><li><a style="margin-bottom:4px;" href="URL_1">Lien 1</a></li><li><b>Séparation 1</b></li><li><a style="margin-bottom:4px;" href="URL_2">Lien 2</a></li></ul></dd></dl><dl><dt>Titre Onglet 2</dt><dd><ul><li><a style="margin-bottom:4px;" href="URL_3">Lien 3</a></li><li><b>Séparation 2</b></li><li><a style="margin-bottom:4px;" href="URL_4">Lien 4</a></li></ul></dd></dl>[...]</div>

En espérant avoir aidé

[AoH]Insane

[AoH]Insane
***

Masculin
Messages : 118
Inscrit(e) le : 04/07/2013

http://aoh-rpg.forum-canada.com/
[AoH]Insane a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Vrai-faux tableau à onglet

Message par Daewyn le Lun 15 Juil 2013 - 19:20

Merci pour le code (qui m'a l'air bien pratique) [AoH]Insane !

Cependant je me demandais (vu que c'était le but de ma requête) si un tel effet pouvait être réalisé, justement sans aucun javascript. Parce que là avec ce code, je ne peux le faire que sur un forum que j'administre en gros, or ce qui m'intéressait c'était de le rendre faisable même sur un fo où je n'aurai été que membre.

Je ne sais pas si je suis très claire xD Après si la réponse est non, bon eh bien, tant pis, mais je préfère demander.

Daewyn
***

Féminin
Messages : 182
Inscrit(e) le : 23/06/2011

Daewyn a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Vrai-faux tableau à onglet

Message par Daewyn le Mar 16 Juil 2013 - 13:03

Up !

Daewyn
***

Féminin
Messages : 182
Inscrit(e) le : 23/06/2011

Daewyn a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Vrai-faux tableau à onglet

Message par Tech le Mar 16 Juil 2013 - 14:26

Bonjour,

Ce n'est réalisable que par javascript Wink

Mais il y a sans doute la solution d'héberger le javascript quelque part et de l'appeler dans les messages via le HTML. A essayer.

Cordialement.



{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

Masculin
Messages : 21119
Inscrit(e) le : 01/12/2007

http://forum.forumactif.com
Tech a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Vrai-faux tableau à onglet

Message par Daewyn le Mar 16 Juil 2013 - 15:47

Merci de ta réponse Tech !

Bon et bien je vais sans doute essayer ça dans ce cas ^^ Merci encore, je met le sujet en résolu /o/

Daewyn
***

Féminin
Messages : 182
Inscrit(e) le : 23/06/2011

Daewyn a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum