Afficher la pageAnciennes révisionsLiens de retourExporter en PDFHaut de page Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur. [[web:accueilweb|{{ :iconemaison.jpg?nolink&25|Sommaire Web}}]] ===== jQuery - Afficher et cacher des images ===== [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> === 1.1 Comportement attendu === {{ :web:jquery:voletonoff.png?nolink |}} === 1.2 Démarche proposée === - Charger les images à l'ouverture du navigateur. (volet.html) - Les cacher avec du code CSS. (volet.css) - Faire apparaître ou disparaître l'image du volet avec du code jQuery. (volet.js) \\ ==== 2. Conception ==== <callout type="warning" title="Téléchargement" color="blue" icon="true"><html><a href="https://webge.fr/doc/projets/tsin/0_Fiches guide TSIN/TSIN_FG5_Code_Animation_Volet.zip"><b>Télécharger</b></a></html> le dossier **Animation_Volet** et l'ouvrir dans VSCode.</callout> === 2.1 Codage du fichier volet.html === {{ :web:jquery:vscode_animation_volet.png?nolink&220|}} 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. <callout type="default" title="Comportement attendu" icon="true">Les images (non redimensionnées) apparaissent l'une à côté de l'autre. Les boutons-poussoirs sont placés en dessous.</callout> \\ === 2.2 Codage du fichier volet.css === * Ce fichier est utilisé pour : * dimensionner le 'conteneur' et les images, * positionner les images dans le conteneur. * Compléter le fichier //volet.css// comme ci-dessous. <code css *.css> #conteneur { width: 220px; height: 260px; background-color: yellow; } #fenetre { width: 203px; height: 252px; } #volet100 { width: 203px; height: 252px; } </code> <callout type="default" title="Comportement attendu" icon="true">Les images sont redimensionnées. Le volet est placé sous la fenêtre.</callout> * Compléter les règles CSS avec le code ci-dessous. <code CSS *.css> #fenetre { position: absolute; top: 10px; left: 10px; ... } #volet100 { position: absolute; top: 10px; left: 10px; ... } </code> <callout type="default" title="Comportement attendu" icon="true">Le volet se positionne sur la fenêtre.</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> \\ === 2.3 Codage du fichier volet.js === 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 *.js> // Fermeture du volet $("#fermer").click(function () { $("#volet100").show(); }); // Ouverture du volet $("#ouvrir").click(function () { $("#volet100").hide(); }); </code> <callout type="default" title="Comportement attendu" icon="true">Les boutons-poussoirs commandent la position du volet.</callout> ==== 3. Amélioration ==== Le réalisme de l'animation peut être amélioré en ajoutant d'autres images de position. //Exemple//. {{ :web:jquery:volet_autres_images.png?nolink |}} <callout type="warning" title="Téléchargement" color="blue" icon="true"><html><a href="https://webge.fr/doc/projets/tsin/0_Fiches guide TSIN/TSIN_FG5_autres_images_volet.zip"><b>Télécharger</b></a></html> les images permettant de représenter 25%, 50%, et 75% de l'ouverture du volet. Modifier le code des fichiers //volet.html//, //volet.css// et //volet.js//.</callout> web/jquery/volet.txt Dernière modification : 2024/03/28 20:05de phil