En el ejercicio anterior,
vimos cómo podemos aprovechar
los controles basados en JavaScript que se proporcionan para
los componentes de JavaScript de Bootstrap con el
fin de controlar el comportamiento de los componentes.
En particular, vimos el uso del carrusel y
cómo pudimos introducir
dos botones para controlar
el comportamiento ciclista del carrusel.
Ahora, no estoy completamente satisfecho con esa implementación.
Me gustaría ahora colapsar todo
en un solo botón que puede
indicar el comportamiento actual del
carrusel y también ser capaz de controlar el carrusel.
Así que vamos a ver cómo podemos aprovechar
más código jQuery
para lograr esto, en este ejercicio.
Para lograrlo, volveremos al código
en index.html donde definimos los dos botones.
Ahora voy a eliminar este div para
el grupo de botones porque vamos a tener
solo un botón en lugar de dos botones.
Así que he eliminado el div alrededor de los dos botones.
También voy a eliminar uno de los botones,
porque vamos a trabajar con
un solo botón para este ejercicio.
Así que déjame cambiar la sangría.
Así que ahora, este botón en particular que tenemos allí,
voy a cambiar el nombre de este botón como CarouselButton.
Comenzaremos con este botón siendo
un botón con el icono de pausa.
Vamos a voltear el icono de
este botón a través del código JavaScript.
Entonces, ¿cómo hacemos eso?
Echando un vistazo a nuestra página web,
ahora veremos que tenemos un solo botón aquí,
que actualmente indica la pausa allí.
Ahora, mi esperanza al final de este ejercicio
es convertir este botón en
un solo control por el cual si hago clic en este botón,
se detendrá el comportamiento cíclico del carrusel,
y luego simultáneamente convertir
este botón en un botón de reproducción,
lo que significa que este icono
será reemplazado con el icono de reproducción.
Así que este solo botón indica cuál es
el estado actual
del comportamiento cíclico de mi carrusel. ¿Cómo hacemos eso?
Tenemos que ir y editar
el código JavaScript para lograrlo.
Bajando al código JavaScript
en la parte inferior de la página index.html.
Así que aquí, teníamos este script que habíamos
incluido anteriormente
para activar los dos botones allí.
Voy a editar este código
para hacer uso de ese solo botón que tenemos allí.
Así que al bajar aquí,
voy a eliminar
esta segunda parte porque
solo tenemos un solo botón aquí,
que es el CarouselButton,
y siempre que se haga clic en
eso, necesitas hacer algo en respuesta a hacerlo.
Entonces, si se
hace clic en el botón del carrusel, ¿qué haces?
Ahora, afortunadamente, dependiendo de
si el botón es un botón Reproducir o un botón de Pausa,
podremos realizar una acción apropiada.
Pero, ¿cómo sabemos si
es un botón de reproducción o un botón de pausa?
Así que aquí es donde vamos a hacer uso de
algún código jQuery para
identificar si se trata de un botón de reproducción o un botón de pausa.
Para ayudarnos a identificar esto,
vamos a entrar aquí y luego usar una declaración if,
y dentro de allí, voy
a probar para ver si se trata de un botón de reproducción o pausa.
Así que aquí digo,
CarouselButton.Niños span.
Lo que significa que,
para este botón de carrusel,
dentro de donde si hay un elemento con la etiqueta span,
por lo que obviamente sabemos que en nuestro botón de carrusel,
teníamos la etiqueta span que
contenía el icono Font Awesome allí.
Entonces, para esa etiqueta span,
vamos a verificar HasClass.
Así que vamos a comprobar esta HasClass,
y luego la clase que vamos a
comprobar es fa-pausa.
Entonces, lo que significa que,
si la etiqueta span tiene la clase fa-pausa,
entonces sabemos que este botón está
actuando actualmente como el botón de pausa.
Entonces, obviamente, cuando se hace clic en
el botón, el usuario espera que
el comportamiento cíclico se detenga.
Así que eso es lo que identificamos aquí.
Así que ahora ves que estamos escribiendo
un código JavaScript más avanzado usando
la sintaxis jQuery para hacer que esto funcione correctamente.
Así que aquí adentro, ¿qué tengo que hacer?
Ahora, lo que significa que si el botón
es actualmente un botón de Pausa,
entonces, obviamente, cuando se hace clic en el botón,
desea pausar el carrusel.
Entonces, además, queremos ahora poder voltear
ese icono de un icono de pausa a un icono de reproducción.
Así que lo que vamos a hacer es,
vamos a decir justo allí después de esto,
vamos a decir $CarouselButton.Children span,
y luego vamos a decir, RemoveClass.
Así que vamos a eliminar la clase de pausa.
Así que observe cómo funciona esto.
Vamos a eliminar la clase de pausa de eso,
y luego, vamos a añadir la PlayClass.
Así que de esa manera el icono de su botón ahora
va a ser volteado de un botón Pausa a un botón Reproducir.
Así que vamos a quitar la PauseClass.
Voy a copiar este código y
luego pegarlo
allí y luego hacer la edición de este código.
Lo mismo, para el carouselButton para el lapso de niños,
voy a hacerlo ahora en lugar del removeClass,
diría addClass, y luego fa-play.
Así que, lo que estamos haciendo es,
estamos volteando ese botón de
un botón Pausa a un botón Reproducir.
Además, estamos pausando
el comportamiento de ciclismo del carrusel.
Ahora, si este no es el caso entonces,
debería ser un botón de reproducción para que
se introduzca el efecto opuesto.
Luego, simplemente copiaré este código
y luego haré las otras pruebas para la situación en la
que el botón es un PlayButton.
Así que diría otra cosa, ahora obviamente,
no necesito esto si está aquí, pero solo para estar doblemente seguro,
voy a poner eso ahí.
Porque solo hay dos posibilidades,
ya sea un botón de pausa o un botón de reproducción,
pero solo para mi seguridad,
voy a poner eso como un fa-play allí.
Ahora dentro, voy a cambiar
esto de pausa a ciclo.
Porque desde el ejercicio anterior,
recuerda que si desea que
el comportamiento de ciclismo se reanude,
tendría que configurar la acción del carrusel para que sea ciclo.
Entonces, de manera similar, para las dos declaraciones restantes,
voy a eliminar PlayClass
y luego agregar la PauseClass.
Así que observe cómo estamos usando un poco de
código jQuery avanzado
para poder cambiar dinámicamente el icono de los botones,
y al mismo tiempo,
inducir el comportamiento de ciclismo apropiado en nuestro carrusel.
Echando un vistazo a nuestra página web,
ahora ves que mi carrusel está en bicicleta,
y ves que este botón es actualmente un botón de pausa.
Cuando hago clic en este botón,
observe cómo cambia de Pausa a un botón Reproducir allí,
y luego simultáneamente,
mi comportamiento de ciclismo del carrusel se detiene.
Así que en este punto,
mi carrusel permanecerá en pausa en
esa ubicación hasta que haga clic en el botón.
Así que ahora, si vuelvo a hacer clic en este botón,
observe el cambio del botón Reproducir a un botón de Pausa,
y luego el comportamiento de ciclismo
del carrusel se reanudará en el acto.
Así que usando un solo botón ahora,
puedo controlar
el comportamiento del carrusel y también, simultáneamente,
mostrar el estado actual del
comportamiento de ciclismo de mi carrusel.
Si eso es un botón de pausa,
eso significa que mi carrusel está actualmente en bicicleta.
Si eso es un botón de reproducción,
entonces mi carrusel está en pausa.
Entonces, para reanudarlo,
tendré que hacer clic en el botón.
Entonces, este es un cambio adicional
que puede hacer al ejercicio.
Así que ahora, ves cómo en nuestro código
hicimos uso del método HasClass,
y también vimos el uso de
los métodos RemoveClass y AddClass,
métodos jQuery que aplicamos
para manipular el DOM para
reflejar el comportamiento como
pertinente en este caso particular.
Con esto, completamos este ejercicio.
Es hora de que hagas una confirmación de Git con
el mensaje más Bootstrap y jQuery.