Editions ENI Livres | Vidéos | e-Formations
Les interactions utilisateurs avec jQuery
Les évènements avec jQuery
Dans ce chapitre, nous allons expliquer comment gérer et répondre aux actions de l’utilisateur avec les méthodes et les concepts fournis par la bibliothèque jQuery.
1. Les fichiers exemples
Pour les besoins des exemples de ce chapitre, le fichier main.html est constitué du code suivant :
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="utf-8">
<title>Page WEB support</title>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<script type="text/javascript" src="scripts/jQuery-331.min.js">
</script>
</head>
<body>
<header>Bienvenue sur la page WEB support de cours - Chapitre 7
</header>
<nav>
<label>Accueil</label>
<label id="pageUne">Bouton un</label>
<label name="pageDeux">Bouton deux</label>
</nav>
<div class="articleContainer">
<article data-order="1">
<label>Article 1</label>
<p>
Lorem ipsum ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo
...Les effets et animations en jQuery
Nous allons voir comment agrémenter une page web d’effets et d’animations visuels à l’aide des méthodes proposées par la bibliothèque jQuery.
1. Les effets jQuery
Certaines méthodes offertes par la bibliothèque jQuery permettent de jouer directement sur les propriétés d’affichage des éléments retournés par le sélecteur sur lequel elles sont appliquées.
Voici une présentation détaillée des plus utilisées.
.hide()
Cette méthode permet de cacher un ou plusieurs éléments HTML de la page web.
Utilisée sans arguments, elle effectue sa tâche de manière instantanée, sans aucune animation.
Il est possible de lui passer en argument une valeur de type numérique lui indiquant le temps qu’elle doit passer pour réaliser son travail, en millisecondes.
Ainsi la ligne de code suivante provoque la disparition de l’article intitulé Article 3 de la page web avec une animation d’une durée de 2 secondes :
$('article:eq(2)').hide(2000); Deux chaînes de caractères sont interprétables par la méthode pour symboliser la durée d’exécution qu’elle doit respecter. Ce sont les mots slow et fast, qui représentent, pour le premier, une valeur de 600 millisecondes, et pour le second, une valeur de 200 millisecondes. Ainsi, cette ligne de code provoque la disparition de l’article en 600 millisecondes :
$('article:eq(2)').hide(slow); Il est possible d’appeler cette méthode avec deux paramètres optionnels supplémentaires.
Le premier consiste en une chaîne de caractères indiquant à la méthode l’algorithme de lissage de calcul à utiliser pour effectuer l’animation.
Lorsque ce paramètre est manquant, l’algorithme de lissage utilisé par défaut se nomme swing et correspond à une progression non linéaire de la valeur de visibilité entre 100 (pleinement visible) et 0 (complètement invisible). Les valeurs intermédiaires, échantillonnées tout au long de l’animation, changent moins rapidement au début et à la fin de l’animation. Pour le mode linear, seul autre mode...
