Компьютерапия

Bootstrap - Плагин Alert

Категория: Bootstrap 3
Просмотров: 2068

Сообщения оповещения в основном используются для отображения конечным пользователям информации, такой как предупреждения или подтверждения. Используя плагин предупреждающего сообщения, вы можете добавить функцию Alert ко всем сообщениям оповещения.

Содержание:

Если вы хотите включить эту функциональность плагина индивидуально, вам понадобится alert.js, после включения bootstrap.js или bootstrap.min.js.

Применение Alert

Вы можете включить Alert оповещения двумя способами:

  • Через атрибуты данных. Чтобы отклонить через API данных, просто добавьте data-reject = "alert" к кнопке закрытия, чтобы автоматически предоставлять функциональность предупреждения. 
        <a class = "close" data-dismiss = "alert" href = "#" aria-hidden = "true">
   ×
</a>
  • Через JavaScript. Для отклонения через JavaScript используйте следующий синтаксис: 
    $(".alert").alert()

Следующий пример демонстрирует использование плагина предупреждения через атрибуты данных.

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

Методы Alert

Ниже приведены некоторые полезные методы для плагина alert -

Метод Описание Пример
.alert ()Этот метод полностью закрывает все предупреждения.
$('#identifier').alert();
Close Method.alert('close')Чтобы включить все предупреждения, добавьте этот метод.
$('#identifier').alert('close');

Чтобы включить оповещения для анимирования при закрытии, убедитесь, что у них уже есть классы .fade и .in.

Следующий пример демонстрирует использование .alert() метод -

<h3>Alert messages to demonstrate alert() method </h3>
 
<div id = "myAlert1" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">×</a>
   <strong>Success!</strong> the result is successful.
</div>
 
<div id = "myAlert2" 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(){
         $("#myAlert1").alert();
         $("#myAlert2").alert();
      });
   }); 
</script>

Следующий пример демонстрирует использование метода .alert('close') -

<h3>Alert messages to demonstrate alert('close') method </h3>
 
<div id = "myAlert3" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">×</a>
   <strong>Success!</strong> the result is successful.
</div>
 
<div id = "myAlert4" 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(){
         $("#myAlert3").alert('close');
         $("#myAlert4").alert('close');
      });
   }); 
</script>

События Alert

В следующей таблице перечислены события для работы с плагином предупреждений. Это событие можно использовать для включения функции предупреждения.

Метод Описание Пример
close.bs.alertЭто событие срабатывает немедленно, когда вызывается метод close instance.
$('#myalert5').bind('close.bs.alert', function () {
   // do something
})
closed.bs.alertЭто событие запускается, когда предупреждение закрыто (будет ждать завершения CSS-переходов).
$('#myalert6').bind('closed.bs.alert', function () {
   // do something
})

Следующий пример демонстрирует события плагина предупреждения -

<div id = "myAlert7" 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(){
      $("#myAlert7").bind('closed.bs.alert', function () {
         alert("Alert message box is closed.");
      });
   });
</script>



Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

Новые статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok