JavaScript

Oživte Bootstrap pomocou našich voliteľných doplnkov JavaScript postavených na jQuery. Získajte informácie o každom doplnku, našich údajoch a možnostiach programového rozhrania API a ďalšie informácie.

Individuálne alebo zostavené

Pluginy môžu byť zahrnuté jednotlivo (pomocou Bootstrap's individual js/dist/*.js), alebo všetky naraz pomocou bootstrap.jsalebo minifikované bootstrap.min.js(nezahŕňajú oboje).

Ak používate balík (Webpack, Rollup…), môžete použiť /js/dist/*.jssúbory, ktoré sú pripravené na UMD.

Závislosti

Niektoré doplnky a komponenty CSS závisia od iných doplnkov. Ak zahrniete doplnky jednotlivo, nezabudnite skontrolovať tieto závislosti v dokumentoch. Upozorňujeme tiež, že všetky doplnky závisia od jQuery (to znamená, že jQuery musí byť zahrnuté pred súbormi doplnkov). Ak chcete zistiť, ktoré verzie jQuery sú podporované, pozrite si našu stránku.package.json

Naše rozbaľovacie ponuky, kontextové okná a popisy tiež závisia od súboru Popper.js .

Atribúty údajov

Takmer všetky zásuvné moduly Bootstrap je možné aktivovať a konfigurovať iba prostredníctvom HTML s dátovými atribútmi (náš preferovaný spôsob používania funkcií JavaScriptu). Uistite sa, že na jednom prvku používate iba jednu množinu atribútov údajov (napr. nemôžete spustiť popis a modal z toho istého tlačidla.)

V niektorých situáciách však môže byť žiaduce túto funkciu vypnúť. Ak chcete zakázať API dátových atribútov, zrušte väzbu všetkých udalostí v dokumente s priestorom názvov data-apitakto:

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

Ak chcete zacieliť na konkrétny doplnok, stačí zahrnúť názov doplnku ako priestor názvov spolu s priestorom názvov data-api, ako je tento:

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

Diania

Bootstrap poskytuje vlastné udalosti pre väčšinu jedinečných akcií doplnkov. Vo všeobecnosti sú vo forme infinitívu a minulého príčastia – kde infinitív (napr. show) sa spúšťa na začiatku udalosti a jeho minulá forma príčastia (napr. shown) sa spúšťa pri dokončení akcie.

Všetky nekonečné udalosti poskytujú preventDefault()funkčnosť. To poskytuje možnosť zastaviť vykonávanie akcie pred jej spustením. Vrátenie false z obsluhy udalosti tiež automaticky zavolá preventDefault().

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

Programové rozhranie API

Tiež sa domnievame, že by ste mali mať možnosť používať všetky doplnky Bootstrap výhradne cez JavaScript API. Všetky verejné rozhrania API sú jednoduché, reťaziteľné metódy a vracajú kolekciu, podľa ktorej sa koná.

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

Všetky metódy by mali akceptovať voliteľný objekt volieb, reťazec, ktorý je zacielený na konkrétnu metódu, alebo nič (čo spustí doplnok s predvoleným správaním):

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

Každý doplnok tiež odhaľuje svoj pôvodný konštruktor na Constructorvlastnosti: $.fn.popover.Constructor. Ak chcete získať konkrétnu inštanciu doplnku, získajte ju priamo z prvku: $('[rel="popover"]').data('popover').

Asynchrónne funkcie a prechody

Všetky metódy programového rozhrania API sú asynchrónne a vrátia sa volajúcemu po spustení prechodu, ale pred jeho ukončením .

Ak chcete po dokončení prechodu vykonať akciu, môžete si vypočuť príslušnú udalosť.

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

Okrem toho bude ignorované volanie metódy na prechodovom komponente .

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

Predvolené nastavenia

Predvolené nastavenia doplnku môžete zmeniť úpravou Constructor.Defaultobjektu doplnku:

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

Žiadny konflikt

Niekedy je potrebné použiť Bootstrap pluginy s inými UI frameworkami. Za týchto okolností môže občas dôjsť ku kolíziám menného priestoru. Ak k tomu dôjde, môžete zavolať .noConflictna doplnok, ktorého hodnotu chcete vrátiť.

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

Čísla verzií

K verzii každého z doplnkov jQuery Bootstrapu je možné pristupovať prostredníctvom VERSIONvlastnosti konštruktora doplnku. Napríklad pre doplnok tooltip:

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

Pri zakázanom JavaScripte žiadne špeciálne záložné riešenia

Doplnky Bootstrapu neklesajú obzvlášť elegantne, keď je JavaScript zakázaný. Ak vám v tomto prípade záleží na používateľskej skúsenosti, použite <noscript>na vysvetlenie situácie (a ako znova povoliť JavaScript) svojim používateľom a/alebo pridajte svoje vlastné záložné.

Util

Všetky súbory JavaScript Bootstrapu závisia util.jsa musia byť zahrnuté spolu s ostatnými súbormi JavaScript. Ak používate skompilovaný (alebo miniifikovaný) bootstrap.js, nie je potrebné ho zahrnúť – už tam je.

util.jsobsahuje pomocné funkcie a základného pomocníka pre transitionEndudalosti, ako aj emulátor prechodu CSS. Používajú ho ostatné doplnky na kontrolu podpory prechodu CSS a na zachytenie visiacich prechodov.

Dezinfekčný prostriedok

Popisy a kontextové okná používajú náš vstavaný dezinfekčný prostriedok na dezinfekciu možností, ktoré akceptujú HTML.

Predvolená whiteListhodnota je nasledovná:

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

Ak chcete do tejto predvolenej hodnoty pridať nové hodnoty whiteList, môžete urobiť nasledovné:

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)

Ak chcete obísť náš dezinfekčný prostriedok, pretože uprednostňujete používanie špeciálnej knižnice, napríklad DOMPurify , mali by ste urobiť nasledovné:

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