JavaScript

Oživite Bootstrap pomoću naših opcionih JavaScript dodataka izgrađenih na jQueryju. Saznajte više o svakom dodatku, našim podacima i programskim API opcijama i još mnogo toga.

Pojedinačno ili sastavljeno

Dodaci se mogu uključiti pojedinačno (koristeći Bootstrap individualni js/dist/*.js), ili svi odjednom koristeći bootstrap.jsili minimizirati bootstrap.min.js(nemojte uključivati ​​oba).

Ako koristite bundler (Webpack, Rollup...), možete koristiti /js/dist/*.jsdatoteke koje su spremne za UMD.

Zavisnosti

Neki dodaci i CSS komponente zavise od drugih dodataka. Ako uključite dodatke pojedinačno, provjerite ima li ovih ovisnosti u dokumentima. Također imajte na umu da svi dodaci zavise od jQueryja (to znači da jQuery mora biti uključen prije datoteka dodataka). Posavjetujte se s našimpackage.json da vidite koje su verzije jQueryja podržane.

Naši padajući menii, skočni prozori i opisi alata takođe zavise od Popper.js .

Atributi podataka

Gotovo svi dodaci za Bootstrap mogu se omogućiti i konfigurirati samo preko HTML-a sa atributima podataka (naš preferirani način korištenja JavaScript funkcionalnosti). Budite sigurni da koristite samo jedan skup atributa podataka na jednom elementu (npr. ne možete pokrenuti opis alata i modal pomoću istog gumba).

Međutim, u nekim situacijama može biti poželjno onemogućiti ovu funkciju. Da biste onemogućili API atributa podataka, poništite sve događaje na dokumentu s imenskim prostorom na sljedeći data-apinačin:

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

Alternativno, da biste ciljali određeni dodatak, samo uključite ime dodatka kao imenski prostor zajedno sa data-api imenskim prostorom ovako:

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

Događaji

Bootstrap pruža prilagođene događaje za jedinstvene radnje većine dodataka. Općenito, oni dolaze u obliku infinitiva i participa u prošlosti - gdje se infinitiv (npr. show) pokreće na početku događaja, a njegov glagolski oblik prošlosti (npr. shown) se pokreće po završetku radnje.

Svi infinitivni događaji pružaju preventDefault()funkcionalnost. Ovo pruža mogućnost zaustavljanja izvršenja radnje prije nego što ona počne. Vraćanje false iz obrađivača događaja će također automatski pozvati preventDefault().

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

Programski API

Također vjerujemo da biste trebali moći koristiti sve dodatke za Bootstrap isključivo preko JavaScript API-ja. Svi javni API-ji su jednostruke, lančane metode i vraćaju kolekciju na koju se postupa.

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

Sve metode bi trebale prihvatiti opcijski objekt opcija, string koji cilja određenu metodu ili ništa (što pokreće dodatak sa zadanim ponašanjem):

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

Svaki dodatak također izlaže svoj sirovi konstruktor na Constructorsvojstvu: $.fn.popover.Constructor. Ako želite da dobijete određenu instancu dodatka, dohvatite je direktno iz elementa: $('[rel="popover"]').data('popover').

Asinkrone funkcije i prijelazi

Sve programske metode API-ja su asinhrone i vraćaju se pozivaocu kada se tranzicija pokrene, ali prije nego što se završi .

Da biste izvršili radnju kada je tranzicija završena, možete slušati odgovarajući događaj.

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

Osim toga, poziv metode na prelaznu komponentu će biti zanemaren .

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

Zadane postavke

Možete promijeniti zadane postavke za dodatak mijenjanjem objekta dodatka Constructor.Default:

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

Nema sukoba

Ponekad je potrebno koristiti dodatke za Bootstrap sa drugim UI okvirima. U ovim okolnostima povremeno se mogu dogoditi kolizije prostora imena. Ako se to dogodi, možete pozvati .noConflictdodatak kojem želite vratiti vrijednost.

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

Brojevi verzija

Verziji svakog od Bootstrap-ovih jQuery dodataka može se pristupiti preko VERSIONsvojstva konstruktora dodatka. Na primjer, za dodatak s opisom alata:

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

Nema posebnih rezervi kada je JavaScript onemogućen

Bootstrap-ovi dodaci se ne vraćaju posebno graciozno kada je JavaScript onemogućen. Ako vam je stalo do korisničkog iskustva u ovom slučaju, koristite <noscript>da objasnite situaciju (i kako da ponovo omogućite JavaScript) svojim korisnicima, i/ili dodajte svoje vlastite prilagođene rezerve.

Util

Sve Bootstrap-ove JavaScript datoteke zavise od util.jsi moraju biti uključene uz druge JavaScript datoteke. Ako koristite prevedenu (ili minimiziranu) bootstrap.js, nema potrebe da ovo uključujete – već je tu.

util.jsuključuje uslužne funkcije i osnovni pomoćnik za transitionEnddogađaje kao i CSS emulator prijelaza. Koriste ga drugi dodaci za provjeru podrške za CSS prijelaz i za hvatanje visećih prijelaza.

Sanitizer

Tooltips i Popovers koriste naše ugrađeno sredstvo za dezinfekciju za saniranje opcija koje prihvataju HTML.

Zadana whiteListvrijednost je sljedeća:

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: []
}

Ako želite dodati nove vrijednosti ovoj zadanoj whiteList, možete učiniti sljedeće:

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)

Ako želite zaobići naše sredstvo za dezinfekciju jer više volite koristiti namjensku biblioteku, na primjer DOMPurify , trebate učiniti sljedeće:

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