JavaScript
Oživite Bootstrap z našimi izbirnimi vtičniki JavaScript, zgrajenimi na jQuery. Izvedite več o vsakem vtičniku, naših podatkovnih in programskih možnostih API-ja in več.
Posamezno ali sestavljeno
Vtičnike je mogoče vključiti posamično (z uporabo individualnega Bootstrapa js/dist/*.js
) ali vse naenkrat z uporabo bootstrap.js
ali pomanjšanim bootstrap.min.js
(ne vključujte obojega).
Če uporabljate povezovalnik (Webpack, Rollup ...), lahko uporabite /js/dist/*.js
datoteke, ki so pripravljene za UMD.
Odvisnosti
Nekateri vtičniki in komponente CSS so odvisni od drugih vtičnikov. Če dodate vtičnike posamezno, preverite te odvisnosti v dokumentih. Upoštevajte tudi, da so vsi vtičniki odvisni od jQuery (to pomeni, da mora biti jQuery vključen pred datotekami vtičnikov). Posvetujte se z našimipackage.json
, da vidite, katere različice jQuery so podprte.
Naši spustni meniji, pojavna okna in opisi orodij so prav tako odvisni od Popper.js .
Atributi podatkov
Skoraj vse vtičnike Bootstrap je mogoče omogočiti in konfigurirati samo prek HTML s podatkovnimi atributi (naš najprimernejši način uporabe funkcije JavaScript). Prepričajte se, da uporabljate samo en nabor podatkovnih atributov na posameznem elementu (npr. ne morete sprožiti namiga orodja in modala z istega gumba.)
Vendar je v nekaterih situacijah morda zaželeno onemogočiti to funkcijo. Če želite onemogočiti API podatkovnega atributa, razvežite vse dogodke v imenskem prostoru dokumenta data-api
takole:
$(document).off('.data-api')
Druga možnost je, da ciljate na določen vtičnik, samo vključite ime vtičnika kot imenski prostor skupaj z imenskim prostorom data-api, kot je ta:
$(document).off('.alert.data-api')
Selektorji
Trenutno za poizvedovanje po elementih DOM uporabljamo izvorne metode querySelector
in querySelectorAll
zaradi zmogljivosti, zato morate uporabiti veljavne izbirnike . Če uporabljate posebne izbirnike, na primer: collapse:Example
ne pozabite jim uiti.
Dogodki
Bootstrap ponuja dogodke po meri za večino edinstvenih dejanj vtičnikov. Na splošno so ti v obliki nedoločnika in deležnika preteklosti – kjer se nedoločnik (npr. show
) sproži na začetku dogodka, njegova oblika preteklosti deležnika (npr. shown
) pa se sproži ob zaključku dejanja.
Vsi nedoločni dogodki zagotavljajo preventDefault()
funkcionalnost. To omogoča, da ustavite izvajanje dejanja, preden se začne. Če obravnavalec dogodkov vrne false, bo tudi samodejno poklical preventDefault()
.
$('#myModal').on('show.bs.modal', function (event) {
if (!data) {
return event.preventDefault() // stops modal from being shown
}
})
Programski API
Prav tako verjamemo, da bi morali imeti možnost uporabljati vse vtičnike Bootstrap zgolj prek JavaScript API-ja. Vsi javni API-ji so enojne metode, ki jih je mogoče verižiti, in vrnejo zbirko, po kateri je ukrepal.
$('.btn.danger').button('toggle').addClass('fat')
Vse metode morajo sprejeti izbirni predmet možnosti, niz, ki cilja na določeno metodo, ali nič (kar sproži vtičnik s privzetim vedenjem):
$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately
Vsak vtičnik izpostavi tudi svoj neobdelani konstruktor v Constructor
lastnosti: $.fn.popover.Constructor
. Če želite dobiti določen primerek vtičnika, ga pridobite neposredno iz elementa: $('[rel="popover"]').data('popover')
.
Asinhrone funkcije in prehodi
Vse programske metode API so asinhrone in se vrnejo klicatelju, ko se prehod začne, vendar preden se konča .
Če želite izvesti dejanje, ko je prehod končan, lahko poslušate ustrezen dogodek.
$('#myCollapse').on('shown.bs.collapse', function (event) {
// Action to execute once the collapsible area is expanded
})
Poleg tega bo prezrt klic metode prehodne komponente .
$('#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 !!
Privzete nastavitve
Privzete nastavitve za vtičnik lahko spremenite tako, da spremenite predmet vtičnika Constructor.Default
:
// changes default for the modal plugin's `keyboard` option to false
$.fn.modal.Constructor.Default.keyboard = false
Brez konflikta
Včasih je treba uporabiti vtičnike Bootstrap z drugimi okviri uporabniškega vmesnika. V teh okoliščinah lahko občasno pride do kolizij imenskega prostora. Če se to zgodi, lahko pokličete .noConflict
vtičnik, katerega vrednost želite razveljaviti.
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
Številke različic
Do različice vsakega od Bootstrapovih vtičnikov jQuery je mogoče dostopati prek VERSION
lastnosti konstruktorja vtičnika. Na primer za vtičnik orodnih namigov:
$.fn.tooltip.Constructor.VERSION // => "4.6.2"
Ni posebnih nadomestnih možnosti, ko je JavaScript onemogočen
Bootstrapovi vtičniki se ne vrnejo posebej elegantno, ko je JavaScript onemogočen. Če vam je mar za uporabniško izkušnjo v tem primeru, uporabite, <noscript>
da svojim uporabnikom pojasnite situacijo (in kako znova omogočiti JavaScript) in/ali dodajte lastne nadomestne možnosti po meri.
Knjižnice tretjih oseb
Bootstrap uradno ne podpira knjižnic JavaScript tretjih oseb, kot sta Prototype ali jQuery UI. Kljub .noConflict
dogodkom in imenskim prostorom lahko pride do težav z združljivostjo, ki jih morate odpraviti sami.
Util
Vse datoteke JavaScript Bootstrapa so odvisne util.js
in jih je treba vključiti skupaj z drugimi datotekami JavaScript. Če uporabljate prevedeno (ali zmanjšano) bootstrap.js
, tega ni treba vključiti – že je tam.
util.js
vključuje pomožne funkcije in osnovni pomočnik za transitionEnd
dogodke ter emulator prehoda CSS. Uporabljajo ga drugi vtičniki za preverjanje podpore za prehode CSS in za lovljenje visečih prehodov.
Razkužilo
Namigi orodij in pojavni elementi uporabljajo naš vgrajeni čistilec za čiščenje možnosti, ki sprejemajo HTML.
Privzeta whiteList
vrednost je naslednja:
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: []
}
Če želite tej privzeti vrednosti dodati nove vrednosti whiteList
, lahko storite naslednje:
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)
Če želite zaobiti naš sanitizer, ker raje uporabljate namensko knjižnico, na primer DOMPurify , storite naslednje:
$('#yourTooltip').tooltip({
sanitizeFn: function (content) {
return DOMPurify.sanitize(content)
}
})