web:jquery:volet

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
web:jquery:volet [2024/03/28 07:40] – philweb:jquery:volet [2024/03/28 20:05] (Version actuelle) – [3. Amélioration] phil
Ligne 5: Ligne 5:
 [Mise à jour le 28/3/2024] [Mise à jour le 28/3/2024]
  
 +\\
 +
 +=== Prérequis ===
 +Base de HTML, de CSS et de JavaScript (jQuery).
 +
 +\\
 ==== 1. Présentation ==== ==== 1. Présentation ====
 <callout type="info" title="Objectif" icon="true">Simuler la commande d'ouverture et de fermeture d'un volet roulant.</callout> <callout type="info" title="Objectif" icon="true">Simuler la commande d'ouverture et de fermeture d'un volet roulant.</callout>
Ligne 23: Ligne 29:
 === 2.1 Codage du fichier volet.html === === 2.1 Codage du fichier volet.html ===
 {{ :web:jquery:vscode_animation_volet.png?nolink&220|}} {{ :web:jquery:vscode_animation_volet.png?nolink&220|}}
-Afin de déplacer facilement les images sur la page, elles sont placées dans un conteneur réalisé avec une balise div.+Les images à afficher sont placées dans un 'conteneur' réalisé avec une balise div. Ceci facilitera le positionnement de l'ensemble fenêtre volet sur la page.
   * Placer les deux images dans la balise conteneur et les identifier par : id="fenetre et id="volet100".   * Placer les deux images dans la balise conteneur et les identifier par : id="fenetre et id="volet100".
   * Ajouter les deux boutons sous les images et les identifier par : id="fermer" et id="ouvrir.   * Ajouter les deux boutons sous les images et les identifier par : id="fermer" et id="ouvrir.
Ligne 31: Ligne 37:
 === 2.2 Codage du fichier volet.css === === 2.2 Codage du fichier volet.css ===
   * Ce fichier est utilisé pour :   * Ce fichier est utilisé pour :
-    * dimensionner le conteneur et les images,+    * dimensionner le 'conteneur' et les images,
     * positionner les images dans le conteneur.     * positionner les images dans le conteneur.
  
   * Compléter le fichier //volet.css// comme ci-dessous.   * Compléter le fichier //volet.css// comme ci-dessous.
-<code *.css>+<code css *.css>
 #conteneur { #conteneur {
    width: 220px;    width: 220px;
Ligne 55: Ligne 61:
 <callout type="default" title="Comportement attendu" icon="true">Les images sont redimensionnées. Le volet est placé sous la fenêtre.</callout> <callout type="default" title="Comportement attendu" icon="true">Les images sont redimensionnées. Le volet est placé sous la fenêtre.</callout>
  
-  * Complétez le fichier //volet.css// comme ci-dessous. +  * Compléter les règles CSS avec le code ci-dessous.
-<code *.css> +
-#conteneur { +
- width: 220px; +
- height: 260px; +
- background-color: yellow; +
-}+
  
 +<code CSS *.css>
 #fenetre { #fenetre {
   position: absolute;    position: absolute; 
   top: 10px;   top: 10px;
   left: 10px;   left: 10px;
-  width: 203px; +    ...
-  height: 252px;+
 } }
  
Ligne 74: Ligne 74:
   position: absolute;   position: absolute;
   top: 10px;   top: 10px;
-  left: 10px;  +  left: 10px; 
-  width: 203px; +    ... 
-  height: 252px;+
 } }
 </code> </code>
Ligne 82: Ligne 81:
 <callout type="default" title="Comportement attendu" icon="true">Le volet se positionne sur la fenêtre.</callout> <callout type="default" title="Comportement attendu" icon="true">Le volet se positionne sur la fenêtre.</callout>
  
-  * Ajouter **//display:none//** dans #volet100 pour faire disparaitre le volet. +  * Ajouter **//display:none;//** dans #volet100 pour faire disparaître le volet.  
 +<code CSS *.css> 
 +#volet100 { 
 +  ... 
 +display:none; 
 +} 
 +</code> 
 + 
 +<callout type="tip" title="Positionnement" icon="true">Des informations sur la propriété CSS **//position//** sont accessibles <html><a href="https://developer.mozilla.org/fr/docs/Web/CSS/position" target="_blank" title="mdn web docs"><b>ici</b></a></html>. Voir également <html><a href="https://developer.mozilla.org/fr/docs/Web/CSS/z-index" target="_blank" title="mdn web docs"><b>z-index</b></a></html> pour empiler (dépiler) des objets . </callout> 
 \\ \\
  
 === 2.3 Codage du fichier volet.js === === 2.3 Codage du fichier volet.js ===
-L'apparition et la disparition du volet est commandé par des évènements (clic de souris sur les boutons).+L'apparition et la disparition du volet sont commandées par des évènements (clic de souris sur les boutons).
  
   * Modifier le fichier //volet.js// comme ci-dessous.   * Modifier le fichier //volet.js// comme ci-dessous.
-<code *.js>+<code js *.js>
 // Fermeture du volet // Fermeture du volet
-$("#Fermer").click(function () {+$("#fermer").click(function () {
    $("#volet100").show();    $("#volet100").show();
 }); });
  
 // Ouverture du volet // Ouverture du volet
-$("#Ouvrir").click(function () {+$("#ouvrir").click(function () {
    $("#volet100").hide();    $("#volet100").hide();
 }); });
Ligne 102: Ligne 110:
  
 <callout type="default" title="Comportement attendu" icon="true">Les boutons-poussoirs commandent la position du volet.</callout> <callout type="default" title="Comportement attendu" icon="true">Les boutons-poussoirs commandent la position du volet.</callout>
- 
-<callout type="tip" title="Positionnement" icon="true">Des informations sur le positionnement son disponible <html><a href="https://developer.mozilla.org/fr/docs/Web/CSS/position" target="_blank"><b>ici</b></a></html>.</callout> 
  
 ==== 3. Amélioration ==== ==== 3. Amélioration ====
-Le réalisme de l'animation peut être amélioré en ajoutant d'autres positions du volet.+Le réalisme de l'animation peut être amélioré en ajoutant d'autres images de position.
  
 //Exemple//. //Exemple//.
  • web/jquery/volet.1711608058.txt.gz
  • Dernière modification : 2024/03/28 07:40
  • de phil