Header
Partagez | 

Listes déroulantes et blocs changeants

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: Listes déroulantes et blocs changeants   Dim 3 Nov - 11:44

Dans ce tutoriel, nous allons voir comment avoir un contenu qui change en fonction d'un choix dans une liste déroulante. Pour que ce soit plus clair, voici un exemple :



Nous allons donc diviser cette explication en deux parties :
  • la partie html qui contiendra la liste déroulante ainsi que les contenus à afficher ;
  • la partie javascript qui gérera l'affichage du bon bloc en fonction du choix effectué

En revanche, nous ne nous attarderons pas ici sur la partie CSS.

C'est parti !


La liste déroulante en html


Ici, il y a 2 choses à faire :
  • la liste déroulante d'un côté,
  • les contenus de l'autre.


~~~ La liste déroulante :
En html, une liste déroulante est contenue dans un formulaire. On commence donc par ouvrir une balise "formulaire".
Code:

<form>
   <!-- Ma liste sera ici -->
</form>
Ensuite, on va commencer à créer la liste. Pour cela, nous allons utiliser la balise "select" à laquelle nous allons donné un nom (= name) qui nous sera utile pour récupérer la valeur choisie dans le js.
Code:

<form>
   <select name="selection">
      <!-- Mes choix seront ici -->
   </select>
</form>
Enfin, il nous reste à indiquer chaque option ou choix. Ici, il ne faut pas oublier d'indiquer pour chaque item une valeur (= value) qui nous servira dans le js. Pour plus de simpliciter de gestion, nous allons utilisé des nombres.
Et de mon coté, je vais afficher un bloc par défaut. Pour cela, je vais utiliser l'attribut "select" sur mon option.
Code:

<form>
   <select name="selection">
      <option value="0" select>Par défaut</option><!-- select = choix sélectionné par défaut -->
      <option value="1">Choix 1</option>
      <option value="2">Choix 2</option>
      <option value="3">Choix 3</option>
   </select>
</form>
Pour finir sur cette partie, il ne faut pas oublier d'appeler notre fonction javascript. Ici, elle va s'appliquer quand on changera notre choix. On va donc l'appeler sur un "onchange".
Code:

<form>
   <select name="selection" onchange="affich(this.form);">
      <option value="0" select>Par défaut</option><!-- select = choix sélectionné par défaut -->
      <option value="1">Choix 1</option>
      <option value="2">Choix 2</option>
      <option value="3">Choix 3</option>
   </select>
</form>
Idea affich = le nom de ma fonction ; this.form = le formulaire sur lequel je suis

~~~ Les contenus :
Pour cette partie, rien de plus simple ! On va créer autant de contenus que l'on a de choix (dans notre exemple, quatre). Chacun de ces contenus va être mis dans une div qui aura un id unique avec un numéro. Ce numéro correspond à la "value" du choix qui lui est associé. Par exemple, si pour mon bloc 1 que j'affiche en choisissant Choix 1, je vais lui donner le nom d'id contenu1.
En plus de cet id unique, on ajoute aussi pour chacun de ces blocs un display:none afin de ne pas l'afficher sauf pour mon bloc par défaut où, cette fois, je mettrai un display:block (souvenez-vous, c'est celui que l'on veut afficher par défaut)
Je vous montre l'exemple pour les deux blocs :
Code:

<div id="contenu0" style="display: block;"> <!-- mon bloc affiché par défaut -->
   <h1>Mon contenu de départ</h1>
   <p>Contenu de mon bloc afficher par défaut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam velit elit, malesuada nec sagittis at, lobortis vel elit. Donec quis lorem hendrerit odio vehicula hendrerit. Maecenas rhoncus est nec lacus pulvinar dictum. Nulla aliquam molestie iaculis. Ut hendrerit nisl a felis gravida accumsan. Ut molestie malesuada mollis. Suspendisse ullamcorper dignissim dapibus</p>
</div>
<div id="contenu1" style="display: none;">
   <h1>Mon contenu 1</h1>
   <p>Contenu de mon bloc 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam velit elit, malesuada nec sagittis at, lobortis vel elit. Donec quis lorem hendrerit odio vehicula hendrerit. Maecenas rhoncus est nec lacus pulvinar dictum. Nulla aliquam molestie iaculis. Ut hendrerit nisl a felis gravida accumsan. Ut molestie malesuada mollis. Suspendisse ullamcorper dignissim dapibus</p>
</div>
Arrow Le HTML final :
Code:

<form>
   <select name="selection" onchange="affich(this.form);">
      <option value="0" select>Par défaut</option><!-- select = choix sélectionné par défaut -->
      <option value="1">Choix 1</option>
      <option value="2">Choix 2</option>
      <option value="3">Choix 3</option>
   </select>
</form>

<!-- Mes contenus -->
<div id="contenu0" style="display: block;"> <!-- mon bloc affiché par défaut -->
   <h1>Mon contenu de départ</h1>
   <p>Contenu de mon bloc afficher par défaut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam velit elit, malesuada nec sagittis at, lobortis vel elit. Donec quis lorem hendrerit odio vehicula hendrerit. Maecenas rhoncus est nec lacus pulvinar dictum. Nulla aliquam molestie iaculis. Ut hendrerit nisl a felis gravida accumsan. Ut molestie malesuada mollis. Suspendisse ullamcorper dignissim dapibus</p>
</div>
<div id="contenu1" style="display: none;">
   <h1>Mon contenu 1</h1>
   <p>Contenu de mon bloc 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam velit elit, malesuada nec sagittis at, lobortis vel elit. Donec quis lorem hendrerit odio vehicula hendrerit. Maecenas rhoncus est nec lacus pulvinar dictum. Nulla aliquam molestie iaculis. Ut hendrerit nisl a felis gravida accumsan. Ut molestie malesuada mollis. Suspendisse ullamcorper dignissim dapibus</p>
</div>
<div id="contenu2" style="display:none;">
   <h1>Mon contenu 2</h1>
   <p>Contenu de mon bloc 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam velit elit, malesuada nec sagittis at, lobortis vel elit. Donec quis lorem hendrerit odio vehicula hendrerit. Maecenas rhoncus est nec lacus pulvinar dictum. Nulla aliquam molestie iaculis. Ut hendrerit nisl a felis gravida accumsan. Ut molestie malesuada mollis. Suspendisse ullamcorper dignissim dapibus</p>
</div>
<div id="contenu3" style="display:none;">
   <h1>Mon contenu 3</h1>
   <p>Contenu de mon bloc 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam velit elit, malesuada nec sagittis at, lobortis vel elit. Donec quis lorem hendrerit odio vehicula hendrerit. Maecenas rhoncus est nec lacus pulvinar dictum. Nulla aliquam molestie iaculis. Ut hendrerit nisl a felis gravida accumsan. Ut molestie malesuada mollis. Suspendisse ullamcorper dignissim dapibus</p>
</div>

On dynamise le tout avec du JS


Entre nous, le plus gros du travail est fait ^^

Pour ceux que le js effraie, je tiens à vous préciser ici qu'il tient en 7 lignes de code :=): En plus, vous allez voir, il est super simple !

Avant de nous lancer dans le code, réfléchissons à ce que doit faire ce js :
Citation :
Quand je change de choix, il doit récupérer la valeur de ce que j'ai sélectionné, et, en fonction de ça, afficher le bloc correspondant.
Evidement, si je change de choix, il doit masquer l'ancien bloc et afficher le nouveau.
Bien ! Maintenant que nous avons ça, il ne nous reste plus qu'à le traduire en javascript. On commence tout en douceur Smile

Idea Dans ce tutoriel, on va jouer les "j'ai un poil dans la main et je le vis bien" en utilisant du jQuery afin d'avoir moins de choses à écrire. De ce fait, si vous utilisez ce code sur un site, n'oubliez pas d'appeler la bibliothèque jQuery :
Code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

~~~ Quand je change de choix :
C'est donc la déclaration de notre fonction.
Code:

function affich(LeForm){
   /* Ma fonction est ici */
}
Idea "LeForm" correspond à ce que nous avons déclaré plus haut dans le onchange. Dans notre exemple, c'est donc "this.form". Vous allez comprendre l'utilité juste après ^^

~~~ il doit récupérer la valeur de ce que j'ai sélectionné :
La fameuse "value". On va stocker cette information dans un variable "info_element". Une variable c'est une sorte de "boite mémoire".
Code:
var info_element = LeForm.selection.value;
Essayons de comprendre ce code.
= la "boite mémoire" dans laquelle je vais stocker la valeur
LeForm = l'information que l'on nous a donné lors de la déclation de la fonction (onchange="affich(this.form);"), c'est à dire "le formulaire sur lequel je me trouve".selection = le nom de ma liste déroulante
value = la valeur
Si on traduit le tout : je vais stocker dans "info_element", la valeur de la liste déroulante qui s'appelle "selection" et qui se trouve dans le formulaire sur lequel se trouve ma fonction.

~~~ en fonction de ça, afficher le bloc correspondant :
On a récupéré la valeur de notre choix. Il ne nous reste plus qu'à dire "[i]contenu + numéro du bloc choisi, affiche toi !
". Si on traduit en code, cela signifie que l'on va appliquer un "display:block" à ce bloc.
Code:

   $('#contenu'+info_element+'').css({display: 'block'});
~~~ il doit masquer l'ancien bloc :
Ah ! Ça se complique un peu (un tout petit peu ^^). Si on veut masquer l'ancien bloc, il faut stocker à un moment ou à un autre cette information. Nous allons donc avoir besoin d'une nouvelle variable Smile Il faut savoir qu'en javascript, une variable ne peut pas être utilisé si elle n'a pas été déclarée et initialisé au préalable. Nous allons donc le faire avant notre fonction
Code:
var lastChoice = 0;
Ici, on met l'ancien bloc à "0" au départ car, souvenez vous, par défaut c'est le bloc ayant la valeur 0 qui est affiché Smile
Retournons dans notre fonction.
On a donc affiché le bon bloc avec un display:block. Et bien sur le même principe, on va masquer l'ancien bloc avec un display:none sauf que cette fois, on va appliquer cette css sur "contenu + numéro du dernier bloc affiché".
Code:
$('#contenu'+lastChoice+'').css({display: 'none'});
Et pour finir, il faut dire à notre js : "maintenant, le dernier bloc affiché est celui que j'ai choisi"
Code:
lastChoice = info_element;
Arrow Le js final :
Code:

var lastChoice = 0; /* J'initialise la variable "ancien bloc" */
 
function affich(LeForm){
   var info_element = LeForm.selection.value; /* Je récupére la valeur de mon choix */
   
   $('#contenu'+info_element+'').css({display: 'block'}); /* J'affiche le bloc choisi */
   $('#contenu'+lastChoice+'').css({display: 'none'}); /* Je masque l'ancien bloc */

   lastChoice = info_element; /* Le bloc que j'ai choisi devient l'ancien bloc */

}



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].



Je soussignée, Miettes, accepte qu'un directeur reposte le tutoriel "Liste déroulante et blocs changeants" tel que je l'ai rédigé.
Revenir en haut Aller en bas
Listes déroulantes et blocs changeants
Page 1 sur 1
 Sujets similaires
-
» En panne d'inspiration ? | Listes De Pseudos Disponibles
» Scandale Des Epaves Roulantes : La Partie Visible De L'Iceberg !
» HD Tune : quelle est la santé de votre disque dur ?
» macroblocs et freezes bboxtv
» Simulateur de circuits logiques
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+