JavaScript
Zisa iBootstrap ebomini ngeeplagi zethu ozikhethelayo zeJavaScript ezakhelwe kwijQuery. Funda malunga neplagin nganye, idatha yethu kunye nokhetho lweprogram ye-API, kunye nokunye.
Umntu ngamnye okanye uqokelelwe
Iiplagi zingabandakanywa ngabanye (usebenzisa iBootstrap's individual js/dist/*.js
), okanye zonke ngaxeshanye usebenzisa bootstrap.js
okanye iminified bootstrap.min.js
(ungaquki zombini).
Ukuba usebenzisa i-bundler (i-Webpack, i-Rollup…), unokusebenzisa /js/dist/*.js
iifayile ezisele zilungile i-UMD.
Ukuxhomekeka
Ezinye iiplagi kunye namalungu eCSS axhomekeke kwezinye iiplagi. Ukuba ubandakanya ii-plugins nganye, qiniseka ukuba ukhangele ezi zixhomekeke kumaxwebhu. Kwakhona qaphela ukuba zonke iiplagi zixhomekeke kwijQuery (oku kuthetha ukuba i-jQuery kufuneka ifakwe phambi kweefayile zeplagin). Qhagamshelana nathipackage.json
ukuze ubone ukuba zeziphi iinguqulelo zejQuery ezixhaswayo.
Iidrophu zethu, iipopovers kunye netooltips nazo zixhomekeke kwiPopper.js .
Iimpawu zedatha
Phantse zonke iiplagi ze-Bootstrap zinokwenziwa kwaye ziqwalaselwe nge-HTML yodwa ngeempawu zedatha (indlela yethu esiyithandayo yokusebenzisa ukusebenza kweJavaScript). Qiniseka ukuba usebenzisa kuphela iseti enye yeempawu zedatha kwinto enye (umzekelo, awukwazi ukuvusa ingcebiso yesixhobo kunye nemodali ukusuka kwiqhosha elifanayo.)
Nangona kunjalo, kwezinye iimeko kunokunqweneleka ukuvala lo msebenzi. Ukukhubaza uphawu loyelelwano lwedatha, khulula zonke iziganeko kuxwebhu olunezithuba data-api
ezilolo hlobo:
$(document).off('.data-api')
Kungenjalo, ukujolisa iplagin ethile, faka nje igama leplagi njengendawo yegama kunye ne-data-api namespace efana nale:
$(document).off('.alert.data-api')
Abakhethi
Okwangoku ukubuza izinto zeDOM sisebenzisa iindlela zomthonyama querySelector
kunye querySelectorAll
nezizathu zokusebenza, ke kufuneka usebenzise abakhethi abasebenzayo . Ukuba usebenzisa abakhethi abakhethekileyo, umzekelo: collapse:Example
qiniseka ukuba uyabaleka.
Iziganeko
I-Bootstrap ibonelela ngeziganeko zesiko kwiintshukumo ezininzi ezizodwa zeeplagi. Ngokuqhelekileyo, ezi ziza ngendlela engapheliyo kunye neyexesha elidlulileyo - apho i-infinitive (umz. show
) iqaliswa ekuqaleni kwesiganeko, kwaye imo yaso yexesha elidlulileyo ye-participle (umz. shown
) ivuselelwe ekugqityweni kwesenzo.
Zonke iziganeko ezingapheliyo zibonelela preventDefault()
ngokusebenza. Oku kubonelela ukukwazi ukumisa ukuphunyezwa kwesenzo phambi kokuba siqale. Ukubuyisa okungeyonyani kumphathi wesiganeko nako kuyakufowunela ngokuzenzekelayo preventDefault()
.
$('#myModal').on('show.bs.modal', function (event) {
if (!data) {
return event.preventDefault() // stops modal from being shown
}
})
Programmatic API
Sikwakholelwa ukuba kufuneka ukwazi ukusebenzisa zonke iiplagi zeBootstrap ngeJavaScript API. Zonke ii-API zikawonke-wonke zinye, iindlela ezibolekwayo, kwaye zibuyisela ingqokelela eyenziwayo.
$('.btn.danger').button('toggle').addClass('fat')
Zonke iindlela kufuneka zamkele into ekhethiweyo yeenketho, umtya ojolise kwindlela ethile, okanye akukho nto (eqalisa iplagin ngokuziphatha okungagqibekanga):
$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately
I-plugin nganye iphinda iveze umakhi wayo ekrwada Constructor
kwipropati: $.fn.popover.Constructor
. Ukuba ungathanda ukufumana umzekelo othile weplagi, yifumane ngokuthe ngqo kwinto: $('[rel="popover"]').data('popover')
.
Imisebenzi yeAsynchronous kunye notshintsho
Zonke iindlela zeprogram ye-API zi -asynchronous kwaye zibuyela kumnxeba nje ukuba utshintsho luqalisiwe kodwa ngaphambi kokuba luphele .
Ukuze wenze isenzo xa utshintsho lugqityiwe, ungamamela isiganeko esihambelanayo.
$('#myCollapse').on('shown.bs.collapse', function (event) {
// Action to execute once the collapsible area is expanded
})
Ukongeza umnxeba wendlela kwicandelo lotshintsho awuyi kuhoywa .
$('#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 !!
Useto oluhlala lukhona
Ungatshintsha useto olungagqibekanga lweplagi ngokulungisa Constructor.Default
into yeplagin:
// changes default for the modal plugin's `keyboard` option to false
$.fn.modal.Constructor.Default.keyboard = false
Akukho ngquzulwano
Ngamanye amaxesha kuyimfuneko ukusebenzisa iiplagi ze-Bootstrap kunye nezinye izikhokelo ze-UI. Kwezi meko, ukungqubana kwesithuba segama kunokwenzeka ngamanye amaxesha. Ukuba oku kuyenzeka, .noConflict
ungafowunela iplagin onqwenela ukubuyisela ixabiso layo.
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
Amanani enguqulelo
Uguqulelo lweplagi nganye yeBootstrap's jQuery inokufikelelwa VERSION
ngepropathi yomakhi weplagi. Umzekelo, kwi-plugin yengcebiso yesixhobo:
$.fn.tooltip.Constructor.VERSION // => "4.6.2"
Akukho mpazamo zikhethekileyo xa iJavaScript ivaliwe
Iiplagi zeBootstrap azibuyeli ngasemva ngokukodwa xa iJavaScript ivaliwe. Ukuba unenkathalo ngamava omsebenzisi kule meko, sebenzisa <noscript>
ukuchaza imeko (kunye nendlela yokwenza kwakhona iJavaScript) kubasebenzisi bakho, kunye/okanye ukongeza okwakho ukusilela.
Amathala eencwadi eqela lesithathu
I-Bootstrap ayizixhasi ngokusemthethweni iilayibrari zeJavaScript zomntu wesithathu njengePrototype okanye i-jQuery UI. Ngaphandle .noConflict
kweziganeko ezinamagama, kusenokubakho iingxaki zokuhambelana ekufuneka uzilungise wedwa.
Util
Zonke iifayile zeJavaScript zeBootstrap zixhomekeke util.js
kwaye kufuneka zibandakanywe ecaleni kwezinye iifayile zeJavaScript. Ukuba usebenzisa i compiled (okanye minified) bootstrap.js
, akukho mfuneko yokubandakanya oku-sele kukho.
util.js
ibandakanya imisebenzi eluncedo kunye nomncedisi osisiseko wemisitho transitionEnd
kunye ne-emulator yenguqu ye-CSS. Isetyenziswa zezinye iiplagi ukukhangela inkxaso yenguqu yeCSS nokubamba iinguqu ezijingayo.
Isicoci
Iingcebiso zezixhobo kunye neePopovers zisebenzisa isicoci esakhelwe ngaphakathi ukucoca iinketho ezamkela iHTML.
Ixabiso elimiselweyo whiteList
lilandelayo:
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: []
}
Ukuba ufuna ukongeza amaxabiso amatsha koku kungagqibekanga whiteList
ungenza oku kulandelayo:
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)
Ukuba ufuna ukudlula kwi-sanitizer yethu kuba ukhetha ukusebenzisa ithala leencwadi elizinikeleyo, umzekelo DOMpurify , kuya kufuneka wenze oku kulandelayo:
$('#yourTooltip').tooltip({
sanitizeFn: function (content) {
return DOMPurify.sanitize(content)
}
})