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 (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.2.1"

Awan dagiti espesial a fallback no ti JavaScript ket nabalbaliwan

Bootstrap’s plugins don’t fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use <noscript> to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.

Util

All Bootstrap’s JavaScript files depend on util.js and it has to be included alongside the other JavaScript files. If you’re using the compiled (or minified) bootstrap.js, there is no need to include this—it’s already there.

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.