JavaScript a ɛwɔ hɔ no

Fa Bootstrap ba nkwa mu denam yɛn JavaScript plugins a wobɛpaw a wɔasisi wɔ jQuery so no so. Sua plugin biara ho ade, yɛn data ne programmatic API a wobɛpaw, ne nea ɛkeka ho.

Ankorankoro anaasɛ wɔaboaboa ano

Wobetumi de plugins aka ho mmiako mmiako (fa Bootstrap's individual js/dist/*.js), anaasɛ ne nyinaa prɛko pɛ de adi dwuma bootstrap.jsanaasɛ nea wɔayɛ no ketewaa bootstrap.min.js(mfa abien no nyinaa nka ho).

Sɛ wode bundler (Webpack, Rollup...) di dwuma a, wubetumi de /js/dist/*.jsfael ahorow a ɛyɛ UMD ayɛ krado adi dwuma.

Nneɛma a wɔde wɔn ho to so

Plugin ne CSS afã horow bi gyina plugins afoforo so. Sɛ wode plugins ka ho mmiako mmiako a, hwɛ hu sɛ wobɛhwɛ saa dependencies yi wɔ docs no mu. Afei nso hyɛ no nsow sɛ plugins nyinaa gyina jQuery so (eyi kyerɛ sɛ ɛsɛ sɛ wɔde jQuery ka ho ansa na plugin fael ahorow no aba). Hwɛ yɛnpackage.json na hwɛ jQuery nkyerɛase ahorow a wɔboa.

Yɛn dropdowns, popovers ne tooltips nso gyina Popper.js so .

Data su ahorow

Ɛkame ayɛ sɛ wobetumi ama Bootstrap plugins nyinaa ayɛ adwuma na wɔahyehyɛ no denam HTML nkutoo so a ɛwɔ data su ahorow (ɔkwan a yɛpɛ a yɛfa so de JavaScript dwumadi di dwuma). Hwɛ sɛ wode data su ahorow biako pɛ bedi dwuma wɔ element biako so (sɛ nhwɛso no, wuntumi nhyɛ adwinnade ti ne modal mfi bɔtn koro no ara mu.)

Nanso, wɔ tebea horow bi mu no, ebia ɛbɛyɛ papa sɛ wobɛma saa dwumadi yi ayɛ adwuma. Sɛ wopɛ sɛ wogyae data attribute API no a, yi nsɛm a esisi nyinaa wɔ krataa no so a wɔde data-apite sɛ saa:

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

Sɛnea ɛbɛyɛ a, sɛ wopɛ sɛ wode w’ani si plugin pɔtee bi so a, fa plugin no din ka ho kɛkɛ sɛ dinbea ka data-api dinbea no ho te sɛ eyi:

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

Nsɛm a esisi

Bootstrap ma amanneɛbɔ nsɛm a esisi ma plugins dodow no ara nneyɛe soronko. Mpɛn pii no, eyinom ba wɔ asɛmfua a enni awiei ne adeyɛ a atwam mu - baabi a wɔde asɛmfua a enni awiei (ex. show) no kanyan wɔ adeyɛ bi mfiase, na ne adeyɛ asɛm bi a atwam (ex. shown) no fi ase bere a adeyɛ bi awie no.

Nsɛm a esisi a enni awiei nyinaa ma wotumi preventDefault()yɛ adwuma. Eyi ma wotumi gyina adeyɛ bi a wɔyɛ no ano ansa na afi ase. Sɛ wosan de false fi event handler mu ba a, ɛno nso bɛfrɛ preventDefault().

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

Dwumadie API

Yɛsan nso gye di sɛ ɛsɛ sɛ wutumi de Bootstrap plugins nyinaa di dwuma denam JavaScript API no so ara kwa. Ɔmanfoɔ API nyinaa yɛ akwan baako, a wɔde nkɔnsɔnkɔnsɔn gu so, na ɛsan de nneɛma a wɔaboaboa ano a wɔayɛ ho adwuma no ba.

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

Ɛsɛ sɛ akwan nyinaa gye optional options ade, ahama a ɛde n’ani si ɔkwan pɔtee bi so, anaasɛ biribiara (a ɛhyɛ plugin ase a ɛwɔ default suban):

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

Plugin biara nso da ne raw constructor adi wɔ Constructoragyapade bi so: $.fn.popover.Constructor. Sɛ wopɛ sɛ wonya plugin nhwɛso pɔtee bi a, gye no tẽẽ fi element bi mu: $('[rel="popover"]').data('popover').

Asynchronous dwumadie ne nsakraeɛ

Programmatic API akwan nyinaa yɛ asynchronous na ɛsan kɔ nea ɔfrɛ no no nkyɛn bere a wɔafi ase nsakrae no nanso ansa na aba awiei .

Sɛnea ɛbɛyɛ a wobɛyɛ adeyɛ bi bere a nsakrae no awie no, wubetumi atie adeyɛ a ɛne no hyia no.

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

Nea ɛka ho no wobebu ani agu ɔkwan frɛ bi so wɔ nsakrae fã bi so .

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

Nsiesiei ahorow a wɔahyɛ da ayɛ

Wubetumi asesa nhyehyɛe a wɔahyɛ da ayɛ ama plugin bi denam plugin no Constructor.Defaultade a wobɛsesa no so:

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

Ntawntawdi biara nni hɔ

Ɛtɔ da bi a ɛho hia sɛ wode Bootstrap plugins di dwuma ne UI frameworks afoforo. Wɔ saa tebea horow yi mu no, edin-ahunmu nhyiam betumi aba bere ne bere mu. Sɛ eyi ba a, wubetumi afrɛ .noConflictplugin a wopɛ sɛ wosan de bo no ba no.

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

Nkyerɛase nɔma ahorow

Wobetumi afa VERSIONplugin no constructor no agyapade so akɔ Bootstrap jQuery plugins no mu biara nkyerɛase no so. Sɛ nhwɛso no, wɔ adwinnade ho nkyerɛkyerɛmu plugin no ho no:

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

Fallbacks titiriw biara nni hɔ bere a wɔagyae JavaScript no

Bootstrap no plugins no nkɔ akyi titiriw gracefully bere a JavaScript ayɛ adwuma no. Sɛ wodwene dwumadiefoɔ suahunu ho wɔ saa asɛm yi mu a, fa <noscript>kyerɛkyerɛ tebea no mu (ne sɛdeɛ wobɛsan ama JavaScript ayɛ adwuma) ama wo dwumadiefoɔ, ne/anaasɛ fa w’ankasa wo custom fallbacks ka ho.

Util

Bootstrap JavaScript fael nyinaa gyina so util.jsna ɛsɛ sɛ wɔde ka JavaScript fael afoforo no ho. Sɛ wode compiled (anaasɛ minified) no redi dwuma a bootstrap.js, ɛho nhia sɛ wode eyi bɛka ho—ɛwɔ hɔ dedaw.

util.jsde mfasoɔ dwumadie ne ɔboafoɔ titire ma nsɛm a transitionEndɛsisi ne CSS nsakraeɛ emulator ka ho. Plugin afoforo no de di dwuma de hwɛ CSS nsakrae mmoa na ɛkyere nsakrae a ɛsensɛn hɔ.

Nneɛma a wɔde tew nneɛma ho

Tooltips ne Popovers de yɛn sanitizer a wɔasisi no di dwuma de sanitize options a egye HTML.

Default whiteListvalue no ne nea edidi so yi:

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

Sɛ wopɛ sɛ wode values ​​foforo ka default yi whiteListho a wubetumi ayɛ nea edidi so yi:

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)

Sɛ wopɛ sɛ wutwa yɛn sanitizer no ho esiane sɛ wopɛ sɛ wode nhomakorabea a wɔatu ho ama di dwuma nti, sɛ nhwɛso no DOMPurify , ɛsɛ sɛ woyɛ nea edidi so yi:

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