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 mabalin a mangtignay 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 (e) {
  if (!data) return e.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 (e) {
  // 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 (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 !!

Dagiti default a setting

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

$.fn.modal.Constructor.Default.keyboard = false // changes default for the modal plugin's `keyboard` option to 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.1.3"

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.