« Programmation JavaScript/Programmer en deux minutes/Tout un site web dans un seul document » : différence entre les versions
Contenu supprimé Contenu ajouté
Ligne 74 :
== Avec la librairie d'instructions jQuery ==
Nous allons créer un site dans la division d'id galerie.
La division #galerie contient trois divisions *deux boutons (<code>div#next</code> et <code>div#previous</code>) *une très large division (<code>div#slide {width:10000px;}</code>) contenant les pages à faire défiler de gauche à droite. ;CSS :
Ligne 80 ⟶ 85 :
<source lang=css>
div#galerie {height:700px;
position:relative; /* Ces divisions seront positionnées par rapport à ce parent. */
width:1000px;
margin:auto;
overflow:hidden; /* Ce qui dépasse sera caché. */}
div#next {right:0;}
div#previous {left:0;}
.defile {position:absolute;
top:40%; width: 40px; border:1px solid gray;z-index:5;
cursor:pointer;background:white;}
.defile:hover {color:gray; border:2px dotted gray;}
div#slide {position:relative; /* Les pages seront positionnées par rapport à ce parent. */
width:10000px; /* */
margin:40px 0em 0 0em;}
.page { float:left; /* On veut que les pages flottent à gauche par rapport à la division précédente. (elles s'alignent) */
padding:0 0em;
width:1000px;}
Ligne 103 ⟶ 109 :
:$ est l'objet jQuery. Le script exécute, lorsque le document est prêt c'est-à-dire que tout est chargé, une fonction créant l'objet <code>slider()</code>.
:<code>slider()</code> modifie les styles des divisions #slide, #next et #previous en utilisant les instructions jQuery <code>animate()</code>, <code>show()</code> et <code>hide()</code>.
::Exemple : <code>$(document)</code> est le document, <code>$("#divisionId")</code> est une division du document. Il y a alors plusieurs méthodes à ces objets :
::*e.g. <code>$("#divisionId").width()</code> <----- retourne la largeur de la division, en pixels.
::*e.g. <code>$("#divisionId").hide()</code> <----- attribut style="display:none" à la division.
::*e.g. <code>$(document).ready()</code> <------ s'éxecute lorsque le document est prêt.
| |||