JavaScript
Jepni Bootstrap në jetë me shtojcat tona opsionale JavaScript të ndërtuara në jQuery. Mësoni për çdo shtojcë, të dhënat tona dhe opsionet programatike API dhe më shumë.
Individuale ose të përpiluara
Shtojcat mund të përfshihen individualisht (duke përdorur individualin e Bootstrap js/dist/*.js
), ose të gjitha menjëherë duke përdorur bootstrap.js
ose të minuar bootstrap.min.js
(mos i përfshini të dyja).
Nëse përdorni një paketues (Webpack, Përmbledhje…), mund të përdorni /js/dist/*.js
skedarë që janë gati UMD.
varësitë
Disa shtojca dhe komponentë CSS varen nga shtojcat e tjera. Nëse përfshini shtojcat individualisht, sigurohuni që të kontrolloni për këto varësi në dokumente. Gjithashtu vini re se të gjitha shtojcat varen nga jQuery (kjo do të thotë se jQuery duhet të përfshihet përpara skedarëve të shtojcave). Konsultohuni me nepackage.json
për të parë se cilat versione të jQuery mbështeten.
Zbritja, popover-et dhe këshillat tona të veglave varen gjithashtu nga Popper.js .
Atributet e të dhënave
Pothuajse të gjitha shtojcat e Bootstrap mund të aktivizohen dhe konfigurohen vetëm përmes HTML me atributet e të dhënave (mënyra jonë e preferuar për të përdorur funksionalitetin JavaScript). Sigurohuni që të përdorni vetëm një grup atributesh të dhënash në një element të vetëm (p.sh., nuk mund të aktivizoni një këshillë mjeti dhe modal nga i njëjti buton.)
Megjithatë, në disa situata mund të jetë e dëshirueshme të çaktivizoni këtë funksion. Për të çaktivizuar API-në e atributit të të dhënave, shkëputni të gjitha ngjarjet në hapësirën e emrave të dokumentit me data-api
si më poshtë:
$(document).off('.data-api')
Përndryshe, për të synuar një shtojcë specifike, thjesht përfshini emrin e shtojcës si një hapësirë emri së bashku me hapësirën e emrave të të dhënave-api si kjo:
$(document).off('.alert.data-api')
Përzgjedhës
Aktualisht, për të kërkuar elementë DOM, ne përdorim metodat origjinale querySelector
dhe querySelectorAll
për arsye të performancës, kështu që ju duhet të përdorni përzgjedhës të vlefshëm . Nëse përdorni përzgjedhës të veçantë, për shembull: collapse:Example
sigurohuni që t'i shmangni.
Ngjarjet
Bootstrap ofron ngjarje të personalizuara për shumicën e veprimeve unike të shtojcave. Në përgjithësi, këto vijnë në një formë të paskajores dhe të paskajores - ku infinitivi (sh. show
) shkaktohet në fillim të një ngjarjeje dhe forma e tij e paskajores (p.sh. ) shown
nxitet në përfundimin e një veprimi.
Të gjitha ngjarjet infinitive ofrojnë preventDefault()
funksionalitet. Kjo siguron mundësinë për të ndaluar ekzekutimin e një veprimi përpara se të fillojë. Kthimi i "false" nga një mbajtës i ngjarjeve do të telefonojë gjithashtu automatikisht preventDefault()
.
$('#myModal').on('show.bs.modal', function (event) {
if (!data) {
return event.preventDefault() // stops modal from being shown
}
})
API programatike
Ne gjithashtu besojmë se duhet të jeni në gjendje të përdorni të gjitha shtojcat e Bootstrap thjesht përmes API-së JavaScript. Të gjitha API-të publike janë metoda të vetme, të lidhura me zinxhirë dhe e kthejnë koleksionin sipas të cilit është vepruar.
$('.btn.danger').button('toggle').addClass('fat')
Të gjitha metodat duhet të pranojnë një objekt opsionesh opsionale, një varg që synon një metodë të caktuar ose asgjë (që fillon një shtojcë me sjellje të paracaktuar):
$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately
Çdo shtojcë gjithashtu ekspozon konstruktorin e saj të papërpunuar në një Constructor
pronë: $.fn.popover.Constructor
. Nëse dëshironi të merrni një shembull të veçantë të shtojcave, merrni atë drejtpërdrejt nga një element: $('[rel="popover"]').data('popover')
.
Funksionet dhe tranzicionet asinkrone
Të gjitha metodat programatike API janë asinkrone dhe kthehen te thirrësi sapo të fillojë tranzicioni, por përpara se të përfundojë .
Për të ekzekutuar një veprim pasi të ketë përfunduar tranzicioni, mund të dëgjoni ngjarjen përkatëse.
$('#myCollapse').on('shown.bs.collapse', function (event) {
// Action to execute once the collapsible area is expanded
})
Përveç kësaj, një thirrje metodë në një komponent në tranzicion do të shpërfillet .
$('#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 !!
Cilësimet e parazgjedhura
Ju mund të ndryshoni cilësimet e paracaktuara për një shtesë duke modifikuar Constructor.Default
objektin e shtojcës:
// changes default for the modal plugin's `keyboard` option to false
$.fn.modal.Constructor.Default.keyboard = false
Asnjë konflikt
Ndonjëherë është e nevojshme të përdoren shtojcat Bootstrap me korniza të tjera UI. Në këto rrethana, herë pas here mund të ndodhin përplasje të hapësirës së emrave. Nëse kjo ndodh, mund të telefononi .noConflict
shtojcën që dëshironi të ktheni vlerën.
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
Numrat e versioneve
Versioni i secilës prej shtojcave jQuery të Bootstrap mund të aksesohet nëpërmjet VERSION
vetive të konstruktorit të shtojcave. Për shembull, për shtojcën e këshillës së veglave:
$.fn.tooltip.Constructor.VERSION // => "4.6.2"
Nuk ka kthime të veçanta kur JavaScript është i çaktivizuar
Shtojcat e Bootstrap nuk kthehen veçanërisht me hijeshi kur JavaScript është i çaktivizuar. Nëse ju intereson përvoja e përdoruesit në këtë rast, përdorni <noscript>
për të shpjeguar situatën (dhe si të riaktivizoni JavaScript) përdoruesve tuaj dhe/ose shtoni kthimet tuaja të personalizuara.
Bibliotekat e palëve të treta
Bootstrap nuk mbështet zyrtarisht bibliotekat JavaScript të palëve të treta si Prototype ose jQuery UI. Pavarësisht nga .noConflict
ngjarjet dhe me hapësirën e emrave, mund të ketë probleme të përputhshmërisë që duhet t'i rregulloni vetë.
Util
Të gjithë skedarët JavaScript të Bootstrap varen util.js
dhe duhet të përfshihen së bashku me skedarët e tjerë JavaScript. Nëse jeni duke përdorur të përpiluar (ose të minuar) bootstrap.js
, nuk ka nevojë ta përfshini këtë - është tashmë aty.
util.js
përfshin funksione të shërbimeve dhe një ndihmës bazë për transitionEnd
ngjarjet, si dhe një emulator të tranzicionit CSS. Përdoret nga shtojcat e tjera për të kontrolluar mbështetjen e tranzicionit CSS dhe për të kapur tranzicionet e varura.
Dezinfektues
Këshillat e veglave dhe Popover-at përdorin dezinfektuesin tonë të integruar për të dezinfektuar opsionet që pranojnë HTML.
Vlera e paracaktuar whiteList
është si më poshtë:
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: []
}
Nëse dëshironi të shtoni vlera të reja në këtë parazgjedhje whiteList
, mund të bëni sa më poshtë:
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)
Nëse dëshironi të anashkaloni dezinfektuesin tonë sepse preferoni të përdorni një bibliotekë të dedikuar, për shembull DOMPurify , duhet të bëni sa më poshtë:
$('#yourTooltip').tooltip({
sanitizeFn: function (content) {
return DOMPurify.sanitize(content)
}
})