JavaScript

Leeta Bootstrap mu bulamu ne JavaScript plugins zaffe ez'okwesalirawo ezizimbibwa ku jQuery. Manya ebikwata ku buli plugin, data yaffe ne programmatic API options, n'ebirala.

Kinoomu oba ekikuŋŋaanyiziddwa

Plugins zisobola okuteekebwamu kinnoomu (nga okozesa Bootstrap's individual js/dist/*.js), oba zonna omulundi gumu nga okozesa bootstrap.jsoba ezikendeezeddwa bootstrap.min.js(tossaamu byombi).

Bw’oba ​​okozesa bundler (Webpack, Rollup...), osobola okukozesa /js/dist/*.jsfayiro eziri nga zeetegefu UMD.

Ebisinziirwako

Plugins ezimu n'ebitundu bya CSS byesigamye ku plugins endala. Bw'oba ossaamu plugins kinnoomu, kakasa nti okebera bino ebisinziirako mu docs. Era weetegereze nti plugins zonna zeesigamye ku jQuery (kino kitegeeza nti jQuery erina okuteekebwamu nga fayiro za plugin tezinnabaawo). Weebuuze ku yaffepackage.json olabe enkyusa ki eza jQuery eziwagirwa.

Ebitundu byaffe ebigwa, popovers n'ebikozesebwa nabyo byesigamye ku Popper.js .

Ebintu ebikwata ku data

Kumpi plugins zonna eza Bootstrap zisobola okusobozesa n’okusengekebwa okuyita mu HTML yokka nga zirina data attributes (engeri gye twagala okukozesaamu enkola ya JavaScript). Kakasa nti okozesa ekibinja kimu kyokka eky'ebintu bya data ku elementi emu (okugeza, tosobola kutandika tooltip ne modal okuva ku button y'emu.)

Naye mu mbeera ezimu kiyinza okuba ekirungi okulemesa omulimu guno. Okulemesa API attribute ya data, ggyamu ebibaddewo byonna ku kiwandiiko namespaced ne data-apilike so:

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

Ekirala, okutunuulira plugin eyeetongodde, ssaamu erinnya lya plugin nga ekifo ky'amannya wamu n'ekifo ky'amannya kya data-api nga kino:

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

Ebibaddewo

Bootstrap egaba ebibaddewo eby'enjawulo ku bikolwa eby'enjawulo ebya plugins ebisinga obungi. Okutwalira awamu, bino bijja mu ngeri etaliiko nkomerero n’ennyiriri eziyise - nga ekintu ekitaliiko nkomerero (ex. show) kitandikibwawo ku ntandikwa y’ekintu ekibaawo, ate engeri yaakyo ey’ekitundu ekiyise (ex. shown) n’etandika nga ekikolwa kiwedde.

Ebintu byonna ebibaawo ebitaliiko nkomerero biwa preventDefault()enkola. Kino kiwa obusobozi okuyimiriza okukola ekikolwa nga tekinnatandika. Okuzzaayo false okuva ku event handler nakyo kijja kuyita otomatika preventDefault().

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

API ya pulogulaamu

Era tukkiriza nti olina okusobola okukozesa Bootstrap plugins zonna okuyita mu JavaScript API yokka. API zonna ez'olukale nkola emu, eziteekebwako enjegere, era zizzaayo okukung'aanya okwakolebwako.

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

Enkola zonna zirina okukkiriza ekintu eky'okulonda eky'okwesalirawo, olunyiriri olugenderera enkola entongole, oba tewali kintu kyonna (ekitandika plugin n'enneeyisa eya bulijjo):

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

Buli plugin era eraga constructor yaayo embisi ku Constructorproperty: $.fn.popover.Constructor. Bw'oba oyagala okufuna ekifaananyi kya plugin ekimu, kiggye butereevu okuva mu elementi: $('[rel="popover"]').data('popover').

Emirimu egitakwatagana n’enkyukakyuka

Enkola zonna eza programmatic API zibeera za asynchronous era zidda eri oyo ayita oluvannyuma lw'enkyukakyuka okutandika naye nga tennaggwa .

Okusobola okukola ekikolwa ng’enkyukakyuka ewedde, osobola okuwuliriza ekintu ekikwatagana.

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

Okugatta ku ekyo okuyita enkola ku kitundu ekikyukakyuka kujja kubuusibwa amaaso .

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

Enteekateeka ezisookerwako

Osobola okukyusa ensengeka ezisookerwako eza plugin nga okyusa Constructor.Defaultekintu kya plugin:

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

Tewali butakkaanya

Oluusi kyetaagisa okukozesa Bootstrap plugins ne UI frameworks endala. Mu mbeera zino, okutomeragana kw'ekifo ky'amannya kuyinza okubaawo oluusi n'oluusi. Kino bwe kibaawo, oyinza okuyita .noConflictku plugin gy’oyagala okuzzaawo omuwendo gwayo.

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

Ennamba z’enkyusa

Enkyusa ya buli emu ku jQuery plugins za Bootstrap esobola okuyingizibwa ng'oyita mu VERSIONby'obugagga by'omuzimbi wa plugin. Okugeza, ku plugin ya tooltip:

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

Tewali kugwa kwa njawulo nga JavaScript eremeddwa

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.jsmulimu emirimu egy’omugaso n’omuyambi omukulu eri transitionEndebibaawo wamu n’ekikoppa enkyukakyuka ya CSS. Ekozesebwa plugins endala okukebera obuwagizi bw'enkyukakyuka ya CSS n'okukwata enkyukakyuka eziwaniridde.