Bonjour,
Dans ce tuto, je vous propose d'apprendre comment faire une organisation par onglet. Cette organisation marche sur votre PA ou sur une page HTML.
Script trouvé sur
support du web.
I:- Les scripts -Pour commencer, va sur ton Panneau d'Admin >> Module >> HTML >> Gestion des Pages HTML >>
Créer une nouvelle page.
Avant, vérifie bien qu'il y a bien cette image :
au-dessus du champ texte.
Ensuite à ces deux questions coche non:
Voulez-vous utiliser le haut et le bas de page de votre forum ?
Utiliser cette page en tant que page d'accueil ?
Puis tu colles ceci dans ta page HTML et tu enregistres:
- 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;
}
//-->
Tout est bon jusque là ??
Alors on continue.
Ensuite tu copies l'adresse de ta page HTML que tu colleras dans une balise sricpt que voici:
- Code:
-
<script language="javascript" src="adresse de ta page html script onglet"></script>
Ce code, tu peux le placer à deux endroits:
- soit dans ton template overall_header_new juste avant la balise < /head> mais pour cela il faut que tu soit la fondatrice de ton forum;
- soit dans la description de ton forum.
C'est bon, on peut continuer ??
II:- Les Onglets -Alors passons maintenant à la création de tes onglets. Pour cela, il te suffit de copier et de coller ce code dans ta PA:
- Code:
-
<div class="systeme_onglets">
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Nom de l'onglet</span>
<span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Nom de l'onglet</span>
<span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Nom de l'onglet</span>
</div>
<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Contenu de l'onglet</div>
<div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Contenu de l'onglet</div>
<div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Contenu de l'onglet</div>
</div>
</div>
<script type="text/javascript">
//<!--
var anc_onglet = 'nom_de_longlet';
change_onglet(anc_onglet);
//-->
</script>
La valeur que tu donneras à cette ligne:
var anc_onglet = 'nom_de_longlet', qui se trouve en fin de code correspond à l'onglet qui s'affichera à chaque fois que tu rechargeras la page.
Pour finir, si tu souhaites rajouter des onglets, il te suffiras de rajouter ceci dans la partie "onglet":
- Code:
-
<span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Nom de l'onglet</span>
et ceci dans la partie "contenu_onglet":
- Code:
-
<div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Contenu de l'onglet</div>
III:- Le CSS -Il est évident que tu peux personnaliser tes onglets avec du CSS. Voici donc un code CSS de base modifiable bien évidemment:
- Code:
-
.onglet
{
display:inline-block;
margin-left:3px;
margin-right:3px;
padding:3px;
border:1px solid black;
cursor:pointer;
}
.onglet_0
{
background:#bbbbbb;
border-bottom:1px solid black;
}
.onglet_1
{
background:#dddddd;
border-bottom:0px solid black;
padding-bottom:4px;
}
.contenu_onglet
{
background-color:#dddddd;
border:1px solid black;
margin-top:-1px;
padding:5px;
display:none;
}
Si tu souhaites que les onglets changent au passage de la souris, remplace tous les onclick par onmouseover.
Voilà, nous arrivons à la fin de ce tuto. J'espère qu'il vous aura bien servi.
Pour voir le résultat, cliquez
ici.
Merci à Little Lady pour la création de ce tutoriel.
Accueil 
