JavaScript
Bootstrap включает в себя некоторый JavaScript, чтобы помочь воплотить некоторые из наших компонентов в жизнь. Подробнее о том, как его включить, наших данных и программных параметрах API, и многом другом.
Содержание
- Содержание
- Индивидуальный или составленный
- Зависимости
- Атрибуты данных
- Программный API
- Нет конфликта
- События
- Номера версий
- Нет специальных резервных копий, когда JavaScript отключен
- Переходы
Индивидуальный или составленный
Плагины могут быть включены отдельно (используя индивидуальные *.js
файлы Bootstrap) или все сразу с помощью bootstrap.js
или минифицированного bootstrap.min.js
(не включая оба).
Зависимости
Некоторые плагины и компоненты CSS зависят от других плагинов. Если вы включаете плагины по отдельности, не забудьте проверить эти зависимости в документах. Также обратите внимание, что все плагины зависят от jQuery (это означает, что jQuery должен быть включен перед файлами плагина). Обратитесь к нашему bower.json
чтобы узнать, какие версии jQuery поддерживаются.
Атрибуты данных
Почти все плагины Bootstrap могут быть включены и настроены с помощью HTML только с атрибутами данных (наш предпочтительный способ использования функциональности JavaScript). Убедитесь, что вы используете только один набор атрибутов данных в одном элементе (например, вы не можете вызывать всплывающую подсказку и модальную кнопку с той же кнопки).)
Однако в некоторых ситуациях может быть желательно отключить эту функцию. Чтобы отключить API-атрибут данных, отмените привязку всех событий в именах документов, помеченных как data-api
следующим образом:
$(document).off('.data-api')
В качестве альтернативы, чтобы настроить таргетинг на определенный плагин, просто включите имя плагина в качестве пространства имен вместе с пространством имен data-api следующим образом:
$(document).off('.alert.data-api')
Программный API
Мы также полагаем, что у вас должна быть возможность использовать все плагины Bootstrap исключительно через JavaScript API. Все общедоступные интерфейсы API являются едиными, цепочечными методами и возвращают коллекцию, на которую действуют.
$('.btn.danger').button('toggle').addClass('fat')
Все методы должны принимать необязательный объект параметров, строку, которая нацелена на конкретный метод, или ничего (который инициирует плагин с поведением по умолчанию):
$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately
Каждый плагин также предоставляет свой исходный конструктор в свойстве Constructor
: $.fn.popover.Constructor
. Если вы хотите получить конкретный экземпляр плагина, извлеките его непосредственно из элемента: $('[rel="popover"]').data('popover')
.
Настройки по умолчанию
Вы можете изменить настройки по умолчанию для плагина, изменив объект Constructor.DEFAULTS
:
$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false
Нет конфликта
Иногда необходимо использовать плагины Bootstrap с другими инфраструктурами пользовательского интерфейса. В этих обстоятельствах могут возникать конфликты пространства имен. Если это произойдет, вы можете вызвать .noConflict
для плагина, для которого вы хотите вернуть значение.
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
События
Bootstrap предоставляет настраиваемые события для уникальных действий большинства плагинов. Как правило, они входят в форму инфинитива и прошлого причастия - где инфинитив (например, show
) запускается в начале события, а его причастная форма прошедшего времени (например, shown
) запускается по завершении действия.
Все инфинитивные события обеспечивают функциональность preventDefault()
. Это дает возможность остановить выполнение действия до его запуска.
$('#myModal').on('show.bs.modal', function (e) {
if (!data) return e.preventDefault() // stops modal from being shown
})
Номера версий
Версия каждого из плагинов jQuery Bootstrap может быть доступна через свойство VERSION
конструктора плагина. Например, для плагина подсказки:
$.fn.tooltip.Constructor.VERSION // => "4.0.0-alpha.6"
Нет специальных резервных копий, когда JavaScript отключен
<noscript>
чтобы объяснить ситуацию (и как повторно включить JavaScript) для ваших пользователей и/или добавить собственные резервные копии.
Сторонние библиотеки
Bootstrap официально не поддерживает сторонние библиотеки JavaScript, такие как Prototype или jQuery UI. Несмотря на события .noConflict
и события с именами, могут возникать проблемы совместимости, которые необходимо исправить самостоятельно.
Переходы
Для простых эффектов перехода включите transition.js
один раз рядом с другими файлами JS. Если вы используете скомпилированный (или сокращенный) bootstrap.js
, нет необходимости включать это - оно уже есть.
Transition.js - это базовый помощник для событий transitionEnd
а также эмулятор перехода CSS. Он используется другими плагинами, чтобы проверить поддержку перехода CSS и поймать висячие переходы.