JavaScript nga Pagsasao

Iyeg ti Bootstrap iti biag babaen kadagiti opsional a JavaScript a pluginmi a naibangon iti jQuery. Ammuem ti maipapan iti tunggal plugin, dagiti pagpilianmi iti datos ken programatiko nga API, ken dadduma pay.

Indibidual wenno naurnong

Dagiti plugin ket mabalin a mairaman a saggaysa (nga agus-usar ti indibidual ti Bootstrap js/dist/*.js), wenno amin a maminsan nga agus -usar bootstrap.jswenno ti napabassit bootstrap.min.js(saan nga iraman dagitoy a dua).

No agusarka ti bundler (Webpack, Rollup...), mabalinmo nga usaren /js/dist/*.jsdagiti file a nakasagana iti UMD.

Dagiti panagpannuray

Dadduma a plugin ken dagiti paset ti CSS ket agpannuray kadagiti dadduma a plugin. No iramanmo dagiti plugin a saggaysa, siguraduem a kitaen dagitoy a panagpanpanunot kadagiti dok. Imutektekanyo pay nga amin a plugin ket agpannuray iti jQuery (kayatna a sawen a ti jQuery ket masapul a mairaman sakbay dagiti plugin a papeles). Konsultaen ti mipackage.json tapno makita no ania dagiti bersion ti jQuery a nasuportaran.

Agpannuray met dagiti dropdown, popovers ken tooltips-tayo iti Popper.js .

Dagiti kababalin ti datos

Dandani amin a plugin ti Bootstrap ket mabalin a mapalubosan ken maikonfigura babaen ti HTML nga agmaymaysa nga addaan kadagiti attribute ti datos (ti kaykayatmi a wagas ti panagusar ti panagusar ti JavaScript). Siguraduen nga agusar laeng ti maysa a grupo dagiti kababalin ti datos iti maymaysa nga elemento (kas pagarigan, saanmo a mai-trigger ti tooltip ken modal manipud iti isu met laeng a buton.)

Nupay kasta, iti dadduma a kasasaad mabalin a matarigagayan a balbaliwan daytoy a panagandar. Tapno mapasardeng ti API ti attribute ti datos, i-unbind amin a pasamak iti dokumento a namespaced iti data-apikas iti kasta:

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

Saan laeng a dayta, tapno puntiriaen ti espesipiko a plugin, iraman laeng ti nagan ti plugin a kas maysa nga espasio ti nagan agraman ti espasio ti nagan ti data-api a kas iti daytoy:

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

Dagiti Pasamak

Ti Bootstrap ket mangipaay kadagiti kostumbre a pasamak para kadagiti kaaduan a naisangayan nga aramid dagiti plugin. Sapasap, dagitoy ket umay iti maysa nga infinitibo ken napalabas a partisipio a porma - a ti infinitibo (ex. show) ket maitignay iti rugi ti maysa a pasamak, ken ti napalabas a partisipio a pormana (ex. shown) ket maitignay iti pannakaileppas ti maysa nga aramid.

Amin nga infinitibo a pasamak ket mangipaay preventDefault()ti panagusar. Daytoy ket mangipaay ti abilidad a mangpasardeng ti pannakaipatungpal ti maysa nga aramid sakbay a mangrugi daytoy. Ti panagsubli ti palso manipud iti maysa a managtengngel ti pasamak ket automatiko pay nga awagan preventDefault()ti .

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

Programmatiko nga API

Patienmi pay a rumbeng a kabaelam nga usaren amin a plugin ti Bootstrap a puro babaen ti JavaScript API. Amin dagiti publiko nga API ket agmaymaysa, makadena a pamay-an, ken mangisubli ti koleksion a nagtignay.

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

Amin a pamay-an ket rumbeng nga umawat ti maysa nga opsional a banag ti pagpilian, ti maysa a kuerdas a mangpuntiria ti partikular a pamay-an, wenno awan (a mangirugi ti plugin nga addaan iti kasisigud a kababalin):

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

Tunggal plugin ket mangibutaktak pay ti raw constructor na iti maysa a Constructortagikua: $.fn.popover.Constructor. No kayatmo ti makaala ti partikular a pagarigan ti plugin, alaem a direkta manipud iti maysa nga elemento: $('[rel="popover"]').data('popover').

Dagiti asynchronous a panagandar ken dagiti panagbalbaliw

Amin dagiti programatiko a pamay-an ti API ket asynchronous ken agsubli iti tumawag apaman a mairugi ti panagbalbaliw ngem sakbay nga agpatingga .

Tapno maipatungpal ti maysa nga aramid apaman a malpas ti panagbalbaliw, mabalinmo a denggen ti maitutop a pasamak.

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

Iti pay maipatinayon ti maysa a pamay-an nga awag iti maysa a panagbalbaliw a paset ket mailaksidto .

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

Dagiti default a setting

Mabalinmo a baliwan dagiti kasisigud a panagitunos para iti maysa a plugin babaen ti panangbalbaliw ti Constructor.Defaultbanag ti plugin:

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

Awan ti panagsusupiat

No dadduma ket kasapulan nga agusar kadagiti plugin ti Bootstrap kadagiti dadduma a balangkas ti UI. Kadagitoy a kasasaad, dagiti panagdinnungpar ti namespace ket mabalin a sagpaminsan a mapasamak. No mapasamak daytoy, mabalinmo nga awagan .noConflictti plugin a kayatmo nga isublin ti pategna.

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

Dagiti numero ti bersion

Ti bersion ti tunggal maysa kadagiti plugin ti jQuery ti Bootstrap ket mabalin a mastrek babaen ti VERSIONtagikua ti konstruktor ti plugin. Kas pagarigan, para iti plugin ti tooltip:

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

Awan dagiti espesial a fallback no ti JavaScript ket nabalbaliwan

Dagiti plugin ti Bootstrap ket saan a matnag nga agsubli a partikular a grasia no ti JavaScript ket nabalbaliwan. No maseknanka iti padas ti agar-aramat iti daytoy a kaso, usarem <noscript>a mangilawlawag ti kasasaad (ken no kasano nga ipalubos manen ti JavaScript) kadagiti agar-aramatmo, ken/wenno manginayon kadagiti bukodmo a kostumbre a fallback.

Util nga

Amin a JavaScript a file ti Bootstrap ket agpannuray util.jsken masapul a mairaman daytoy a kadua dagiti dadduma a JavaScript a file. No agus-usarkayo iti naurnong (wenno napabassit) bootstrap.js, saan a kasapulan nga iraman daytoy—addan dayta.

util.jsiramanna dagiti panagandar ti utilidad ken ti batayan a katulongan para kadagiti transitionEndpasamak ken kasta met ti maysa nga emulator ti panagbalbaliw ti CSS. Daytoy ket us-usaren babaen dagiti sabali a plugin tapno mangsukimat ti suporta ti panagbalbaliw ti CSS ken tapno makatiliw kadagiti agbitin a panagbalbaliw.

Sanitizer nga

Dagiti Tooltips ken Popovers ket agus-usar ti built-in a sanitizer tayo tapno ma-sanitize dagiti pagpilian nga umawat ti HTML.

Ti default a whiteListpateg ket ti sumaganad:

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

No kayatmo ti manginayon kadagiti baro a pateg iti daytoy a default whiteListmabalinmo nga aramiden dagiti sumaganad:

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)

No kayatmo a liklikan ti sanitizer-mi gapu ta kaykayatmo ti agusar iti dedikado a libraria, kas pagarigan ti DOMPurify , rumbeng nga aramidem dagiti sumaganad:

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