Différences

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

--- web:jquery:volet [2024/03/28 07:50] – [2.2 Codage du fichier volet.css] phil
+++ web:jquery:volet [2025/06/19 19:29] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 5: / Ligne 5: @@
 [Mise à jour le 28/3/2024]
+\\
+=== Prérequis ===
+Base de HTML, de CSS et de JavaScript (jQuery).
+\\
 ==== 1. Présentation ====
 <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 ===
 {{ :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".
   * 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 ===
   * Ce fichier est utilisé pour :
-    * dimensionner le conteneur et les images,
+    * dimensionner le 'conteneur' et les images,
     * positionner les images dans le conteneur.
   * Compléter le fichier //volet.css// comme ci-dessous.
-<code *.css>
+<code css *.css>
 #conteneur {
    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>
-  * 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 {
   position: absolute;
   top: 10px;
   left: 10px;
-  width: 203px;
+    ...
-  height: 252px;
 }
@@ Ligne 74: / Ligne 74: @@
   position: absolute;
   top: 10px;
   left: 10px;
-  width: 203px;
+    ...
-  height: 252px;
 }
 </code>
@@ Ligne 82: / Ligne 81: @@
 <callout type="default" title="Comportement attendu" icon="true">Le volet se positionne sur la fenêtre.</callout>
-<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"><b>z-index</b></a></html> pour empiler (dépiler) des objets . </callout>
+  * 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>
-  * Ajouter **//display:none//** dans #volet100 pour faire disparaitre le volet.
 \\
 === 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.
-<code *.js>
+<code js *.js>
 // Fermeture du volet
-$("#Fermer").click(function () {
+$("#fermer").click(function () {
    $("#volet100").show();
 });
 // Ouverture du volet
-$("#Ouvrir").click(function () {
+$("#ouvrir").click(function () {
    $("#volet100").hide();
 });
@@ Ligne 106: / Ligne 112: @@
 ==== 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//.