Alors, pour une PA à onglets, j'avais trouvé une méthode, qui a marché. J'ai actuellement un problème de conflit, dans une partie staff à onglets dans ma PA elle-même à onglets, donc je ne sais pas si cette méthode marche de partout...
Bref. Je vais essayer de vous expliquer comment j'avais fait.
D'abord, commençons par créer une nouvelle page html, en allant dans le panneau -> module -> gestion des pages html.
Ce que j'avais fait, c'était créer une nouvelle page, et y mettre ce code :
- Code:
-
//<!--
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet_'+name).style.display = 'block';
anc_onglet = name;
}
//-->
Puis, en prenant l'adresse de la page html juste créée, j'ai mis ce code dans la description du forum (Général -> Configuration) :
- Code:
-
<script language=javascript src=adresse de votre page html></script>
Bon, c'est déjà ça qu'on oublie pas. Maintenant, on va guetter le code html et le css.
Niveau code html, j'avais obtenu ça :
- Code:
-
/*Partie Un*/
<div class="systeme_onglets">
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_Onglet_Un" onmouseover="javascript:change_onglet('Onglet_Un');">Titre Onglet Un</span>
<span class="onglet_0 onglet" id="onglet_Onglet_Deux" onmouseover="javascript:change_onglet('Onglet_Deux');">Titre Onglet Deux</span>
<span class="onglet_0 onglet" id="onglet_Onglet_Trois"
onmouseover="javascript:change_onglet('Onglet_Trois');">Titre Onglet Trois</span>
<span class="onglet_0 onglet" id="onglet_Onglet_Quatre"
onmouseover="javascript:change_onglet('Onglet_Quatre');">Titre Onglet Quatre</span>
<span class="onglet_0 onglet" id="onglet_Onglet_Cinq"
onmouseover="javascript:change_onglet('Onglet_Cinq');">Titre Onglet Cinq</span>
</div>
<br><br>
/*Partie Deux*/
<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_Onglet_Un"> Ce que tu veux mettre dans le premier onglet</div>
<div class="contenu_onglet" id="contenu_onglet_Onglet_Deux"> Ce que tu veux mettre dans le deuxième onglet</div>
<div class="contenu_onglet" id="contenu_onglet_Onglet_Trois">Ce que tu veux mettre dans le troisième onglet</div>
<div class="contenu_onglet" id="contenu_onglet_Onglet_Quatre">Ce que tu veux mettre dans le quatrième onglet</div>
<div class="contenu_onglet" id="contenu_onglet_Onglet_Cinq"> Ce que tu veux mettre dans le cinquième onglet </div>
/*Partie trois*/
<script type="text/javascript">
//<!--
var anc_onglet = 'Votre_Onglet_Par_Défaut';
change_onglet(anc_onglet);
//-->
</script>
Donc que j'explique ce que tout cela veut dire. La première partie concerne vos titres d'onglets - vous pouvez remplacer les "titres onglet NOMBRE" par une image, si vous voulez, ça marche aussi. La deuxième partie, leur contenu et la troisième est un code pour savoir quel sera l'onglet par défaut qui s'affichera sur votre PA.
La valeur "onmouseover" est là pour indiquer que ça change au passage de la souris. On peut le remplacer par "onclick" si vous voulez que ça change en cliquant sur l'onglet - comme sur la PA de PRD.
Maintenant, pour gérer tout ça, il faut gérer la feuille de style html. Alors là, en l'occurrence, vous avez besoin de quelque chose comme ça :
- Code:
-
/*PA en onglets*/
.onglet
{
text-align: center;
display:inline-block;
margin-left:3px;
margin-right:3px;
padding:3px;
width: largeur de votre bouton titre en px;
-moz-border-radius:votre rayon d'arrondi en px;
border:bordure si besoin;
cursor:pointer;
}
.onglet_0
{
color:couleur du texte;
text-align: alignement du texte;
width: largeur de votre bouton titre;
background:couleur de fond;
-moz-border-radius:votre rayon d'arrondi en px;
padding-bottom:4px;
}
.onglet_1
{
text-align: alignement du texte;
width: largeur en pixel;
background:couleur de fond;
-moz-border-radius:arrondi;
}
.contenu_onglet
{
background-color:couleur de fond;
margin-top:-1px;
padding:5px;
display:none;
height:hauteur;
}
Alors. Je ne suis plus trop sûre... La class Onglet et Onglet_0 servent à mettre en forme les titres d'onglets par défaut, quand ils ne sont pas sélectionnés. Onglet_1 met en forme les différences quand l'onglet est sélectionné - un changement de couleur, de forme, de taille...
Contenu_Onglet gère le contenu de l'onglet donc, la façon dont cela s'affichera - ainsi, si vous voulez, vous pouvez mettre un cadre par exemple. J'ai donc mis des exemples de variantes que vous pouvez utiliser pour personnaliser vos onglets, mais on peut en utiliser beaucoup d'autres !
Donc vous personnalisez tout ça... Et hop \o/ Votre PA est prête !!
Chez moi, ça fonctionnait. Je ne pense pas que ce soit la seule technique, mais celle-ci me paraissait l'une des plus simples ! (je ne suis pas spécialement connaisseuse en codes, donc si un(e) misster CSS passe par là et connait mieux...)
J'espère que c'est clair =o Sinon, je suis ouverte aux questions, je dois pouvoir y répondre vis à vis de cette technique.
Tadam \o/
Accueil
