Учебники

Bootstrap — плагин оповещения

Октябрь 25, 2018

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

Если вы хотите включить эту функциональность плагина индивидуально, то вам понадобится alert.js . Иначе, как упоминалось в главе « Обзор плагинов Bootstrap» , вы можете включить bootstrap.js или минимизированный bootstrap.min.js .

использование

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

  • Через атрибуты данных. Чтобы закрыть через API данных, просто добавьте data-dismiss = «alert» к кнопке закрытия, чтобы автоматически активировать функцию закрытия предупреждения.

Через атрибуты данных. Чтобы закрыть через API данных, просто добавьте data-dismiss = «alert» к кнопке закрытия, чтобы автоматически активировать функцию закрытия предупреждения. 

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

  • С помощью JavaScript — чтобы отклонить с помощью JavaScript, используйте следующий синтаксис —

С помощью JavaScript — чтобы отклонить с помощью JavaScript, используйте следующий синтаксис — 

$(".alert").alert()

пример

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

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

Опции

Здесь нет вариантов.

методы

Ниже приведены некоторые полезные методы для плагина оповещений:

метод Описание пример
.alert () Этот метод оборачивает все предупреждения с близкой функциональностью. 
$('#identifier').alert();

Метод закрытия .alert (‘закрыть’)

Чтобы разрешить закрытие всех оповещений, добавьте этот метод. 
$('#identifier').alert('close');

Метод закрытия .alert (‘закрыть’)

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

пример

В следующем примере демонстрируется использование метода .alert () — 

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

В следующем примере демонстрируется использование метода .alert (‘close’) — 

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

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

События

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

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

пример

В следующем примере демонстрируются события плагина оповещений —

40
Share: