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 со други рамки за интерфејс. Во овие околности, повремено може да се појават судири на именскиот простор. Ако тоа се случи, можете да го повикате .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) на вашите корисници и/или да додадете свои сопствени резервни верзии.

Утил

Сите 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)
  }
})