JavaScript

Oživte Bootstrap pomocí našich volitelných pluginů JavaScript postavených na jQuery. Přečtěte si o každém pluginu, našich možnostech datového a programového rozhraní API a dalších.

Individuální nebo sestavené

Pluginy mohou být zahrnuty jednotlivě (pomocí Bootstrap's individual js/dist/*.js), nebo všechny najednou pomocí bootstrap.jsnebo minifikované bootstrap.min.js(nezahrnujte obojí).

Pokud používáte bundler (Webpack, Rollup…), můžete použít /js/dist/*.jssoubory, které jsou připraveny na UMD.

Závislosti

Některé pluginy a CSS komponenty závisí na jiných pluginech. Pokud zahrnete pluginy jednotlivě, nezapomeňte zkontrolovat tyto závislosti v dokumentech. Všimněte si také, že všechny pluginy závisí na jQuery (to znamená, že jQuery musí být zahrnuto před soubory pluginů). Chcete-li zjistit, které verze jQuery jsou podporovány, přečtěte si naše .package.json

Naše rozbalovací nabídky, vyskakovací okna a popisky také závisí na Popper.js .

Atributy dat

Téměř všechny zásuvné moduly Bootstrap lze aktivovat a konfigurovat pouze prostřednictvím HTML s datovými atributy (náš preferovaný způsob používání funkcí JavaScriptu). Ujistěte se, že pro jeden prvek používáte pouze jednu sadu atributů dat (např. nemůžete spustit popisek a modal ze stejného tlačítka.)

V některých situacích však může být žádoucí tuto funkci zakázat. Chcete-li zakázat rozhraní API datových atributů, zrušte vazbu všech událostí v dokumentu s jmenným prostorem data-apitakto:

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

Alternativně, chcete-li cílit na konkrétní plugin, stačí zahrnout název pluginu jako jmenný prostor spolu s jmenným prostorem data-api, jako je tento:

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

Události

Bootstrap poskytuje vlastní události pro většinu jedinečných akcí pluginů. Obecně platí, že jsou ve formě infinitivu a minulého příčestí – kde infinitiv (např. show) je spuštěn na začátku události a jeho minulý tvar participia (např. shown) je spuštěn při dokončení akce.

Všechny infinitivní události poskytují preventDefault()funkčnost. To poskytuje možnost zastavit provádění akce před jejím zahájením. Vrácení false z obsluhy události také automaticky zavolá preventDefault().

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

Programové rozhraní API

Také věříme, že byste měli být schopni používat všechny Bootstrap pluginy čistě přes JavaScript API. Všechna veřejná rozhraní API jsou jediné, zřetězitelné metody a vracejí kolekci, podle které se jedná.

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

Všechny metody by měly přijímat volitelný objekt voleb, řetězec, který cílí na konkrétní metodu, nebo nic (což spouští plugin s výchozím chováním):

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

Každý plugin také odhaluje svůj raw konstruktor na Constructorvlastnosti: $.fn.popover.Constructor. Pokud chcete získat konkrétní instanci pluginu, načtěte ji přímo z prvku: $('[rel="popover"]').data('popover').

Asynchronní funkce a přechody

Všechny metody programového rozhraní API jsou asynchronní a vracejí se k volajícímu, jakmile je přechod zahájen, ale před jeho ukončením .

Chcete-li po dokončení přechodu provést akci, můžete si poslechnout odpovídající událost.

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

Kromě toho bude ignorováno volání metody na přechodové komponentě .

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

Výchozí nastavení

Výchozí nastavení pluginu můžete změnit úpravou objektu pluginu Constructor.Default:

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

Žádný konflikt

Někdy je nutné použít Bootstrap pluginy s jinými UI frameworky. Za těchto okolností může občas dojít ke kolizím oboru názvů. Pokud k tomu dojde, můžete zavolat .noConflictna plugin, jehož hodnotu chcete vrátit.

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

Čísla verzí

Verze každého z pluginů jQuery Bootstrapu jsou přístupné prostřednictvím VERSIONvlastnosti konstruktoru pluginu. Například pro plugin tooltip:

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

Při deaktivaci JavaScriptu nedochází k žádným zvláštním záložním řešením

Zásuvné moduly Bootstrapu neustupují zvlášť elegantně, když je zakázán JavaScript. Pokud vám v tomto případě záleží na uživatelském dojmu, použijte <noscript>k vysvětlení situace (a jak znovu povolit JavaScript) svým uživatelům a/nebo přidejte své vlastní záložní.

Util

Všechny soubory JavaScriptu Bootstrapu závisí na util.jsa musí být zahrnuty spolu s ostatními soubory JavaScript. Pokud používáte zkompilovaný (nebo minifikovaný) bootstrap.js, není nutné toto zahrnout – už to tam je.

util.jsobsahuje pomocné funkce a základního pomocníka pro transitionEndudálosti a také emulátor přechodu CSS. Používají ho ostatní pluginy ke kontrole podpory přechodů CSS a zachycení visících přechodů.

Sanitizer

Popisky a vyskakovací okna používají náš vestavěný dezinfekční prostředek k dezinfekci možností, které přijímají HTML.

Výchozí whiteListhodnota je následující:

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

Pokud chcete k tomuto výchozímu nastavení přidat nové hodnoty whiteList, můžete provést následující:

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)

Pokud chcete obejít náš dezinfekční prostředek, protože dáváte přednost použití vyhrazené knihovny, například DOMPurify , měli byste udělat následující:

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