JavaScript

Bring Bootstrap til live med vores valgfri JavaScript-plugins bygget på jQuery. Lær om hvert plugin, vores data- og programmatiske API-muligheder og mere.

Individuelt eller samlet

Plugins kan inkluderes individuelt (ved at bruge Bootstraps individuelle js/dist/*.js), eller alle på én gang ved at bruge bootstrap.jseller de minificerede bootstrap.min.js(medtag ikke begge).

Hvis du bruger en bundler (Webpack, Rollup...), kan du bruge /js/dist/*.jsfiler, der er UMD-klare.

Afhængigheder

Nogle plugins og CSS-komponenter afhænger af andre plugins. Hvis du inkluderer plugins individuelt, skal du sørge for at tjekke for disse afhængigheder i dokumenterne. Bemærk også, at alle plugins afhænger af jQuery (dette betyder, at jQuery skal inkluderes før plugin-filerne). Se vorespackage.json for at se, hvilke versioner af jQuery der understøttes.

Vores dropdowns, popovers og værktøjstip afhænger også af Popper.js .

Data attributter

Næsten alle Bootstrap-plugins kan aktiveres og konfigureres gennem HTML alene med dataattributter (vores foretrukne måde at bruge JavaScript-funktionalitet på). Sørg for kun at bruge ét sæt dataattributter på et enkelt element (f.eks. kan du ikke udløse et værktøjstip og modal fra den samme knap).

I nogle situationer kan det dog være ønskeligt at deaktivere denne funktionalitet. For at deaktivere dataattributten API skal du fjerne bindingen til alle hændelser på dokumentet med navneafstand data-apisom sådan:

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

Alternativt, for at målrette mod et specifikt plugin, skal du blot inkludere plugin's navn som et navneområde sammen med data-api navneområdet som dette:

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

Begivenheder

Bootstrap leverer tilpassede begivenheder til de fleste plugins' unikke handlinger. Generelt kommer disse i en infinitiv og past participium form - hvor infinitiv (eks. show) udløses i starten af ​​en begivenhed, og dens participium form (ex. shown) udløses ved afslutningen af ​​en handling.

Alle infinitive begivenheder giver preventDefault()funktionalitet. Dette giver mulighed for at stoppe udførelsen af ​​en handling, før den starter. At returnere falsk fra en hændelseshandler vil også automatisk kalde preventDefault().

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

Programmatisk API

Vi mener også, at du skal være i stand til at bruge alle Bootstrap-plugins udelukkende gennem JavaScript API. Alle offentlige API'er er enkeltstående, kædebare metoder og returnerer den indsamling, der blev handlet på.

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

Alle metoder bør acceptere et valgfrit option-objekt, en streng, der er målrettet mod en bestemt metode, eller ingenting (som starter et plugin med standardadfærd):

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

Hvert plugin afslører også sin rå konstruktør på en Constructoregenskab: $.fn.popover.Constructor. Hvis du gerne vil have en bestemt plugin-instans, skal du hente den direkte fra et element: $('[rel="popover"]').data('popover').

Asynkrone funktioner og overgange

Alle programmatiske API-metoder er asynkrone og vender tilbage til den, der ringer, når overgangen er startet, men før den slutter .

For at udføre en handling, når overgangen er fuldført, kan du lytte til den tilsvarende begivenhed.

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

Derudover vil et metodekald på en overgangskomponent blive ignoreret .

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

Standardindstillinger

Du kan ændre standardindstillingerne for et plugin ved at ændre pluginets Constructor.Defaultobjekt:

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

Ingen konflikt

Nogle gange er det nødvendigt at bruge Bootstrap-plugins med andre UI-rammer. Under disse omstændigheder kan navneområdekollisioner lejlighedsvis forekomme. Hvis dette sker, kan du ringe .noConflicttil det plugin, du ønsker at gendanne værdien af.

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

Versionsnumre

Versionen af ​​hver af Bootstraps jQuery-plugins kan tilgås via VERSIONegenskaben af ​​plugin-konstruktøren. For eksempel til værktøjstip-plugin:

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

Ingen særlige fallbacks, når JavaScript er deaktiveret

Bootstraps plugins falder ikke særlig yndefuldt tilbage, når JavaScript er deaktiveret. Hvis du bekymrer dig om brugeroplevelsen i dette tilfælde, skal du bruge <noscript>til at forklare situationen (og hvordan du genaktiverer JavaScript) for dine brugere og/eller tilføje dine egne tilpassede reserver.

Util

Alle Bootstraps JavaScript-filer afhænger af, util.jsog det skal inkluderes sammen med de andre JavaScript-filer. Hvis du bruger det kompilerede (eller minificerede) bootstrap.js, er det ikke nødvendigt at inkludere dette – det er der allerede.

util.jsomfatter hjælpefunktioner og en grundlæggende hjælper til transitionEndbegivenheder samt en CSS-overgangsemulator. Det bruges af de andre plugins til at tjekke for CSS overgangsunderstøttelse og til at fange hængende overgange.

Saneringsmiddel

Værktøjstip og popovers bruger vores indbyggede desinfektionsmiddel til at rense muligheder, der accepterer HTML.

Standardværdien whiteLister følgende:

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

Hvis du vil tilføje nye værdier til denne standard whiteList, kan du gøre følgende:

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)

Hvis du vil omgå vores desinfektionsmiddel, fordi du foretrækker at bruge et dedikeret bibliotek, for eksempel DOMPurify , skal du gøre følgende:

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