JavaScript
Gjør Bootstrap til live med våre valgfrie JavaScript-plugins bygget på jQuery. Lær om hver plugin, våre data- og programmatiske API-alternativer og mer.
Individuell eller kompilert
Plugins kan inkluderes individuelt (ved å bruke Bootstraps individuelle js/dist/*.js
), eller alle på en gang ved å bruke bootstrap.js
eller de minifiserte bootstrap.min.js
(ikke inkludere begge).
Hvis du bruker en bundler (Webpack, Rollup...), kan du bruke /js/dist/*.js
filer som er UMD-klare.
Avhengigheter
Noen plugins og CSS-komponenter er avhengige av andre plugins. Hvis du inkluderer plugins individuelt, sørg for å se etter disse avhengighetene i dokumentene. Vær også oppmerksom på at alle plugins er avhengige av jQuery (dette betyr at jQuery må inkluderes før plugin-filene). Se vårpackage.json
for å se hvilke versjoner av jQuery som støttes.
Våre rullegardiner, popovers og verktøytips avhenger også av Popper.js .
Dataattributter
Nesten alle Bootstrap-plugins kan aktiveres og konfigureres gjennom HTML alene med dataattributter (vår foretrukne måte å bruke JavaScript-funksjonalitet). Pass på at du bare bruker ett sett med dataattributter på et enkelt element (f.eks. kan du ikke utløse et verktøytips og en modal fra samme knapp.)
I noen situasjoner kan det imidlertid være ønskelig å deaktivere denne funksjonaliteten. For å deaktivere dataattributtet API, fjern bindingen til alle hendelser på dokumentet med navneavstand data-api
slik:
$(document).off('.data-api')
Alternativt, for å målrette mot et spesifikt plugin, inkluderer du bare pluginens navn som et navneområde sammen med data-api navneområdet slik:
$(document).off('.alert.data-api')
Velgere
For å søke etter DOM-elementer bruker vi for øyeblikket de opprinnelige metodene querySelector
og querySelectorAll
av ytelsesgrunner, så du må bruke gyldige velgere . Hvis du for eksempel bruker spesielle velgere: collapse:Example
sørg for å unnslippe dem.
arrangementer
Bootstrap gir tilpassede hendelser for de fleste plugins unike handlinger. Generelt kommer disse i en infinitiv og partisippform - der infinitiv (eks. show
) utløses ved starten av en hendelse, og partisippform (eks. shown
) utløses ved fullføring av en handling.
Alle infinitive hendelser gir preventDefault()
funksjonalitet. Dette gir muligheten til å stoppe utførelsen av en handling før den starter. Å returnere usant fra en hendelsesbehandler vil også automatisk ringe 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 bør kunne bruke alle Bootstrap-plugins rent gjennom JavaScript API. Alle offentlige API-er er enkle, kjedebare metoder, og returnerer samlingen som ble utført.
$('.btn.danger').button('toggle').addClass('fat')
Alle metoder bør godta et valgfritt alternativobjekt, en streng som retter seg mot en bestemt metode, eller ingenting (som starter en plugin med standard oppførsel):
$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately
Hvert plugin viser også sin råkonstruktør på en Constructor
egenskap: $.fn.popover.Constructor
. Hvis du vil ha en bestemt plugin-forekomst, kan du hente den direkte fra et element: $('[rel="popover"]').data('popover')
.
Asynkrone funksjoner og overganger
Alle programmatiske API-metoder er asynkrone og går tilbake til den som ringer når overgangen er startet, men før den avsluttes .
For å utføre en handling når overgangen er fullført, kan du lytte til den tilsvarende hendelsen.
$('#myCollapse').on('shown.bs.collapse', function (event) {
// Action to execute once the collapsible area is expanded
})
I tillegg vil et metodekall på en overgangskomponent bli ignorert .
$('#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 !!
Standard instillinger
Du kan endre standardinnstillingene for en plugin ved å endre plugin- Constructor.Default
objektet:
// changes default for the modal plugin's `keyboard` option to false
$.fn.modal.Constructor.Default.keyboard = false
Ingen konflikt
Noen ganger er det nødvendig å bruke Bootstrap-plugins med andre UI-rammer. Under disse omstendighetene kan navneområdekollisjoner av og til forekomme. Hvis dette skjer, kan du ringe .noConflict
til plugin-en du ønsker å tilbakestille verdien av.
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
Versjonsnummer
Versjonen av hver av Bootstraps jQuery-plugins kan nås via VERSION
egenskapen til plugin-konstruktøren. For eksempel for verktøytips-plugin:
$.fn.tooltip.Constructor.VERSION // => "4.6.2"
Ingen spesielle fallbacks når JavaScript er deaktivert
Bootstraps plugins faller ikke spesielt elegant tilbake når JavaScript er deaktivert. Hvis du bryr deg om brukeropplevelsen i dette tilfellet, bruk <noscript>
for å forklare situasjonen (og hvordan du aktiverer JavaScript på nytt) for brukerne dine, og/eller legg til dine egne tilpassede reserver.
Tredjeparts biblioteker
Bootstrap støtter ikke offisielt tredjeparts JavaScript-biblioteker som Prototype eller jQuery UI. Til tross for .noConflict
hendelser med navneavstand, kan det være kompatibilitetsproblemer som du må fikse på egen hånd.
Utnytt
Alle Bootstraps JavaScript-filer er avhengige av util.js
, og de må inkluderes sammen med de andre JavaScript-filene. Hvis du bruker den kompilerte (eller minifiserte) bootstrap.js
, er det ikke nødvendig å inkludere dette – det er der allerede.
util.js
inkluderer verktøyfunksjoner og en grunnleggende hjelper for transitionEnd
arrangementer samt en CSS-overgangsemulator. Den brukes av de andre pluginene for å se etter støtte for CSS-overganger og for å fange hengende overganger.
Sanitizer
Verktøytips og popovers bruker vår innebygde rensemiddel for å rense alternativer som godtar HTML.
Standardverdien whiteList
er 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 legge til nye verdier til denne standarden whiteList
, kan du gjø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å desinficeringsmiddelet vårt fordi du foretrekker å bruke et dedikert bibliotek, for eksempel DOMPurify , bør du gjøre følgende:
$('#yourTooltip').tooltip({
sanitizeFn: function (content) {
return DOMPurify.sanitize(content)
}
})