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 19:47] – [2.2 Codage du fichier volet.css] phil | web:jquery:volet [2024/03/28 20:05] (Version actuelle) – [3. Amélioration] phil |
---|
| |
* 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; |
<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; | |
} | } |
| |
position: absolute; | position: absolute; |
top: 10px; | top: 10px; |
left: 10px; | left: 10px; |
width: 203px; | ... |
height: 252px; | |
} | } |
</code> | </code> |
| |
<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 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> | <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 disparaître le volet. | |
\\ | \\ |
| |
| |
* 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(); |
}); | }); |
| |
==== 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//. |