« Programmation JavaScript/Programmer en deux minutes/Tout un site web dans un seul document » : différence entre les versions

Contenu supprimé Contenu ajouté
Al Maghi (discussion | contributions)
Al Maghi (discussion | contributions)
Ligne 74 :
== Avec la librairie d'instructions jQuery ==
 
Nous allons créer un site dans la division d'id galerie. Elle contient trois divisions dont deux boutons (<code>div#next</code> et <code>div#previous</code>) et une très longuelarge division (<code>div#slide {width:10000px;}</code>) contenant les pages et que l'onà faitfaire défiler de gauche à droite.
 
;CSS :
Ligne 102 :
;Javacript :
:$ 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 slider().
 
slider("#galerie") modifie les styles de #slide, #next et #previous.
 
<source lang=javascript>
$(document).ready(function() {
$ = new slider("#galerie");
Ligne 111 ⟶ 113 :
var self=this;
this.div = $(id);
this.largeurDiv saut= this.div.width();
 
this.largeur=0;
this.next=this.div.find('#next');
this.prev=this.div.find('#previous');
this.prev.hide(); // Cache le bouton previous en attendant que l'utilisateur clique sur next.
 
this.largeurDesPages=0; // Largeur totale des div.page contenues dans #slide
this.slide=this.div.find('#slide');
this.slide.find('.page').each(function(){
self.largeurlargeurDesPages+=$(this).width();
});
this.next=this.div.find('#next');
this.prev=this.div.find('#previous');
this.prev.hide();
 
this.sautnbSaut=Math.ceil(this.largeurDivlargeurDesPages/this.saut - 1);
this.nbSaut=Math.ceil(this.largeur/this.saut-1);
this.courant=0;
this.courant=0; // Le numéro de la page courante.
this.next.click(function(){
Ligne 160 ⟶ 162 :
}
});
alert("largeur totale des pages : "+this.largeurlargeurDesPages+"px\n"
+"largeurDiv : "+this.largeurDiv+"px\n"
+"saut : "+this.saut+"px\n"
+"nbSaut: "+this.nbSaut
);
}
 
 
</source>