Bootstrap - Plugin di avviso

I messaggi di avviso vengono utilizzati principalmente per visualizzare informazioni come messaggi di avviso o di conferma agli utenti finali. Utilizzando il plug-in dei messaggi di avviso è possibile aggiungere la funzionalità di eliminazione a tutti i messaggi di avviso.

Se desideri includere questa funzionalità di plug-in individualmente, avrai bisogno del alert.js. Altrimenti, come menzionato nel capitolo Panoramica dei plugin Bootstrap , puoi includere bootstrap.js o bootstrap.min.js minimizzato .

Utilizzo

Puoi abilitare l'eliminazione di un avviso nei due modi seguenti:

  • Via data attributes - Per ignorare tramite Data API basta aggiungere data-dismiss = "alert" al pulsante di chiusura per fornire automaticamente una funzionalità di chiusura dell'avviso.

<a class = "close" data-dismiss = "alert" href = "#" aria-hidden = "true">
   &times;
</a>

  • Via JavaScript - Per ignorare tramite JavaScript utilizzare la seguente sintassi -

$(".alert").alert()

Esempio

L'esempio seguente mostra l'uso del plug-in di avviso tramite attributi di dati.

<div class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">
      &times;
   </a>
   
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

Opzioni

Non ci sono opzioni qui.

Metodi

Di seguito sono riportati alcuni metodi utili per il plug-in di avviso:

Metodo Descrizione Esempio
.mettere in guardia() Questo metodo racchiude tutti gli avvisi con funzionalità di chiusura. 
$('#identifier').alert();

Close Method .alert ('close')

 Per abilitare la chiusura di tutti gli avvisi, aggiungi questo metodo. 
$('#identifier').alert('close');
Per abilitare l'animazione degli avvisi quando sono chiusi, assicurati che abbiano l'estensione .fade e .in classe già applicata a loro.

Esempio

Il seguente esempio dimostra l'uso di .alert() metodo -

<h3>Alert messages to demonstrate alert() method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

<script type = "text/javascript">
   $(function(){
      $(".close").click(function(){
         $("#myAlert").alert();
      });
   });  
</script>

Il seguente esempio dimostra l'uso di .alert('close') metodo -

<h3>Alert messages to demonstrate alert('close') method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</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>

Prova questo codice usando il Try iteditore. Puoi vedere che la funzionalità di chiusura viene applicata a tutti i messaggi di avviso, ad esempio chiudi qualsiasi messaggio di avviso, anche il resto dei messaggi di avviso viene chiuso.

Eventi

La tabella seguente elenca gli eventi su cui lavorare con il plug-in di avviso. Questo evento può essere utilizzato per collegarsi alla funzione di avviso.

Evento Descrizione Esempio
close.bs.alert Questo evento si attiva immediatamente quando viene chiamato il metodo di chiusura dell'istanza. 
$('#myalert').bind('close.bs.alert', function () {
   // do something
})
closed.bs.alert Questo evento viene generato quando l'avviso è stato chiuso (attenderà il completamento delle transizioni CSS). 
$('#myalert').bind('closed.bs.alert', function () {
   // do something
})

Esempio

L'esempio seguente mostra gli eventi del plug-in di avviso:

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</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>