  Introduction à JQuery
[10 mn de lecture - paru le 11/8/2006 5:18:53 PM - Public : Débutant]
|
|
Auteur
Evènements
Comme nous l'avons vu brièvement précédemment, il est très facile d'ajouter un évènement à un ou plusieurs objets.
L'évènement que vous utiliserez le plus souvent, pour ainsi dire, tout le temps, est ready.
En effet, pour définir vos évènements, il faut les placer dans :
$(document).ready(function(){
});
la définition de l'évènement dans les exemples précédents n'était pas utilisable en l'état.
Pour qu'ils fonctionnent il faut les écrire comme ceci :
$(document).ready(function(){
$(".hideMe").click(function() {
$(this).fadeOut("slow");
});
});
Vous pouvez ainsi définir toutes les actions Javascript habituelles que je vous invite à regarder dans la documentation en ligne.
Mais JQuery apporte aussi des nouvelles actions pratique comme oneclick() ou onedblclick() ou encore toggle().
Celles-ci exécuteront votre fonction que lors de la première action. Si l'action est répétée (cliquer ou double cliquer sur l'objet désiré), celle-ci sera ignorée.
toggle(fonc1, fonc2) exécutera la première fonction lors du premier clique et la deuxième lors du deuxième clique.
Exemple :
<html>
<head>
<title>Un autre exemple</title>
<script type="text/javascript" src="jquery.js">
</script>
<script language="Javascript">
$(document).ready(function(){
$("div > p").background("#FF0000");
$("div > p").toggle(function() {
$(this).fadeTo("slow", 0.5);
},function() {
$(this).fadeTo("slow", 1);
});
});
</script>
</head>
<body>
<div>
<p>Mon 1er paragraphe ici.</p>
<p>Mon 2ème paragraphe ici.</p>
<p>Mon 3ème paragraphe ici.</p>
</div>
</body>
</html>
Tout d'abord nous mettons un background rouge à tous les paragraphes. Puis nous ajoutons l'action toggle toujours sur les paragraphes. Ceci va effectuer un gommage d'opacité de 50% lors du premier clique et la remettra à 100% lors du deuxième.
|
18 Visites
Mathieu SEGUIN
[10 mn de lecture - paru le 11/8/2006 5:07:59 PM - Public : Débutant]
[25 mn de lecture - paru le 11/8/2006 4:57:49 PM - Public : Débutant]