JavaScript

Breng Bootstrap tot leven met onze optionele JavaScript-plug-ins die zijn gebouwd op jQuery. Lees meer over elke plug-in, onze gegevens en programmatische API-opties en meer.

Individueel of samengesteld

Plug-ins kunnen afzonderlijk worden opgenomen (met behulp van Bootstrap's individual js/dist/*.js), of allemaal tegelijk met bootstrap.jsof de verkleinde bootstrap.min.js(gebruik niet beide).

Als u een bundelaar (Webpack, Rollup...) gebruikt, kunt u /js/dist/*.jsbestanden gebruiken die UMD-gereed zijn.

afhankelijkheden

Sommige plug-ins en CSS-componenten zijn afhankelijk van andere plug-ins. Als u plug-ins afzonderlijk opneemt, moet u controleren op deze afhankelijkheden in de documenten. Merk ook op dat alle plug-ins afhankelijk zijn van jQuery (dit betekent dat jQuery vóór de plug-inbestanden moet worden opgenomen). Raadpleeg onzepackage.json om te zien welke versies van jQuery worden ondersteund.

Onze dropdowns, popovers en tooltips zijn ook afhankelijk van Popper.js .

Gegevenskenmerken

Bijna alle Bootstrap-plug-ins kunnen alleen via HTML worden ingeschakeld en geconfigureerd met gegevensattributen (onze voorkeursmanier om JavaScript-functionaliteit te gebruiken). Zorg ervoor dat u slechts één set gegevensattributen voor een enkel element gebruikt (u kunt bijvoorbeeld geen knopinfo en modaal activeren vanaf dezelfde knop.)

In sommige situaties kan het echter wenselijk zijn om deze functionaliteit uit te schakelen. Om de data-attribuut-API uit te schakelen, ontbindt u alle gebeurtenissen in het document met een naamruimte data-apials volgt:

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

Als alternatief kunt u, om een ​​specifieke plug-in te targeten, gewoon de naam van de plug-in opnemen als een naamruimte samen met de data-api-naamruimte als volgt:

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

Evenementen

Bootstrap biedt aangepaste gebeurtenissen voor de unieke acties van de meeste plug-ins. Over het algemeen komen deze in een infinitief en voltooid deelwoordvorm - waarbij de infinitief (bijv. show) wordt geactiveerd aan het begin van een gebeurtenis, en de voltooid deelwoordvorm (bijv. shown) wordt geactiveerd bij de voltooiing van een actie.

Alle oneindige gebeurtenissen bieden preventDefault()functionaliteit. Dit biedt de mogelijkheid om de uitvoering van een actie te stoppen voordat deze begint. False retourneren van een gebeurtenishandler zal ook automatisch aanroepen preventDefault().

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

Programmatische API

We zijn ook van mening dat u alle Bootstrap-plug-ins puur via de JavaScript-API moet kunnen gebruiken. Alle openbare API's zijn enkele, ketenbare methoden en retourneren de verzameling waarop is gereageerd.

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

Alle methoden moeten een optioneel options-object accepteren, een tekenreeks die op een bepaalde methode is gericht, of niets (dat een plug-in start met standaardgedrag):

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

Elke plug-in stelt ook zijn onbewerkte constructor bloot aan een Constructoreigenschap: $.fn.popover.Constructor. Als u een bepaalde plug-in-instantie wilt ophalen, haalt u deze rechtstreeks op uit een element: $('[rel="popover"]').data('popover').

Asynchrone functies en overgangen

Alle programmatische API-methoden zijn asynchroon en keren terug naar de beller zodra de overgang is gestart, maar voordat deze eindigt .

Om een ​​actie uit te voeren zodra de overgang is voltooid, kunt u naar de bijbehorende gebeurtenis luisteren.

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

Bovendien wordt een methodeaanroep op een transitiecomponent genegeerd .

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

Standaard instellingen

U kunt de standaardinstellingen voor een plug-in wijzigen door het Constructor.Defaultobject van de plug-in aan te passen:

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

Geen conflict

Soms is het nodig om Bootstrap-plug-ins te gebruiken met andere UI-frameworks. In deze omstandigheden kunnen naamruimte-botsingen af ​​en toe optreden. Als dit gebeurt, kunt u een beroep doen .noConflictop de plug-in waarvan u de waarde wilt terugzetten.

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

Versienummers

De versie van elk van de jQuery-plug-ins van Bootstrap is toegankelijk via de VERSIONeigenschap van de constructor van de plug-in. Bijvoorbeeld voor de tooltip-plug-in:

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

Geen speciale fallbacks wanneer JavaScript is uitgeschakeld

De plug-ins van Bootstrap vallen niet bijzonder gracieus terug als JavaScript is uitgeschakeld. Als u in dit geval om de gebruikerservaring geeft, gebruik <noscript>dan om de situatie uit te leggen (en hoe u JavaScript opnieuw kunt inschakelen) aan uw gebruikers, en/of voeg uw eigen aangepaste fallbacks toe.

gebruik

Alle JavaScript-bestanden van Bootstrap zijn afhankelijk van util.jsen moeten samen met de andere JavaScript-bestanden worden opgenomen. Als u de gecompileerde (of verkleinde) bootstrap.jsgebruikt, hoeft u dit niet op te nemen - het is er al.

util.jsbevat hulpprogramma-functies en een basishulp voor transitionEndevenementen, evenals een CSS-overgangemulator. Het wordt door de andere plug-ins gebruikt om te controleren op ondersteuning voor CSS-overgangen en om hangende overgangen op te vangen.

ontsmettingsmiddel

Tooltips en Popovers gebruiken ons ingebouwde ontsmettingsmiddel om opties op te schonen die HTML accepteren.

De standaardwaarde whiteListis de volgende:

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

Als u nieuwe waarden aan deze standaard wilt toevoegen, whiteListkunt u het volgende doen:

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)

Als u ons ontsmettingsmiddel wilt omzeilen omdat u liever een speciale bibliotheek gebruikt, bijvoorbeeld DOMPurify , moet u het volgende doen:

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