JavaSkript

Bring Bootstrap ta libben mei ús opsjonele JavaScript-plugins boud op jQuery. Learje oer elke plugin, ús gegevens en programmatyske API-opsjes, en mear.

Yndividueel of gearstald

Ynstekkers kinne yndividueel opnommen wurde (mei it yndividu fan Bootstrap js/dist/*.js), of allegear tagelyk mei bootstrap.jsof de minifisearre bootstrap.min.js(befette beide net).

As jo ​​​​in bondel brûke (Webpack, Rollup ...), kinne jo /js/dist/*.jsbestannen brûke dy't UMD klear binne.

Ofhinklikens

Guon plugins en CSS-komponinten binne ôfhinklik fan oare plugins. As jo ​​​​plugins yndividueel opnimme, soargje derfoar dat jo dizze ôfhinklikens kontrolearje yn 'e dokuminten. Tink derom ek dat alle plugins ôfhinklik binne fan jQuery (dit betsjut dat jQuery moat wurde opnommen foar de plugin-bestannen). Rieplachtsje úspackage.json om te sjen hokker ferzjes fan jQuery wurde stipe.

Us dropdowns, popovers en tooltips binne ek ôfhinklik fan Popper.js .

Data attributen

Hast alle Bootstrap-plugins kinne wurde ynskeakele en konfigureare fia HTML allinich mei gegevensattributen (ús foarkommende manier om JavaScript-funksjonaliteit te brûken). Wês der wis fan dat jo mar ien set gegevensattributen brûke op ien elemint (jo kinne bygelyks gjin tooltip en modaal fan deselde knop oansette.)

Yn guon situaasjes kin it lykwols winsklik wêze om dizze funksjonaliteit út te skeakeljen. Om it data-attribút API út te skeakeljen, ûntbine alle eveneminten op it dokumint mei nammespaasje mei data-apisa:

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

As alternatyf, om in spesifyk plugin te rjochtsjen, befetsje gewoan de namme fan 'e plugin as in nammeromte tegearre mei de data-api nammeromte sa:

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

Eveneminten

Bootstrap leveret oanpaste eveneminten foar de unike aksjes fan de measte plugins. Yn 't algemien komme dizze yn in ynfinityf en doedestiidsfoarm - wêrby't de ynfinityf (bgl. show) oan it begjin fan in barren ynskeakele wurdt, en syn doetiidsfoarm (bgl. shown) wurdt aktivearre by it foltôgjen fan in aksje.

Alle infinitive eveneminten jouwe preventDefault()funksjonaliteit. Dit jout de mooglikheid om de útfiering fan in aksje te stopjen foardat it begjint. It werombringen fan falsk fan in evenemintehanneler sil ek automatysk oproppe preventDefault().

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

Programmatyske API

Wy leauwe ek dat jo alle Bootstrap-plugins moatte kinne brûke suver fia de JavaScript API. Alle iepenbiere APIs binne single, chainable metoaden, en werom de kolleksje hannele op.

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

Alle metoaden moatte in opsjoneel opsjeobjekt akseptearje, in tekenrige dy't in bepaalde metoade rjochtet, of neat (wat in plugin inisjearret mei standertgedrach):

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

Elke plugin bleatstelt ek syn rauwe konstruktor op in Constructoreigendom $.fn.popover.Constructor:. As jo ​​​​in bepaalde plugin-eksimplaar wolle krije, helje it dan direkt fan in elemint op: $('[rel="popover"]').data('popover').

Asynchrone funksjes en transysjes

Alle programmatyske API-metoaden binne asynchrone en geane werom nei de beller as de oergong is begon, mar foardat it einiget .

Om in aksje út te fieren as de oergong foltôge is, kinne jo harkje nei it korrespondearjende evenemint.

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

Derneist sil in metoadeoprop op in oergongskomponint wurde negearre .

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

Standertynstellings

Jo kinne de standertynstellingen foar in plugin feroarje troch it Constructor.Defaultobjekt fan 'e plugin te feroarjen:

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

Gjin konflikt

Soms is it nedich om Bootstrap-plugins te brûken mei oare UI-kaders. Yn dizze omstannichheden kinne nammeromte botsingen soms foarkomme. As dit bart, kinne jo .noConflictde plugin oanroppe wêrfan jo de wearde weromsette wolle.

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

Ferzje nûmers

De ferzje fan elk fan Bootstrap's jQuery-plugins kin tagonklik wurde fia it VERSIONeigendom fan 'e plugin's konstruktor. Bygelyks foar de tooltip-plugin:

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

Gjin spesjale fallbacks as JavaScript is útskeakele

De plugins fan Bootstrap falle net bysûnder sierlik werom as JavaScript is útskeakele. As jo ​​yn dit gefal soarch hawwe oer de brûkersûnderfining, brûk <noscript>dan om de situaasje (en hoe't jo JavaScript opnij ynskeakelje kinne) oan jo brûkers út te lizzen, en/of jo eigen oanpaste fallbacks ta te foegjen.

Util

Alle JavaScript-bestannen fan Bootstrap binne ôfhinklik fan util.jsen it moat wurde opnaam neist de oare JavaScript-bestannen. As jo ​​​​de kompilearre (of minifisearre) brûke bootstrap.js, is it net nedich om dit op te nimmen - it is der al.

util.jsomfettet nutsfunksjes en in basishelper foar transitionEndeveneminten, lykas ek in CSS-oergongemulator. It wurdt brûkt troch de oare plugins om te kontrolearjen op CSS-oergongsstipe en om hingjende oergongen te fangen.

Sanitizer

Tooltips en Popovers brûke ús ynboude sanitizer om opsjes te sanearjen dy't HTML akseptearje.

De standertwearde whiteListis de folgjende:

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

As jo ​​nije wearden taheakje wolle oan dizze standert whiteListkinne jo it folgjende dwaan:

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)

As jo ​​​​ús sanitizer wolle omgean om't jo leaver in tawijd bibleteek brûke, bygelyks DOMPurify , moatte jo it folgjende dwaan:

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