Bonjour,

Dans ce tuto, je vous propose d'apprendre comment faire une organisation par onglets. Cette organisation marche sur votre PA ou sur une page HTML.

Pour voir le résultat, cliquez ici.

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 changeOnglet(_this){
    var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('span');
    for(var i = 0; i < getOnglets.length; i++){
        if(getOnglets[i].id){
            if(getOnglets[i].id == _this.id){
                getOnglets[i].className = 'mon_onglet_selected';
                document.getElementById('c' + _this.id).style.display            = 'block';
            }
            else{
                getOnglets[i].className = 'mon_onglet';
                document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
            }
        }
    }   
}

Tout est bon jusque là ??

Alors on continue.

Ensuite tu copies l'adresse de ta page HTML que tu colleras dans une balise script 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:

<table style="margin: auto;" ><tr><td style="padding-bottom: 4px;" align="center"><div id="mes_onglets">
        <span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Nom de l'Onglet</span><br /><br />
        <span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Nom de l'Onglet</span><br /><br />
        <span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Nom de l'Onglet</span><br /><br />
        <span id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Nom de l'Onlget</span></td>
  <td><div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">Contenu de l'Onglet</div>
    <div id="co_2" class="mon_contenu" style="display: none;">Contenu de l'Onglet</div>
    <div id="co_3" class="mon_contenu" style="display: none;">Contenu de l'Onglet</div>
    <div id="co_4" class="mon_contenu" style="display: none;">Contenu de l'Onglet</div>
</div></div></div></td></tr></table>

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

Code:

<span id="o_X" class="mon_onglet_selected" onclick="changeOnglet(this);">Nom de l'Onglet</span><br /><br />

Il faut cependant penser à remplacer le X après le o_ par le numéro de l'onglet.

et ceci dans la partie "mes_contenus" :

Code:

<div id="co_X" class="mon_contenu" style="display: none;">Contenu de l'Onglet</div>

Il faut cependant penser à remplacer le X après le o_ par le numéro de l'onglet.

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:

.mon_onglet{
  display: inline;
  padding: 2px;
  margin: 2px 5px 5px 5px;
  color: #fff;
}
 
.mon_onglet:hover{
  color: #333;}
       
.mon_onglet_selected{
  display: inline;
  padding: 2px;
  margin: 2px;
  color: #000;
} 
       
.clear{
  clear: both;}
 
.mon_contenu{
  color: #000;
  padding: 10px;
  margin: 10 px;
  line-height: normal;
  font-size: 11px;}
 
#mes_contenus, #mes_onglets{
  height: 100%;
  width:100%;}

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.