.Little Lady
Ange discret
Nombre de messages: 28
Logiciel : Tophiltre Studio & Toshop CS3 Extended ( très mal pour le moment)
Réputation: 0
Points: 33
Date d'inscription: 30/12/2009
Détails sur le membre
Logiciel principal: Photofiltre
Ma disponibilité: Everyday, it's the Holidays !!!!
Spécialités graphiques: Codeur
 |  Sujet: [HTML & CSS] Organisation par Onglet  Sam 24 Juil 2010, 10:40 | |
| <div class="titlelist">Créer une organisation par Onglet</div>
Niveau: Intermédiaire | Par: .Little Lady | Validé par: .Little Lady | En date du: 18.06.2010 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. 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 :<img src="http://illiweb.com/fa/admin/icones/act-html.png"> 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 avec 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 = 'quoi'; 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. |
|
