Trabalhando com Eventos no Bootstrap

Trabalhando com Eventos no Bootstrap

: Rafael Marques        06 de Ago de 2018    (0)

Entenda como utilizar os eventos no Bootstrap e personalize ainda mais a sua aplicação através do Javascript


Fala Dev!

Hoje, vamos entender como podemos adicionar funções baseadas em eventos no Bootstrap. Para isso, é interessante que você saiba o mínimo de JS para facilitar seu aprendizado.

Primeiramente, os Eventos são gatilhos para os componentes Javascript do Bootstrap e atuam de forma a disparar funções ao executar ações de abertura ou fechamento de alguns destes componentes. Vamos exemplificar:

Temos o component ALERT que exibe uma div no formato do que se assemelha a uma mensagem do sistema, tendo as cores do framework para auxiliar na função da mensagem como por exemplo vermelho, comum para mensagens de erro e verde para sucesso.

O código padrão para a mensagem abaixo (exemplos dos tipos de alerts podem ser encontrados na documentação) seria algo como:

<div class="alert alert-primary" role="alert">Mensagem do sistema apresentada dentro de um ALERT
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>

Trabalhando com Eventos no Bootstrap

Para fazer uso do Javascript e ativar os eventos é muito simples, basta primeiramente adicionarmos um ID a nossa div para identifica-lo.

<div class="alert alert-primary" role="alert" id="meuAlerta">Mensagem do sistema apresentada dentro de um ALERT
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>

E a partir daí iremos criar um script utilizando Jquery que vai ser disparado por exemplo, a cada vez que esse alert for fechado pelo usuário.

Temos duas opções (no caso do alert) que são: close.bs.alert para disparar no momento em que invocamos o método close e closed.bs.alert no qual a única diferença é que ele aguarda os efeitos CSS finalizarem como transitions por exemplo.

Vamos dizer que eu quero exibir uma mensagem de texto informando que o usuário vai ser redirecionado em 3 segundos para uma outra página ou site, ficaria algo como:

<script>

// Invoca o Evento
$('#meuAlerta').on('closed.bs.alert', function () {

// Acrescenta o texto diretamente no elemento body do HTML
$('body').text('Você será redirecionado para o Google em 3 segundos');

//setTimeout com 3000 milisegundos (3 segundos)
setTimeout(function () {

//Executa o redirecionamento
window.location.href = 'https://www.google.com.br/';

}, 3000)
})
</script>

Código completo do exemplo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Eventos com Bootstrap</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="alert alert-primary" role="alert" id="meuAlerta">Mensagem do sistema apresentada dentro de um ALERT
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
$('#meuAlerta').on('closed.bs.alert', function () {
$('body').text('Você será redirecionado para o Google em 3 segundos');
setTimeout(function () {
window.location.href = 'https://www.google.com.br/';
}, 3000)
})
</script>
</body>
</html>

 

IMPORTANTE:

Os eventos não se restringem ao componente ALERT e podem ser aplicados por exemplo a um MODAL, CAROUSEL e inclusive ações baseadas em componentes com COLLAPSE ativando os gatilhos ao mudarem de estado. 

Caso você tenha gostado ou queira se aprofundar no assunto, comente aí em baixo. Posso inclusive fazer uma video aula mostrando passo a passo os eventos JS com o Bootstrap.

Um forte abraço!

  • Compartilhe esse post
  • Compartilhar no Facebook00
  • Compartilhar no Google Plus00
  • Compartilhar no Twitter

Entre para a Lista VIP

Acesse conteúdo EXCLUSIVO e NOVIDADES sobre os cursos em primeira mão!

Também Odiamos Spam!

Rafael Marques

Desenvolvedor Web há quase 10 anos e especialista em Opencart E-Commerce CMS. Trabalho com HTML5 / CSS3 / JS / PHP / MySql.

        
Enviando Comentário Fechar :/