Некоторые языки программирования допускают изменения, но сопротивляются прогрессу. (Алан.Дж.Перлис)

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

FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
3 июля 2017
Bootstrap - Обзор плагинов
Рассмотренная в предыдущих главах оформления компонентов являются только началом. Bootstrap поставляется в комплекте с 12 плагинами JQuery, которые расширяют возможности и могут добавить больше взаимодействия на вашем сайте. Для того, чтобы начать работу с плагинами JavaScript в Bootstrap, не обязательно быть опытным разработчиком на JavaScript. Используя Bootstrap Data API, большинство плагинов могут быть вызвано не написав ни одной строчки кода.

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

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

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

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

  • Все плагины Bootstrap доступны с помощью прилагаемого API данных. Таким образом, вам не нужно включать в одну строку JavaScript для вызова любой из функций плагина.
  • В некоторых ситуациях может быть желательно включить эту функциональность API данных. Если вам нужно отключить API данных, вы можете отвязать атрибуты, добавив следующую строку JavaScript:
$(document).off('.data-api')
  • Чтобы отключить определенный/один плагин, просто включите название плагина в качестве пространства имен вместе с пространством имен данных плагинов, примерно так:
$(document).off('.alert.data-api')

Программирование API

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

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

 

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

// инициализируется по умолчанию
$("#myModal").modal()    

 // Тип клавиатуры                 
$("#myModal").modal({ keyboard: false })  

// инициализирует, запускает и сразу показывает
$("#myModal").modal('show')

 

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

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

Без конфликтов

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

// возврат $.fn.button на ранее присвоенное значение
var bootstrapButton = $.fn.button.noConflict()

// отдать $().bootstrapBtn начальную функциональность загрузки
$.fn.bootstrapBtn = bootstrapButton

 

Мероприятия

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

  • Infinitive form – Срабатывает в начале мероприятия. Например, show. Событие Infinitive обеспечивает preventDefault функциональность. Это дает возможность остановить выполнение действия до его начала.
$('#myModal').on('show.bs.modal', function (e) {
   // модальное окно перестает быть показано
   if (!data) return e.preventDefault() 
})

 

  • Past participle form – Срабатывает по завершению действия.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Просмотров: 139

Если статья понравилась, то поделитесь ей в социальных сетях:

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close