Faire un tableau avec onglet

Bonjour à tous !

Dans ce tuto, nous allons apprendre à faire ceci

On ne s’occupera pas ici de l’aspect visuel, nous ne parlerons que de l’aspect technique pour arriver à ceci. Pour faire ce genre d’effet, nous allons utiliser du jquery (une sorte de javascript dynamique). Pour cela, nous allons avoir besoin de la bibliothèque jquery (si vous possédez un ftp, il vous suffit de copier/coller dans un éditeur de texte le code se trouvant [ici] et de l’enregistrer en jquery.js pour les autres, pas de panique, nous utiliserons le lien du site )

Allez on y va Smile

1/ On crée la structure html

On commence par créer notre fichier. Nous allons utiliser une structure simple, car, je vous le rappelle, dans ce tuto nous apprendrons la technique de base, et nous la comprendrons ensemble afin que vous puissiez l’adapter à vos envies ensuite Wink

Nous n’allons donc utiliser que les balises suivante : span, h1 et div.

On a donc la structure de base de la page html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Faire un tableau avec onglet</title>

</head>

<body>

</body>
</html>

Dans laquelle on va insérer notre code. Avant de vous le montrer, définissons ce que chacun d’eux va contenir

>> le span contiendra : le titre de mon onglet + le contenu de l’onglet
>> le h1 correspondra à mon titre d’onglet
>> le div contiendra le contenu de mon onglet

Pour nous permettre de travailler la mise en page, nous allons aussi leur attribuer des noms (des class, car ces noms reviendront plusieurs fois sur la page Wink

). Nous allons aussi donner un id (identifiant unique) à l’onglet que nous voulons afficher par défaut (pour moi, c’est tout simplement le premier Smile

)

Nous ajoutons donc ceci entre les balises « body »

Code:

<span><h1 class="titre">Mon titre 1</h1><div class="bloc_texte" id="1">Mon texte du bloc 1</div></span>
<span><h1 class="titre">Mon titre 2</h1><div class="bloc_texte">Mon texte du bloc 2</div></span>
<span><h1 class="titre">Mon titre 3</h1><div class="bloc_texte">Mon texte du bloc 3</div></span>
<span><h1 class="titre">Mon titre 4</h1><div class="bloc_texte">Mon texte du bloc 4</div></span>

2/ On importe la bibliothèque jquery

Maintenant, nous allons importer la bibliothèque jquery. Le code suivant se place entre les balises « head ».

* Pour ceux qui ont leur propre ftp (on suppose que tous vos docs javascript sont dans un dossier nommé js)

Code:

* Pour les autres :

Code:

Nous avons donc pour le moment notre en-tête qui ressemble à ça :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Faire un tableau avec onglet</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

</head>

3/ On crée notre script jquery

Passons à l’étape la plus difficile Smile

Ici encore 2 cas de figure :

* Si vous possédez votre propre ftp, créer un nouveau fichier nommé onglet.js et vous l’importer de cette façon

Code:

* Si vous ne possédez pas de ftp, vous devrez écrire le code dans le head (en dessous de l’importation de la bibliothèque) entre ses balises :

Code:

Donc on y va Smile

Tout d’abord, on va indiquer que le script jQuery doit se lancer dès que la page est lue. Pour cela, nous allons utiliser le code suivant :

Code:

jQuery().ready(function(){

});

Ensuite, on veut que toutes nos div « bloc texte » soient cachées. Voici comment on écrit ça dans le code :

Code:

$(".bloc_texte").hide();

Essayons d’interpréter un peu :
$(".bloc_texte") = on prend toutes les balises qui ont pour nom de classe « bloc_texte »

.hide() = on leur applique la fonction de la bibliothèque jQuery « hide » qui veut dire cacher

Là, si vous visualiser votre page, tout est masquer, sauf vos titres. Or, nous on veut qu’un onglet soit visible par défaut. On va donc lui dire que l’on veut que la balise ayant l’id « 1 » soit montré. Donc, tout simplement :

Code:

$("#1").show();

Si vous regardez votre page, tout est caché sauf la div que vous avez appelée « id=1 »

L’idée de ce script est que, quand je passe sur un de mes titres ou si je clique dessus, je vois le texte que contient sa div. Donc on va devoir dire que : quand je clique sur un titre qui s’appelle «class=titre », la div qu’il contient s’affiche (soit visible). Pour cela, on va utiliser la fonction jQuery mouseover. Le code se présentera donc ainsi :

Code:

$(".titre").mouseover(function(){
$(this).next("div").show();
});

Ici, ça fonctionne impec’ sauf que, une fois qu’on passe notre souris sur toutes les div’, elles restent visible. Or, nous voulons n’en avoir qu’une seule à la fois. Il va donc falloir indiquer une condition :
=> Si la div qui correspond au titre sur lequel (= $(this) ) ma souris passe est caché…

Code:

$(".titre").mouseover(function(){
if($(this).next("div").is(":hidden")){

}
});

=>… Alors, je cache tous les onglets (donc les div après les titres) qui sont visible…

Code:

$(".titre").next("div:visible").hide();

=>… Et j’affiche (je montre) mon onglet

Code:

$(this).next("div").show();

Donc si on se résume, nous avons cette condition :

Code:

$(".titre").mouseover(function(){
   if($(this).next("div").is(":hidden")){
      $(".titre").next("div:visible").hide();
      $(this).next("div").show();
   }
});

Et voilà, vous avez fini votre script Very Happy

Ce n’est pas si terrible hein Wink

Voici le script en entier

Code:

jQuery().ready(function(){
$(".bloc_texte").hide();
$("#1").show();
$(".titre").mouseover(function(){
   if($(this).next("div").is(":hidden")){
      $(".titre").next("div:visible").hide();
      $(this).next("div").show();
   }
});
});

4/ On travaille la mise en page

Maintenant, on va s’attaquer un peu au CSS non ? Smile

Une fois encore, 2 cas de figures :

* Soit vous avez votre propre ftp et dans ce cas, vous créez un fichier style.css que vous importez de cette façon :

Code:

* Soit vous ne possédez pas de ftp, dans ce cas, vous allez devoir indiquer votre code css entre les balise « head » de cette façon

Code:

Vous allez voir, on va juste faire une mise en page rapide.

Tout d’abord, on veut que la page faire comme un effet d’onglet. On va donc les aligner à gauche. Pour cela, on applique un float left aux span et on ajoute un petit espace entre chacun d’eux grâce aux padding

Code:

span{
float:left;
padding:12px;
}

Ensuite, nous allons correctement placé nos div qui contiennent le texte. Pour cela, nous allons leur donner une position absolue (position:absolute) et la placé par rapport au coin haut (top) gauche (left). On lui ajoute une largeur (width) ainsi qu’une hauteur (height). Bossons un peu l’esthétique (juste un peu) en lui donnant une couleur de fond (background-color) et une bordure (border). Ce qui nous donne :

Code:

.bloc_texte{
position:absolute;
left:12px;
top:60px;
width :400px;
height:400px;
background-color:#999999;
border:1px solid black;
}

Enfin, on travaille un peu la mise en page des titres en leur donnant une taille correcte (font-size), une couleur (color), en ajoutant une couleur de fond (background-color). Et pour éviter que le texte ne soit trop collé au bord du cadre, on ajoute un peu de remplissage (padding). De ce fait, on a ceci :

Code:

.titre{
font-size:14px;
background-color:#CC6666;
color:#663333;
padding:4px;
}

Pour finir, pour montrer que nos titres apportent une modification au contenu de la page, on va transformer le curseur (cursor) en petite main (pointer) quand la souris est sur celui-ci (hover). Ce qui donne :

Code:

.titre:hover{
cursor:pointer;
}

Et voilà, votre CSS est terminé.

Code:

span{
float:left;
padding:12px;
}

.bloc_texte{
position:absolute;
left:12px;
top:60px;
width :400px;
height:400px;
background-color:#999999;
border:1px solid black;
}

.titre{
font-size:14px;
background-color:#CC6666;
color:#663333;
padding:4px;
}

.titre:hover{
cursor:pointer;
}

Voici donc le code complet de la page :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Faire un tableau avec onglet</title>

<style type="text/css">

span{
float:left;
padding:12px;
}

.bloc_texte{
position:absolute;
left:12px;
top:60px;
width :400px;
height:400px;
background-color:#999999;
border:1px solid black;
}

.titre{
font-size:14px;
background-color:#CC6666;
color:#663333;
padding:4px;
}

.titre:hover{
cursor:pointer;
}

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">

</script>

</head>

<body>

<span><h1 class="titre">Mon titre 1</h1><div class="bloc_texte" id="1">Mon texte du bloc 1</div></span>
<span><h1 class="titre">Mon titre 2</h1><div class="bloc_texte">Mon texte du bloc 2</div></span>
<span><h1 class="titre">Mon titre 3</h1><div class="bloc_texte">Mon texte du bloc 3</div></span>
<span><h1 class="titre">Mon titre 4</h1><div class="bloc_texte">Mon texte du bloc 4</div></span>

</body>
</html>

Si vous avez des questions ou si vous bloquez quelque part, n’hésitez pas Wink

[Si vous avez un soucis, n'hésitez pas à venir poser vos questions par ici]