Dans l'exercice précédent,
nous avons vu comment nous pouvons tirer parti des
contrôles basés sur JavaScript qui sont fournis pour
les composants JavaScript Bootstrap
afin de contrôler le comportement des composants.
En particulier, nous avons vu l'utilisation du carrousel et
comment nous avons pu introduire
deux boutons pour contrôler
le comportement cycliste du carrousel.
Maintenant, je ne suis pas entièrement satisfait de cette implémentation.
Je voudrais maintenant réduire le tout
en un seul bouton qui peut à la fois
indiquer le comportement actuel
du carrousel et être capable de contrôler le carrousel.
Voyons donc comment nous pouvons tirer parti
d'autres codes jQuery
pour y parvenir, dans cet exercice.
Pour y parvenir, nous allons revenir au code
dans index.html où nous avons défini les deux boutons.
Je vais maintenant supprimer cette div pour
le groupe de boutons parce que nous allons avoir
un seul bouton au lieu de deux boutons.
J' ai donc enlevé la div autour des deux boutons.
Je vais également supprimer un des boutons,
parce que nous allons travailler avec
un seul bouton pour cet exercice.
Laisse-moi changer l'indentation.
Donc maintenant, ce bouton particulier que nous avons là,
je vais renommer ce bouton comme CarouselButton.
Nous commencerons avec ce bouton étant
un bouton avec l'icône de pause.
Nous allons retourner l'icône de
ce bouton via le code JavaScript.
Alors comment on fait ça ? En
regardant notre page Web,
nous allons maintenant voir que nous avons un seul bouton ici,
qui indique actuellement la pause là-bas.
Maintenant, mon espoir à la fin de cet exercice
est de transformer ce bouton en
un seul contrôle par lequel si je clique sur ce bouton,
il mettra en pause le comportement cyclique du carrousel,
puis transformera simultanément
ce bouton en un bouton de lecture,
ce qui signifie que cette icône
sera remplacée avec l'icône de lecture.
Alors que ce bouton unique indique quel est
l'état actuel
du comportement cyclique de mon carrousel. Comment on fait ça ?
Nous devons aller et éditer
le code JavaScript pour y parvenir.
Aller au code JavaScript
en bas de la page index.html.
Donc, ici, nous avions ce script que nous avions
inclus plus tôt
afin d'activer les deux boutons là.
Je vais éditer ce code
pour utiliser ce bouton unique que nous avons là.
Donc, en descendant ici,
je vais supprimer
cette deuxième partie parce que nous
n'avons qu'un seul bouton ici,
qui est le CarouselButton,
et chaque fois que c'est cliqué,
vous devez faire quelque chose en réponse à cela.
Donc, si on
clique sur le bouton du carrousel, que faites-vous ?
Maintenant, heureusement,
selon que le bouton est un bouton Lecture ou Pause,
nous serons en mesure de prendre une action appropriée.
Mais comment savoir s'il s'
agit d'un bouton Play ou d'un bouton Pause ?
Donc, c'est là que nous allons utiliser du
code jQuery afin d'
identifier s'il s'agit d'un bouton de lecture ou d'un bouton de pause.
Pour nous aider à identifier cela,
nous allons aller à l'intérieur ici et ensuite utiliser une instruction if,
et à l'intérieur, je vais tester pour
voir s'il s'agit d'un bouton de lecture ou de pause.
Donc ici, je dis,
CarouselButton.Children span.
Donc, ce qui signifie que,
pour ce bouton de carrousel,
à l'intérieur où s'il y a un élément avec la balise span,
donc nous savons évidemment que dans notre bouton de carrousel,
nous avions la balise span qui
contenait l'icône Font Awesome là-bas.
Donc, pour cette balise span,
nous allons vérifier hasClass.
Donc, nous allons vérifier cette HasClass,
et puis la classe que nous allons
vérifier est fa-pause.
Donc, ce qui signifie que,
si la balise span a la classe fa-pause,
alors nous savons que ce bouton
agit actuellement comme le bouton pause.
Donc, évidemment, lorsque le bouton est cliqué,
l'utilisateur s'attend à ce que
le comportement cyclique soit mis en pause.
C' est ce que nous identifions ici.
Donc, vous voyez maintenant que nous
écrivons du code JavaScript plus avancé en utilisant
la syntaxe jQuery afin de faire ce travail correctement.
Donc à l'intérieur, alors qu'est-ce que je dois faire ?
Maintenant, ce qui signifie que si le bouton
est actuellement un bouton Pause,
alors, évidemment, quand on clique sur le bouton,
vous voulez mettre le carrousel en pause.
Ensuite, en plus, nous voulons maintenant pouvoir basculer
cette icône d'une icône de pause à une icône de lecture.
Donc, ce que nous allons faire est,
nous allons dire juste là après cela,
nous allons dire $carouselButton.Children span,
et puis nous allons dire, removeClass.
Donc, nous allons supprimer la classe pause.
Alors remarquez comment cela fonctionne.
Nous allons supprimer la classe pause de cela,
puis, nous allons ajouter la PlayClass.
Ainsi, l'icône de votre bouton
va maintenant être retournée d'un bouton Pause à un bouton Lecture.
Donc nous allons supprimer le PauseClass.
Je vais juste copier ce code
, puis le coller juste
là, puis faire l'édition de ce code.
Même chose, pour le CarouselButton pour la portée des enfants,
je vais à la place maintenant du RemoveClass,
je dirais addClass, puis fa-play.
Donc, ce que nous faisons, c'est
que nous retournons ce bouton d'
un bouton Pause à un bouton Lecture.
En outre, nous mettons en pause
le comportement cycliste du carrousel.
Maintenant, si ce n'est pas le cas alors,
ce devrait être un bouton Play afin que
l'effet inverse soit introduit.
Ensuite, je vais simplement copier ce code,
puis faire les autres tests pour la situation
où le bouton est un PlayButton.
Donc je dirais autre, maintenant évidemment,
je n'ai pas besoin de ça si c'est ici, mais juste pour être doublement sûr,
je vais mettre ça là-dedans.
Parce qu'il n'y a que deux possibilités,
soit c'est un bouton Pause ou un bouton Lecture,
mais juste pour me rassurer,
je vais mettre cela comme un fa-play là.
Maintenant à l'intérieur, je vais changer
ça de pause en cycle.
Parce que de l'exercice précédent,
vous vous souvenez que si vous voulez que
le comportement de cyclisme reprenne,
vous devrez définir l'action du carrousel pour être cycle.
Ensuite, de même, pour les deux instructions restantes,
je vais supprimer la PlayClass
, puis ajouter le PauseClass.
Donc, remarquez comment nous utilisons un peu de
code jQuery avancé pour être
en mesure de changer dynamiquement l'icône des boutons,
et en même temps,
induire le comportement de cyclisme approprié sur notre carrousel. En
regardant notre page web,
vous voyez maintenant que mon carrousel fait du vélo,
et vous voyez que ce bouton est actuellement un bouton Pause.
Lorsque je clique sur ce bouton,
remarquez comment il passe de Pause à un bouton Play là
, puis simultanément,
mon comportement cycliste du carrousel est suspendu.
Donc, à ce stade,
mon carrousel restera en pause à cet
endroit jusqu'à ce que je clique sur le bouton.
Donc maintenant, si je clique à nouveau sur ce bouton,
notez le changement du bouton Lecture à un bouton Pause,
puis le comportement de cyclisme
du carrousel reprendra sur place.
Donc, en utilisant un seul bouton maintenant,
je suis capable à la fois de contrôler
le comportement du carrousel et aussi simultanément,
d'afficher l'état actuel
du comportement cycliste de mon carrousel.
Si c'est un bouton Pause,
cela signifie que mon carrousel est en train de rouler.
Si c'est un bouton Play
, mon carrousel est mis en pause.
Donc, pour le reprendre,
je vais devoir cliquer sur le bouton.
Donc, c'est un changement supplémentaire
que vous pouvez faire à l'exercice.
Donc maintenant, vous voyez comment dans notre code nous
avons utilisé la méthode hasClass,
et nous avons également vu l'utilisation des méthodes
RemoveClass et AddClass, des méthodes
jQuery que nous avons appliquées
afin de manipuler le DOM pour
refléter le comportement comme
pertinent dans ce cas particulier.
Avec cela, nous terminons cet exercice.
Il est temps pour vous de faire un commit Git avec
le message plus Bootstrap et jQuery.