Bootstrap -Обзор плагинов

Компоненты, рассмотренные в предыдущих статьях, являются только началом. Bootstrap поставляется в комплекте с 12 плагинами jQuery, которые расширяют возможности и могут добавлять больше взаимодействия на ваш сайт. Чтобы начать работу с плагинами JavaScript Bootstrap, вам не нужно быть продвинутым разработчиком JavaScript. Используя API Bootstrap Data, большинство плагинов можно запускать без написания одной строки кода.

Плагины Bootstrap могут быть включены на ваш сайт в двух формах -

• Индивидуально - использование отдельных файлов * .js Bootstrap. Некоторые плагины и компоненты CSS зависят от других плагинов. Если вы включаете плагины в отдельности, обязательно проверьте эти зависимости в документах.
• Или скомпилировано (все сразу) - Использование bootstrap.js или minified bootstrap.min.js. Не пытайтесь включить оба, так как bootstrap.js и bootstrap.min.js содержат все плагины в одном файле.

Все плагины зависят от jQuery. Поэтому jQuery должен быть включен перед файлами плагина. Проверьте bower.json, чтобы узнать, какие версии jQuery поддерживаются.

Атрибуты данных

• Все плагины Bootstrap доступны с помощью включенного API данных. Следовательно, вам не нужно включать одну строку JavaScript для вызова любой из функций плагина.
• В некоторых ситуациях может оказаться желательным отключить эту функциональность Data API. Если вам нужно отключить API данных, вы можете развязать атрибуты, добавив следующую строку JavaScript -

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

• Чтобы отключить определенный / единственный плагин, просто включите имя плагина в пространство имен вместе с пространством имен data-api, как это -

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

Программный API

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

$(".btn.danger").button("toggle").addClass("fat")

Все методы принимают необязательный объект опций, строку, предназначенную для определенного метода, или ничего (инициирующий плагин с поведением по умолчанию), как показано ниже -

// initialized with defaults
$("#myModal").modal()   
 
 // initialized with no keyboard                 
$("#myModal").modal({ keyboard: false }) 
 
// initializes and invokes show immediately
$("#myModal").modal('show')

Каждый плагин также предоставляет свой исходный конструктор в свойстве Constructor:$.fn.popover.Constructor. Если вы хотите получить конкретный экземпляр плагина, извлеките его непосредственно из элемента -

$('[rel = popover]').data('popover').

noConflict

Плагины Bootstrap иногда можно использовать с другими элементами пользовательского интерфейса. В этих обстоятельствах иногда могут возникать конфликты пространства имен. Чтобы преодолеть это используйте .noConflict в плагине, если вы хотите вернуть значение.

// return $.fn.button to previously assigned value
var bootstrapButton = $.fn.button.noConflict()
 
// give $().bootstrapBtn the Bootstrap functionality
$.fn.bootstrapBtn = bootstrapButton      

События

Bootstrap предоставляет настраиваемые события для большинства действий плагина. Как правило, эти события бывают двух форм:

• Инфинитивная форма - это срабатывает в начале события. Например, show. Инфинитивные события обеспечивают функцию preventDefault. Это обеспечивает возможность остановить выполнение действия до его запуска.

  $('#myModal').on('show.bs.modal', function (e) {
     // stops modal from being shown
     if (!data) return e.preventDefault()
  })
  

• Форма прошедшего причастия - это срабатывает по завершении действия. Например, shown.

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