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.jsali pomanjšanim bootstrap.min.js(ne vključujte obojega).

Če uporabljate povezovalnik (Webpack, Rollup ...), lahko uporabite /js/dist/*.jsdatoteke, 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-apitakole:

$(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')

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 deležnika preteklosti (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 (e) {
  if (!data) {
    return e.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 Constructorlastnosti: $.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 (e) {
  // Action to execute once the collapsible area is expanded
})

Poleg tega bo prezrt klic metode prehodne komponente .

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

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 .noConflictvtič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 VERSIONlastnosti konstruktorja vtičnika. Na primer za vtičnik orodnih namigov:

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

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.

Util

Vse datoteke JavaScript Bootstrapa so odvisne util.jsin 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.jsvključuje pomožne funkcije in osnovni pomočnik za transitionEnddogodke 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 whiteListvrednost 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', '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)
  }
})