JavaScript

Bay Bootstrap lavi ak grefon JavaScript opsyonèl nou yo bati sou jQuery. Aprann sou chak plugin, done nou yo ak opsyon API pwogramasyon, ak plis ankò.

Endividyèl oswa konpile

Plugins yo ka enkli endividyèlman (lè l sèvi avèk endividyèl Bootstrap a js/dist/*.js), oswa tout nan yon fwa lè l sèvi avèk bootstrap.jsoswa minified la bootstrap.min.js(pa enkli tou de).

Si w itilize yon bundler (Webpack, Rollup...), ou ka itilize /js/dist/*.jsfichye ki pare UMD.

Depandans

Gen kèk grefon ak eleman CSS depann sou lòt grefon. Si ou enkli grefon endividyèlman, asire w ou tcheke pou depandans sa yo nan dokiman yo. Epitou sonje ke tout grefon depann sou jQuery (sa vle di jQuery dwe enkli anvan dosye yo plugin). Konsilte noupackage.json pou wè ki vèsyon jQuery yo sipòte.

Dropdowns, popovers ak konsèy sou zouti nou yo depann tou de Popper.js .

Done atribi

Prèske tout grefon Bootstrap yo ka aktive ak konfigirasyon atravè HTML pou kont li ak atribi done (fason pi pito nou an pou itilize fonksyonalite JavaScript). Asire ou ke ou itilize sèlman yon seri atribi done sou yon sèl eleman (egzanp, ou pa ka deklanche yon konsèy sou zouti ak modal nan menm bouton an.)

Sepandan, nan kèk sitiyasyon li ka dezirab enfim fonksyonalite sa a. Pou enfim API atribi done a, dezabiye tout evènman sou dokiman an ki gen espas non ak data-apijan sa a:

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

Altènativman, vize yon plugin espesifik, jis enkli non plugin a kòm yon espas non ansanm ak espas non done-api tankou sa a:

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

Evènman

Bootstrap bay evènman koutim pou aksyon inik pifò grefon yo. Anjeneral, sa yo vini nan yon fòm enfinitif ak patisipan sot pase yo - kote infinitif la (egzanp show) deklanche nan kòmansman yon evènman, ak fòm patisipasyon sot pase li yo (egzanp shown) deklanche sou fini yon aksyon.

Tout evènman infinitif bay preventDefault()fonksyonalite. Sa a bay kapasite pou sispann ekzekisyon yon aksyon anvan li kòmanse. Retounen fo soti nan yon moun kap okipe evènman yo pral otomatikman rele tou preventDefault().

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

Pwogram API

Nou kwè tou ou ta dwe kapab itilize tout grefon Bootstrap sèlman atravè API JavaScript. Tout API piblik yo se yon sèl, metòd chèn, epi retounen koleksyon an aji sou.

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

Tout metòd yo ta dwe aksepte yon opsyon opsyon opsyon, yon kòd ki vize yon metòd patikilye, oswa pa gen anyen (ki inisye yon plugin ak konpòtman default):

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

Chak Plugin tou ekspoze konstrukteur anvan tout koreksyon li yo sou yon Constructorpwopriyete: $.fn.popover.Constructor. Si ou ta renmen jwenn yon egzanp plugin patikilye, rekipere li dirèkteman nan yon eleman: $('[rel="popover"]').data('popover').

Fonksyon asynchrone ak tranzisyon

Tout metòd API pwogramasyon yo asenkron epi retounen nan moun k ap rele a yon fwa tranzisyon an kòmanse men anvan li fini .

Pou egzekite yon aksyon yon fwa tranzisyon an fini, ou ka koute evènman ki koresponn lan.

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

Anplis de sa , yo pral inyore yon apèl metòd sou yon eleman tranzisyon .

$('#myCarousel').on('slid.bs.carousel', function (e) {
  $('#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 !!

Anviwònman defo

Ou ka chanje paramèt defo pou yon plugin lè w modifye Constructor.Defaultobjè plugin a:

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

Pa gen konfli

Pafwa li nesesè pou itilize grefon Bootstrap ak lòt kad UI. Nan sikonstans sa yo, kolizyon espas non ka detanzantan rive. Si sa rive, ou ka rele .noConflictsou Plugin ou vle retounen valè a.

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

Nimewo vèsyon yo

Ou ka jwenn vèsyon an nan chak grefon jQuery Bootstrap la atravè VERSIONpwopriyete a nan konstrukteur plugin a. Pa egzanp, pou plugin tooltip la:

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

Pa gen bak espesyal lè JavaScript enfim

Plugins Bootstrap yo pa tonbe patikilyèman avèk gras lè JavaScript enfim. Si ou pran swen eksperyans itilizatè a nan ka sa a, sèvi ak <noscript>yo eksplike sitiyasyon an (ak ki jan yo re-aktive JavaScript) itilizatè ou yo, epi/oswa ajoute pwòp repwodiksyon koutim ou yo.

Utilisateur

Tout dosye JavaScript Bootstrap yo depann de util.jsepi li dwe enkli ansanm ak lòt dosye JavaScript yo. Si w ap itilize konpile a (oswa minified) bootstrap.js, pa gen okenn nesesite pou mete sa a—li deja la.

util.jsgen ladan fonksyon sèvis piblik ak yon asistan debaz pou transitionEndevènman ak yon Emulation tranzisyon CSS. Lòt grefon yo itilize li pou tcheke sipò tranzisyon CSS ak pou trape tranzisyon pandye yo.

Dezenfektan

Tooltips ak Popovers itilize dezenfektan entegre nou an pou dezenfekte opsyon ki aksepte HTML.

Valè default whiteListla se sa ki annapre yo:

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', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Si ou vle ajoute nouvo valè nan default sa a whiteListou ka fè bagay sa yo:

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)

Si ou vle kontoune dezenfektan nou an paske ou prefere sèvi ak yon bibliyotèk devwe, pa egzanp DOMPurify , ou ta dwe fè bagay sa yo:

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