ЈаваСцрипт

Оживите Боотстрап помоћу наших опционих ЈаваСцрипт додатака изграђених на јКуери-ју. Сазнајте више о сваком додатку, нашим подацима и опцијама програмског АПИ-ја и још много тога.

Појединачно или састављено

Додаци се могу укључити појединачно (користећи Боотстрап-ов индивидуални js/dist/*.js), или сви одједном користећи bootstrap.jsили минимизирати bootstrap.min.js(немојте укључивати оба).

Ако користите бундлер (Вебпацк, Роллуп...), можете користити /js/dist/*.jsдатотеке које су спремне за УМД.

Зависности

Неки додаци и ЦСС компоненте зависе од других додатака. Ако укључите додатке појединачно, проверите да ли постоје ове зависности у документима. Такође имајте на уму да сви додаци зависе од јКуери-ја (то значи да јКуери мора бити укључен пре датотека додатака). Консултујте нашеpackage.json да видите које су верзије јКуери-ја подржане.

Наши падајући мении, искачући огласи и описи алата такође зависе од Поппер.јс .

Атрибути података

Скоро сви додаци за Боотстрап могу се омогућити и конфигурисати само преко ХТМЛ-а са атрибутима података (наш преферирани начин коришћења ЈаваСцрипт функционалности). Будите сигурни да користите само један скуп атрибута података на једном елементу (нпр. не можете покренути опис алата и модал са истог дугмета.)

Међутим, у неким ситуацијама може бити пожељно да онемогућите ову функцију. Да бисте онемогућили АПИ атрибута података, откажите све догађаје на документу са простором имена data-apiовако:

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

Алтернативно, да бисте циљали одређени додатак, само укључите име додатка као именски простор заједно са дата-апи именским простором овако:

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

Догађаји

Боотстрап обезбеђује прилагођене догађаје за јединствене радње већине додатака. Генерално, они долазе у облику инфинитива и партиципа у прошлости – где се инфинитив (нпр. show) покреће на почетку догађаја, а његов глаголски облик у прошлости (нпр. shown) се покреће по завршетку радње.

Сви инфинитивни догађаји пружају preventDefault()функционалност. Ово пружа могућност заустављања извршења радње пре него што она почне. Враћање фалсе из обрађивача догађаја ће такође аутоматски позвати preventDefault().

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

Програмски АПИ

Такође верујемо да би требало да будете у могућности да користите све додатке за Боотстрап искључиво преко ЈаваСцрипт АПИ-ја. Сви јавни АПИ-ји су једноструки, ланчани методи и враћају колекцију на коју се поступа.

$('.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').

Асинхроне функције и прелази

Све програмске АПИ методе су асинхроне и враћају се позиваоцу када се транзиција започне, али пре него што се заврши .

Да бисте извршили радњу када је транзиција завршена, можете слушати одговарајући догађај.

$('#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

Нема сукоба

Понекад је потребно користити додатке за Боотстрап са другим оквирима корисничког интерфејса. У овим околностима повремено се могу појавити колизије простора имена. Ако се то догоди, можете позвати .noConflictдодатак којем желите да вратите вредност.

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

Бројеви верзија

Верзији сваког од Боотстрап-ових јКуери додатака може се приступити преко VERSIONсвојства конструктора додатка. На пример, за додатак са описом алатки:

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

Нема посебних резерви када је ЈаваСцрипт онемогућен

Боотстрап-ови додаци се не враћају посебно грациозно када је ЈаваСцрипт онемогућен. Ако вам је стало до корисничког искуства у овом случају, користите <noscript>да објасните ситуацију (и како да поново омогућите ЈаваСцрипт) својим корисницима и/или додајте сопствене прилагођене резерве.

Утил

Све Боотстрап-ове ЈаваСцрипт датотеке зависе од util.jsи морају бити укључене заједно са другим ЈаваСцрипт датотекама. Ако користите преведену (или минимизирану) bootstrap.js, нема потребе да ово укључујете – већ је ту.

util.jsукључује услужне функције и основни помоћник за transitionEndдогађаје, као и ЦСС емулатор прелаза. Користе га други додаци за проверу подршке за ЦСС прелаз и за хватање висећих прелаза.

Санитизер

Објашњење алата и искачући прикази користе наш уграђени дезинфикатор за дезинфекцију опција које прихватају ХТМЛ.

Подразумевана 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)

Ако желите да заобиђете наше средство за дезинфекцију јер више волите да користите наменску библиотеку, на пример ДОМПурифи , требало би да урадите следеће:

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