Bootstrap - wtyczka alertów

Komunikaty alarmowe są najczęściej używane do wyświetlania użytkownikom końcowym informacji, takich jak komunikaty ostrzegawcze lub potwierdzające. Korzystając z wtyczki komunikatów ostrzegawczych, możesz dodać funkcję odrzucania do wszystkich komunikatów ostrzegawczych.

Jeśli chcesz dołączyć tę funkcję wtyczki indywidualnie, będziesz potrzebować rozszerzenia alert.js. W przeciwnym razie, jak wspomniano w rozdziale Przegląd wtyczek Bootstrap , możesz dołączyć plik bootstrap.js lub zminimalizowany plik bootstrap.min.js .

Stosowanie

Możesz włączyć odrzucenie alertu na dwa sposoby:

• Via data attributes - Aby odrzucić za pomocą Data API, po prostu dodaj data-dismiss = "alert" do przycisku zamknięcia, aby automatycznie włączyć funkcję zamknięcia ostrzeżenia.

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

• Via JavaScript - Aby odrzucić za pomocą JavaScript, użyj następującej składni -

$(".alert").alert()

Przykład

Poniższy przykład demonstruje użycie wtyczki alertów poprzez atrybuty danych.

<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>

Opcje

Nie ma tutaj opcji.

Metody

Oto kilka przydatnych metod dla wtyczki alertów -

$('#identifier').alert();

$('#identifier').alert('close');

Aby włączyć animację alertów po zamknięciu, upewnij się, że mają rozszerzenie .fade i .in klasa została już do nich zastosowana.

Przykład

Poniższy przykład demonstruje użycie .alert() metoda -

<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>

Poniższy przykład demonstruje użycie .alert('close') metoda -

<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>

Wypróbuj ten kod przy użyciu Try itredaktor. Możesz zobaczyć, że funkcja close jest stosowana do wszystkich komunikatów ostrzegawczych, tj. Zamknij każdy komunikat ostrzegawczy, pozostałe komunikaty również zostaną zamknięte.

Wydarzenia

Poniższa tabela zawiera listę zdarzeń do pracy z wtyczką alertów. To zdarzenie może zostać użyte do połączenia się z funkcją alertu.

$('#myalert').bind('close.bs.alert', function () {
   // do something
})

$('#myalert').bind('closed.bs.alert', function () {
   // do something
})

Przykład

Poniższy przykład ilustruje zdarzenia wtyczki alertów -

<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>