-
Bonjour. Je m'appelle Maciek et je suis
ingénieur chez Google Web Designer.
-
Voyons comment utiliser
-
le système d'événements
Google Web Designer.
-
À la fin de cette vidéo,
-
vous saurez configurer des gestionnaires
d'événements dans vos documents.
-
J'ai préparé un document simple contenant
-
une galerie carrousel
et un élément div bleu.
-
Pour ajouter des gestionnaires
d'événements à votre document,
-
vous devez accéder au panneau
"Événements" sur la droite.
-
Une liste des gestionnaires d'événements
-
installés s'affiche.
-
Ici, il n'y en a encore aucun.
-
La liste est vide.
-
S'il y en a beaucoup,
-
vous pouvez les trier et les filtrer.
-
Pour ajouter
des gestionnaires à la liste,
-
accédez à la boîte
de dialogue "Événements".
-
Il existe plusieurs méthodes
pour l'afficher.
-
Si vous savez déjà
quelle cible sélectionner,
-
vous pouvez faire
un clic droit sur un élément,
-
puis sélectionner "Ajouter un événement".
-
L'élément sélectionné
est défini comme cible.
-
On va plutôt désélectionner
cet élément et ouvrir
-
la boîte de dialogue "Événements"
à l'aide du signe "+" ici.
-
La boîte de dialogue s'ouvre
sans aucune préférence.
-
On va commencer
-
par sélectionner la cible.
-
C'est l'élément qui déclenche
le gestionnaire d'événements.
-
Pour cet exemple,
je vais choisir le carrousel.
-
Ensuite, il faut choisir un événement
-
qui déclenche notre gestionnaire.
-
Les événements tactiles et de souris
sont les plus fréquents.
-
Comme c'est un carrousel,
il accepte aussi des événements spéciaux.
-
Je vais sélectionner l'événement "click".
-
Ici, il faut choisir une action.
-
C'est l'action qui doit s'exécuter
en réponse à l'événement.
-
La plupart des événements
acceptent les styles CSS
-
et l'ajout d'actions personnalisées
dont on parlera dans une minute.
-
Si vos documents contiennent
d'autres éléments personnalisés,
-
vous pouvez peut-être sélectionner
davantage d'événements ici.
-
Pour cette démo,
je choisis "Définir les styles".
-
Il faut maintenant
sélectionner un destinataire.
-
C'est l'élément
dont on veut modifier le CSS.
-
Pour cette démo,
je choisis l'élément div bleu
-
et je lui attribue
quelques propriétés CSS.
-
Je définis une couleur d'arrière-plan
rouge pour l'élément div.
-
Vous pouvez sélectionner
des options de lissage de vitesse,
-
ajouter une durée, puis cliquer sur
-
"OK" pour enregistrer.
-
Voilà, on a ajouté un
gestionnaire d'événements au document.
-
On peut le prévisualiser
pour voir le résultat.
-
Lorsque je clique sur le carrousel,
l'élément div bleu
-
devient tout doucement rouge.
-
C'était facile.
-
Imaginons qu'on ait fait une erreur.
-
Si on veut modifier
le gestionnaire d'événements,
-
on ne doit pas en créer un tout nouveau.
-
On peut modifier le gestionnaire existant.
-
Si on double-clique dessus,
-
la boîte de dialogue "Événements"
s'ouvre en mode d'édition.
-
Accédons aux actions pour
sélectionner une action personnalisée.
-
Ici, on peut saisir
du code JavaScript valide.
-
On donne un nom de fonction au code.
-
Pour cette démo,
on crée un appel d'alerte.
-
Ça me convient.
-
On clique sur "OK" pour enregistrer.
-
Le gestionnaire d'événements
a été mis à jour
-
pour indiquer l'appel de ma fonction.
-
On va prévisualiser cela.
-
Lorsque je clique sur le carrousel,
-
l'instruction d'alerte s'affiche.
-
J'adore Google Web Designer !
-
C'est tout pour aujourd'hui.
-
Si vous avez des questions
-
sur les événements
ou sur Google Web Designer,
-
publiez-les dans les commentaires.
-
Merci.
