Partagez | 
 

 Faire un tableau avec onglet

Voir le sujet précédent Voir le sujet suivant Aller en bas 
avatar

Miettes

Doyenne

Bons Points (BP) : 154
MessageSujet: Faire un tableau avec onglet   Dim 22 Aoû - 16:15

Dernière édition par Miettes le Jeu 10 Mar - 14:33, édité 1 fois
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 Wink )

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:
 <script type="text/javascript" src="js/jquery.js"></script>

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

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:
 <script type="text/javascript" src="js/onglet.js"></script>

* 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:
 <script type="text/javascript">
<!--
Le script sera ici
-->
</script>

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:
 <link href="style.css" rel="stylesheet" media="screen" type="text/css" />

* 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:
 <style type="text/css">

Le code css

</style>

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">
<!--
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();
      }
   });   
});
-->
</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>




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].
avatar

Miettes

Doyenne

Bons Points (BP) : 154
MessageSujet: Re: Faire un tableau avec onglet   Dim 22 Juil - 14:53

Questions fréquentes



Utiliser ce système pour mon message d'accueil


Nous vous conseillons d'utiliser plutôt ces tutoriels :
-> pour ForumActif
-> pour Xooit

J'ai un problème avec les accents



Remplacez ça

Code:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

par ça

Code:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
 

Faire un tableau avec onglet

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [résolu]Programmer et afficher un Tableau au format swf avec eanim
» probleme pour faire un lien avec mes boutons
» Faire un tube avec photofiltre studio
» 00 "Faire un cube décoré, avec des images ou des photos"
» faire un coude avec un tube

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage-
Sauter vers:  
Espace Admin du site

©2008-2016 - School Of Progress - Toute reproduction totale ou partielle est interdite.
Design réalisé par Mewyn - Forum hébergé par forumactif.com

Les logos des SoPiens

Nos correspondants