No exercício anterior,
vimos como podemos aproveitar
os controles baseados em JavaScript fornecidos para
os componentes JavaScript do Bootstrap
para controlar o comportamento dos componentes.
Em particular, vimos o uso do carrossel e
como fomos capazes de introduzir
dois botões para controlar
o comportamento de ciclismo do carrossel.
Agora, eu não estou totalmente satisfeito com essa implementação.
Gostaria agora de recolher a coisa toda
em um único botão que pode
indicar o comportamento atual
do carrossel e também ser capaz de controlar o carrossel.
Então vamos ver como podemos alavancar
mais código jQuery,
a fim de conseguir isso, neste exercício.
Para conseguir isso, voltaremos ao código
em index.html, onde definimos os dois botões.
Eu vou agora remover esta div para
o grupo de botões porque nós vamos ter
apenas um único botão em vez de dois botões.
Então eu removi a div em torno dos dois botões.
Eu também vou apagar um dos botões,
porque nós vamos trabalhar com
apenas um único botão para este exercício.
Então deixe-me mudar o recuo.
Então, agora, este botão em particular que temos lá,
vou renomear este botão como CarouselButton.
Vamos começar com este botão sendo
um botão com o ícone de pausa.
Vamos virar o ícone
deste botão através do código JavaScript.
Então, como fazemos isso?
Dando uma olhada em nossa página web,
vamos agora ver que temos um único botão aqui,
que está atualmente indicando a pausa lá.
Agora, minha esperança no final deste exercício
é transformar este botão em
um único controle em que se eu clicar neste botão,
ele irá pausar o comportamento cíclico do carrossel,
e então simultaneamente transformar
este botão em um botão play, o
que significa que este ícone
será substituído com o ícone de reprodução.
Para que este único botão indique qual é
o estado atual
do comportamento cíclico do meu carrossel. Como é que fazemos isso?
Precisamos editar
o código JavaScript para conseguir isso.
Descendo para o código JavaScript
na parte inferior da página index.html.
Então aqui, nós tínhamos esse script que tínhamos
incluído anteriormente,
a fim de ativar os dois botões lá.
Vou editar este código
para fazer uso desse único botão que temos lá.
Então, vindo aqui,
eu vou remover
esta segunda parte porque nós
só temos um único botão agora aqui,
que é o botão carouselButton,
e sempre que isso for clicado,
você precisa fazer algo em resposta a isso.
Então, se o botão do carrossel é
clicado, então o que você faz?
Agora, felizmente, dependendo
se o botão é um botão Reproduzir ou um botão Pausar,
poderemos tomar as medidas apropriadas.
Mas como sabemos se
é um botão Reproduzir ou um botão Pausar?
Então é aqui que vamos fazer uso de
algum código jQuery, a fim de
identificar se este é um botão play ou um botão de pausa.
Para nos ajudar a identificar isso,
vamos entrar aqui e usar uma declaração if,
e lá dentro, vou testar
para ver se isto é um jogo ou um botão de pausa.
Então aqui eu digo,
carouselButton.Crianças vão.
Então o que significa que,
para este botão carrossel,
dentro de onde se há um elemento com a tag span,
então nós obviamente sabemos que em nosso botão carrossel,
nós tínhamos a tag span que
continha o ícone Font Awesome lá.
Então, para essa tag span,
vamos verificar hasClass.
Então vamos verificar este hasClass,
e então a classe que vamos
verificar é fa-pause.
Então, o que significa que,
se a tag span tem a classe fa-pause,
então sabemos que este botão está
atuando atualmente como o botão de pausa.
Então, obviamente, quando o botão é clicado,
o usuário está esperando que
o comportamento cíclico deve ser pausado.
Então é isso que identificamos aqui.
Então você vê agora que estamos escrevendo
algum código JavaScript mais avançado usando
a sintaxe jQuery, a fim de fazer isso funcionar corretamente.
Então, aqui dentro, o que preciso fazer?
Agora, o que significa que, se o botão
for atualmente um botão Pausa,
então, obviamente, quando o botão é clicado,
você deseja pausar o carrossel.
Então, além disso, queremos agora ser capazes de inverter
esse ícone de um ícone de pausa para um ícone de reprodução.
Então o que vamos fazer é,
vamos dizer logo ali depois disso,
vamos dizer $carouselButton.Children span,
e então vamos dizer, removeClass.
Então vamos remover a aula de pausa.
Então, repare como isso funciona.
Vamos remover a classe de pausa disso,
e então, vamos adicionar a PlayClass.
Dessa forma, o ícone do seu botão agora
será virado de um botão Pausa para um botão Reproduzir.
Então vamos remover o PauseClass.
Eu vou apenas copiar este código e,
em seguida, colá-lo bem
ali e, em seguida, fazer a edição para este código.
Mesma coisa, para o CarouselButton para as crianças span,
Eu vou em vez agora do removeClass,
Eu diria addClass, e depois fa-play.
Dessa forma, o que estamos fazendo é,
estamos girando esse botão de
um botão Pausa para um botão Reproduzir.
Além disso, estamos pausando
o comportamento de ciclismo do carrossel.
Agora, se este não for o caso, então,
ele deve ser um botão Play para que
o efeito oposto deve ser introduzido.
Então, eu vou simplesmente copiar este código
e, em seguida, fazer os outros testes para a
situação em que o botão é um PlayButton.
Então eu diria outra coisa, agora, obviamente,
eu não preciso disso se aqui, mas só para ter certeza duplamente,
eu vou colocar isso lá dentro.
Porque há apenas duas possibilidades,
ou é um botão Pausa ou um botão Play,
mas apenas para minha garantia,
eu vou colocar isso como um fa-play lá.
Agora lá dentro, vou mudar
isto de pausa para ciclo.
Porque a partir do exercício anterior,
você se lembra que se você quiser que
o comportamento de ciclismo para retomar,
você teria que definir a ação do carrossel para ser ciclo.
Então, da mesma forma, para as duas declarações restantes,
eu vou remover a PlayClass
e, em seguida, adicionar o PauseClass.
Então, observe como estamos usando um pouco de
código jQuery avançado para ser
capaz de alterar dinamicamente o ícone de botões
e, ao mesmo tempo,
induzir o comportamento de ciclismo apropriado em nosso carrossel.
Olhando para a nossa página web,
agora você vê que meu carrossel está pedalando,
e você vê que este botão é atualmente um botão Pausa.
Quando eu clico neste botão,
observe como ele muda de Pausar para um botão Reproduzir
lá e, simultaneamente,
meu comportamento de ciclismo do carrossel é pausado.
Então, neste ponto,
meu carrossel permanecerá pausado
naquele local até que eu clique no botão.
Então, agora, se eu clicar neste botão novamente,
observe a mudança do botão Reproduzir para um botão Pausa
e, em seguida, o comportamento de ciclismo
do carrossel será retomado no local.
Então, usando um único botão agora,
eu sou capaz de controlar
o comportamento do carrossel e também, simultaneamente,
exibir o estado atual do
comportamento de ciclismo do meu carrossel.
Se esse é um botão Pausa,
isso significa que meu carrossel está pedalando.
Se esse for um botão Reproduzir
, meu carrossel será pausado.
Então, para retomar,
terei que clicar no botão.
Então, esta é mais uma mudança adicional
que você pode fazer para o exercício.
Então agora, você vê como em nosso código
fizemos uso do método hasClass,
e também vimos o uso dos métodos
removeClass e addClass, métodos
jQuery que aplicamos
a fim de manipular o DOM para
refletir o comportamento como
pertinente neste caso particular.
Com isso, completamos este exercício.
É hora de você fazer um commit Git com
a mensagem mais Bootstrap e jQuery.