Bootstrap - Plugin de Alerta
As mensagens de alerta são usadas principalmente para exibir informações como mensagens de aviso ou confirmação para os usuários finais. Usando o plugin de mensagem de alerta, você pode adicionar a funcionalidade de dispensar a todas as mensagens de alerta.
Se você deseja incluir esta funcionalidade de plug-in individualmente, você precisará do alert.js. Além disso, conforme mencionado no capítulo Visão geral dos plug-ins de bootstrap , você pode incluir bootstrap.js ou bootstrap.min.js minificado .
Uso
Você pode ativar a dispensa de um alerta das duas maneiras a seguir -
Via data attributes - Para dispensar via API de dados, basta adicionar data-dismiss = "alert" ao botão Fechar para fornecer automaticamente uma funcionalidade de alerta de fechamento.
<a class = "close" data-dismiss = "alert" href = "#" aria-hidden = "true">
×
</a>
Via JavaScript - Para dispensar via JavaScript, use a seguinte sintaxe -
$(".alert").alert()
Exemplo
O exemplo a seguir demonstra o uso do plugin de alerta por meio de atributos de dados.
<div class = "alert alert-success">
<a href = "#" class = "close" data-dismiss = "alert">
×
</a>
<strong>Warning!</strong> There was a problem with your network connection.
</div>
Opções
Não há opções aqui.
Métodos
A seguir estão alguns métodos úteis para o plugin de alerta -
Método | Descrição | Exemplo |
---|---|---|
.alerta() | Este método envolve todos os alertas com funcionalidade de fechamento. | |
Close Method .alert ('fechar') |
Para permitir que todos os alertas sejam fechados, adicione este método. | |
Para permitir que os alertas sejam animados quando fechados, verifique se eles têm o .fade e .in aula já aplicada a eles.
Exemplo
O exemplo a seguir demonstra o uso de .alert() método -
<h3>Alert messages to demonstrate alert() method </h3>
<div id = "myAlert" class = "alert alert-success">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Success!</strong> the result is successful.
</div>
<div id = "myAlert" class = "alert alert-warning">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Warning!</strong> There was a problem with your network connection.
</div>
<script type = "text/javascript">
$(function(){
$(".close").click(function(){
$("#myAlert").alert();
});
});
</script>
O exemplo a seguir demonstra o uso de .alert('close') método -
<h3>Alert messages to demonstrate alert('close') method </h3>
<div id = "myAlert" class = "alert alert-success">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Success!</strong> the result is successful.
</div>
<div id = "myAlert" class = "alert alert-warning">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Warning!</strong> There was a problem with your network connection.
</div>
<script type = "text/javascript">
$(function(){
$(".close").click(function(){
$("#myAlert").alert('close');
});
});
</script>
Tente este código usando o Try iteditor. Você pode ver que a funcionalidade de fechamento é aplicada a todas as mensagens de alerta, ou seja, feche qualquer mensagem de alerta, o restante das mensagens de alerta também será fechado.
Eventos
A tabela a seguir lista os eventos para trabalhar com o plugin de alerta. Este evento pode ser usado para conectar-se à função de alerta.
Evento | Descrição | Exemplo |
---|---|---|
close.bs.alert | Este evento é disparado imediatamente quando o método de instância close é chamado. | |
closed.bs.alert | Este evento é disparado quando o alerta é fechado (irá aguardar a conclusão das transições CSS). | |
Exemplo
O exemplo a seguir demonstra os eventos do plugin de alerta -
<div id = "myAlert" class = "alert alert-success">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Success!</strong> the result is successful.
</div>
<script type = "text/javascript">
$(function(){
$("#myAlert").bind('closed.bs.alert', function () {
alert("Alert message box is closed.");
});
});
</script>