JavaScript

Вдъхнете живот на Bootstrap с нашите незадължителни JavaScript добавки, изградени на jQuery. Научете за всеки плъгин, нашите опции за данни и програмен API и др.

Индивидуално или съставено

Приставките могат да бъдат включени поотделно (използвайки индивидуалните на Bootstrap js/dist/*.js) или всички наведнъж, като използвате bootstrap.jsили минимизираните bootstrap.min.js(не включвайте и двете).

Ако използвате пакет (Webpack, Rollup...), можете да използвате /js/dist/*.jsфайлове, които са готови за UMD.

Зависимости

Някои добавки и CSS компоненти зависят от други добавки. Ако включвате плъгини поотделно, не забравяйте да проверите за тези зависимости в документите. Също така имайте предвид, че всички добавки зависят от jQuery (това означава, че jQuery трябва да бъде включен преди файловете на добавките). Консултирайте се с насpackage.json , за да видите кои версии на jQuery се поддържат.

Нашите падащи менюта, изскачащи менюта и подсказки също зависят от Popper.js .

Атрибути на данните

Почти всички приставки за Bootstrap могат да бъдат активирани и конфигурирани само чрез HTML с атрибути на данни (предпочитаният ни начин за използване на функционалността на JavaScript). Уверете се, че използвате само един набор от атрибути на данни за един елемент (напр. не можете да задействате подсказка и модал от един и същ бутон.)

В някои ситуации обаче може да е желателно да деактивирате тази функция. За да деактивирате API на атрибута за данни, развържете всички събития в пространството от имена на документа по data-apiследния начин:

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

Като алтернатива, за да се насочите към конкретен плъгин, просто включете името на плъгина като пространство от имена заедно с пространството от имена на API за данни по този начин:

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

събития

Bootstrap предоставя персонализирани събития за уникалните действия на повечето добавки. Обикновено те идват във форма на инфинитив и минало причастие - където инфинитивът (напр. show) се задейства в началото на събитие, а неговата форма на минало причастие (напр. shown) се задейства при завършване на действие.

Всички безкрайни събития осигуряват preventDefault()функционалност. Това осигурява възможност за спиране на изпълнението на действие, преди то да започне. Връщането на false от манипулатор на събития също автоматично ще извика preventDefault().

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

Програмен 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').

Асинхронни функции и преходи

Всички програмни API методи са асинхронни и се връщат към извикващия, след като преходът започне, но преди да приключи .

За да изпълните действие, след като преходът приключи, можете да слушате съответното събитие.

$('#myCollapse').on('shown.bs.collapse', function (event) {
  // Action to execute once the collapsible area is expanded
})

Освен това извикване на метод на преходен компонент ще бъде игнорирано .

$('#myCarousel').on('slid.bs.carousel', function (event) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

Настройките по подразбиране

Можете да промените настройките по подразбиране за плъгин, като промените Constructor.Defaultобекта на плъгина:

// changes default for the modal plugin's `keyboard` option to false
$.fn.modal.Constructor.Default.keyboard = false

Без конфликт

Понякога е необходимо да използвате плъгини Bootstrap с други UI рамки. При тези обстоятелства понякога могат да възникнат сблъсъци в пространството на имена. Ако това се случи, можете да извикате .noConflictприставката, на която искате да върнете стойността.

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

Номера на версиите

Версията на всеки от jQuery плъгините на Bootstrap може да бъде достъпна чрез VERSIONсвойството на конструктора на плъгина. Например за приставката за подсказки:

$.fn.tooltip.Constructor.VERSION // => "4.6.2"

Няма специални резервни варианти, когато JavaScript е деактивиран

Приставките на Bootstrap не се връщат особено грациозно, когато JavaScript е деактивиран. Ако ви е грижа за потребителското изживяване в този случай, използвайте, <noscript>за да обясните ситуацията (и как да активирате отново JavaScript) на вашите потребители и/или добавете свои собствени персонализирани резервни варианти.

Util

Всички JavaScript файлове на Bootstrap зависят util.jsи трябва да бъдат включени заедно с другите JavaScript файлове. Ако използвате компилираното (или минимизираното) bootstrap.js, няма нужда да включвате това – то вече е там.

util.jsвключва помощни функции и основен помощник за transitionEndсъбития, както и CSS емулатор за преход. Използва се от другите плъгини за проверка за поддръжка на CSS преходи и за улавяне на висящи преходи.

Дезинфектант

Подсказките и изскачащите екрани използват нашия вграден дезинфектант, за да дезинфекцират опции, които приемат HTML.

Стойността по подразбиране whiteListе следната:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'srcset', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Ако искате да добавите нови стойности към тази стойност по подразбиране whiteList, можете да направите следното:

var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Ако искате да заобиколите нашия дезинфектант, защото предпочитате да използвате специална библиотека, например DOMPurify , трябва да направите следното:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})