Tuto onglets

Etape 1,le message d'accueil:
Panneau d'admin'> affichage > généralités.

Code:

<script src="adresse du script qui permet d'animer les onglets"></script>
<div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>
        <li id="o_5" class="mon_onglet" onclick="changeOnglet(this);">Onglet 5</li>
        </ul>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">Mon contenu 1</div>
    <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
    <div id="co_5" class="mon_contenu" style="display: none;">Mon contenu 5</div>
</div></div></div>

Citation :

<script src="adresse du script qui permet d'animer les onglets"></script>

On ne s'occupe pas de cette partie là pour le moment. C'est la dernière étape.

Citation :

<ul>les onglets</ul>

Crée une liste qui contient les onglets.

Citation :

<li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>

C'est la première ligne de la liste, donc le premier onglet (o_) il porte le n°1 (1), son identifiant est o_1. Onclick="changeOnglet(this);" c'est la façon dont on va voir cet onglet, onclick signifie qu'il faut cliquer dessus. Ces deux éléments sont liés au script (étape 3).
Sa class "mon_onglet_selected" fait appel à la feuille CSS, c'est l'étape 2. Cette class permet de sélectionner cet onglet par défaut au chargement de la page et de lui donner son apparence.

Citation :

<li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>

C'est le même principe que pour l'onglet 1, le deuxième onglet a pour identifiant o_2, il a le même mode de sélection. Seule la class change. la class "mon_onglet" fait appel à la feuille CSS et permet de donner leur apparence aux onglets dont le contenu est caché.

[quote]<div id="mes_onglets"> <div id="mes_contenus">[quote]
Ces div vont permettre de définir les dimensions globales de la boite à onglet.

Citation :

<div class="clear">

Cela permet de cacher les contenus des onglets non sélectionnés.

Citation :

<div id="co_1" class="mon_contenu">Mon contenu 1</div>

C'est la ligne du premier contenu (c) de l'onglet 1 (o_1), donc son identifiant est co_1. C'est pareil pour tous les contenu, il suffit de changer le chiffre pour le faire correspondre au chiffre de l'onglet.

Etape 2, la feuille CSS:
Panneau d'admin > Affichage > couleurs - feuille de style CSS.
Une fois le message d'accueil installé, on se rend compte que ça ne ressemble pas à grand chose... on va se servir du CSS pour ordonner un peu tout ça:

Code:

.mon_onglet{
  float: left;
  padding: 2px;
  margin-right: 4px;
  margin-bottom: -1px;
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  cursor: pointer;
  width: 18%;
  list-style: none;}
     
.mon_onglet_selected{
  float: left;
  padding: 2px;
  margin-right: 4px;
  margin-bottom: -1px;
  color: #000;
  background: #ffffff;
  border-top: 1px solid #ff0000;
  border-right: 1px solid #ff0000;
  border-left: 1px solid #ff0000;
  border-bottom: none !important;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  cursor: pointer;
  width: 18%;
  list-style: none;}

.mon_onglet:hover{
  background: #b8efa1;} 
         
.clear{
  clear: both;}

.mon_contenu{
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
  padding: 10px;
  list-style: none;}

#mes_contenus, #mes_onglets{
  width: 100%;}

Citation :

.mon_onglet{
float: left;/*aligne les onglets*/
padding: 2px;/*met une petite marge autour du texte*/
margin-right: 4px;/*espace les onglets*/
margin-bottom: -1px;/*colle les onglets au contenu*/
color: #000;/*couleur de l'ecriture*/
background: #ffffff;/*couleur du fond*/
border: 1px solid #ff0000;/*couleur style et épaisseur des contours*/
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-right-radius: 8px;/*arrondis des angles du haut pour différents navigateurs*/
-webkit-border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
cursor: pointer;/*permet de mettre le curseur " flèche" dans la boite à onglet*/
width: 18%;/*largeur des onglets (on peut remplacer les % par un nombre de px*/
list-style: none;/*enlève les puces de liste*/}

Cette partie donne l'apparence aux onglets qui ne sont pas sélectionnés.

Citation :

.mon_onglet_selected{...}

Cette partie donne l'apparence à l'onglet sélectionné.Ce sont les mêmes attributs que pour ".mon_onglet" à une différence: les contours. Ils sont tous séparés et le contour inférieur est effacé grâce à "border-bottom: none !important;". Il faut toujours bien faire correspondre les attributs de ".mon_onglet" et ".mon_onglet_selected", sauf si on veut obtenir des effets bizarres.

Citation :

.mon_onglet:hover{
background: #b8efa1;}

Cela donne une couleur différente à l'onglet qu'on survole.

Citation :

.clear{
clear: both;}

Ce petit morceau est essentiel, il permet de cacher les contenus non sélectionnés, on n'y touche pas .

Citation :

.mon_contenu{
color: #000;/*couleur du texte*/
background: #ffffff;/*couleur du fond*/
border: 1px solid #ff0000;/*epaisseur style et couleur des contours*/
padding: 10px;/*marge autour du texte*/
list-style: none;/*enlève les puces de liste*/}

Ici on définit l'apparence des contenu qui apparaissent sous les onglets.

Citation :

#mes_contenus, #mes_onglets{
width: 100%;}

Ceci donne la dimension globale (onglets+contenus) de la boite à onglet. On peut remplacer le % par un nombre de px.

Etape 3, le code javascript.
Normalement les onglets sont en place, mais on ne peut pas changer, pour cela il faut ajouter le script qu'on a laissé de coté au début.
Panneau d'admin > Modules > gestion des pages Html.
Créez une nouvelle page Html,donnez lui un nom, cochez "non" aux 2 questions et collez ceci:

Code:

function changeOnglet(_this){
    var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('li');
    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';
            }
        }
    }         
}

Enregistrez. Revenez à la page de gestion des pages html et notez le numéro que porte votre page. Puis retournez dans votre message d'accueil et remplacez:

Citation :

<script src="adresse du script qui permet d'animer les onglets"></script>

par:

Citation :

<script src="/-h3.htm"></script>

Remplacez le 3 par le numéro de votre page html.

Il ne vous reste plus qu'à contempler vos onglets .

Pour le fond en dehors des onglets, si j'ai bien compris, ajoutez une div autour de votre message d'accueil:

Code:

<div style="background: url('http://hitskin.com/themes/14/60/43/i_background.jpg'); width: 100%; height: 100%;">le message d'accueil</div>