Bootstrap 4: зачем нужен метод $('.alert').alert()

229
17 ноября 2018, 12:00

Приведённый пример (скопирован 1 в 1 из документации) состоит из одного лишь только HTML-кода. Alert прекрасно закрывается без единой строчки самостоятельно написанного JS-кода (пример на JSFiddle).

<div class="alert alert-warning alert-dismissible fade show" role="alert"> 
  <strong>Holy guacamole!</strong> You should check in on some of those fields below. 
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
    <span aria-hidden="true">&times;</span> 
  </button> 
</div> 
 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

Но тогда возникает вопрос: зачем же нужен метод $('.alert').alert()? В документации сказано:

Not necessary when using the data-api’s auto-initialization.

но я не понял, что это за data-api’s auto-initialization.

Answer 1

Бутстрап предусмотрел два способа использовать свои JS плагины:

  1. Написать скрипт с помощью методов и событий из документации Бутстрапа.
  2. Расставить атрибуты data, как указано в документации.

Во втором случае Бутстрап запустит всё сам, а данные, необходимые для инициализации и работы, возьмёт из data атрибутов. Именно это и подразумевает фраза, которую вы процитировали.

Вы можете выбрать, какой способ вам больше подходит, или объединить их: базовое поведение инициализировать через data атрибуты, а остальное запрограммировать скриптом.

Авто-инициализация не сработает, если HTML-блок добавляется скриптом после загрузки страницы. Тогда придётся запускать вручную, через $('.alert').alert(), например.

И, если нужно, авто-инициализацию можно отключить полностью

$(document).off('.data-api')

или для какого-нибудь конкретного плагина

$(document).off('.alert.data-api')
READ ALSO
Margin в % внутри flex-элемента
HTML

Margin в % внутри flex-элемента

Почему, когда элементу, который находится внутри flex-элемента, ставишь margin в % сам flex-элемент не расширяется, а если ставить margin в px, то flex-элемент...

 215
Плавное изменение цвета фона строки
HTML

Плавное изменение цвета фона строки

Подскажите пожалуйста, как плавно изменить цвет фона поднятой строки на дефолтный(погасить)? На данный момент она гаснет(через setTimeout()), но резковыглядит...

 249
Как реализовать LocalStorage?
jQuery

Как реализовать LocalStorage?

Как в нижеуказанном коде реализовать LocalStorage? Чтобы значения не обнулялись при обновлении страницыКод - jsfiddle

 257
Как получить $(this).text? [дубликат]
jQuery

Как получить $(this).text? [дубликат]

На данный вопрос уже ответили:

 209