JavaScript

Äratage Bootstrap ellu meie valikuliste JavaScripti pistikprogrammidega, mis on ehitatud jQueryle. Lisateave iga pistikprogrammi, meie andmete ja programmilise API valikute ning muu kohta.

Individuaalne või koostatud

Pluginad saab lisada üksikult (kasutades Bootstrapi individuaalset funktsiooni js/dist/*.js) või kõik korraga, kasutades bootstrap.jsvõi minimeeritud bootstrap.min.js(ärge kaasake mõlemat).

Kui kasutate komplekteerijat (veebipakk, koond...), saate kasutada /js/dist/*.jsfaile, mis on UMD-valmidusega.

Sõltuvused

Mõned pistikprogrammid ja CSS-i komponendid sõltuvad teistest pistikprogrammidest. Kui lisate pistikprogrammid eraldi, kontrollige kindlasti nende sõltuvuste olemasolu dokumentidest. Pange tähele ka seda, et kõik pistikprogrammid sõltuvad jQueryst (see tähendab, et jQuery peab olema lisatud enne pluginafaile). Konsulteerige meiegapackage.json , et näha, milliseid jQuery versioone toetatakse.

Meie rippmenüüd, hüpikaknad ja tööriistavihjed sõltuvad ka Popper.js -ist .

Andmete atribuudid

Peaaegu kõiki Bootstrapi pistikprogramme saab lubada ja konfigureerida ainult HTML-i kaudu koos andmeatribuutidega (meie eelistatud viis JavaScripti funktsiooni kasutamiseks). Kasutage ühel elemendil kindlasti ainult ühte andmeatribuutide komplekti (nt te ei saa samal nupul käivitada kohtspikri ja modaali).

Mõnes olukorras võib siiski olla soovitav see funktsioon keelata. Andmeatribuudi API keelamiseks tühistage kõik dokumendis olevad sündmused, mille nimeruum on data-apijärgmine:

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

Teise võimalusena lisage konkreetse pistikprogrammi sihtimiseks lihtsalt pistikprogrammi nimi nimeruumina koos data-api nimeruumiga, näiteks järgmiselt:

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

Sündmused

Bootstrap pakub kohandatud sündmusi enamiku pistikprogrammide ainulaadsete toimingute jaoks. Tavaliselt esinevad need infinitiivi ja mineviku osastava vormina – kus infinitiiv (nt show) käivitatakse sündmuse alguses ja selle mineviku osastava vorm (nt.shown ) käivitatakse tegevuse lõppedes.

Kõik infinitiivsed sündmused pakuvad preventDefault()funktsionaalsust. See annab võimaluse toimingu sooritamine enne selle algust peatada. Sündmuste töötlejalt vale tagastamine helistab samuti automaatseltpreventDefault() .

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

Programmaatiline API

Samuti usume, et peaksite saama kasutada kõiki Bootstrapi pistikprogramme ainult JavaScripti API kaudu. Kõik avalikud API-d on üksikud aheldatavad meetodid ja tagastavad kogu, mille alusel on tegu.

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

Kõik meetodid peaksid aktsepteerima valikuliste suvandite objekti, stringi, mis sihib konkreetset meetodit, või mitte midagi (mis käivitab vaikekäitumisega pistikprogrammi):

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

Iga pistikprogramm avaldab ka oma töötlemata konstruktori Constructoratribuudil: $.fn.popover.Constructor. Kui soovite hankida konkreetse pistikprogrammi eksemplari, hankige see otse elemendist: $('[rel="popover"]').data('popover').

Asünkroonsed funktsioonid ja üleminekud

Kõik programmilised API meetodid on asünkroonsed ja naasevad helistaja juurde pärast ülemineku algust, kuid enne selle lõppu .

Toimingu sooritamiseks pärast ülemineku lõppemist saate kuulata vastavat sündmust.

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

Lisaks ignoreeritakse üleminekukomponendi meetodikutset .

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

Vaikeseaded

Saate muuta pistikprogrammi vaikesätteid, muutes pistikprogrammi Constructor.Defaultobjekti.

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

Ei mingit konflikti

Mõnikord on vaja Bootstrapi pistikprogramme kasutada koos teiste kasutajaliidese raamistikega. Sellistel juhtudel võib aeg-ajalt tekkida nimeruumi kokkupõrkeid. Kui see juhtub, võite helistada .noConflictpistikprogrammile, mille väärtust soovite taastada.

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

Versiooni numbrid

Iga Bootstrapi jQuery pistikprogrammi versioonile pääseb juurde VERSIONpistikprogrammi konstruktori atribuudi kaudu. Näiteks tööriistavihje pistikprogrammi jaoks:

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

Kui JavaScript on keelatud, pole mingeid erilisi tagavarasid

Bootstrapi pistikprogrammid ei lange eriti graatsiliselt tagasi, kui JavaScript on keelatud. Kui teile huvitab sel juhul kasutajakogemus, kasutage <noscript>olukorra selgitamiseks (ja JavaScripti uuesti lubamiseks) oma kasutajatele ja/või oma kohandatud varude lisamiseks.

Util

Kõik Bootstrapi JavaScripti failid sõltuvad util.jsja need tuleb lisada teiste JavaScripti failide kõrvale. Kui kasutate kompileeritud (või minimeeritud) bootstrap.js, pole seda vaja lisada – see on juba olemas.

util.jssisaldab utiliidifunktsioone ja transitionEndsündmuste põhiabilist ning CSS-i ülemineku emulaatorit. Teised pistikprogrammid kasutavad seda CSS-i ülemineku toe kontrollimiseks ja rippuvate üleminekute tabamiseks.

Puhastusvahend

Tööriistavihjed ja hüpikaknad kasutavad HTML-i aktsepteerivate valikute puhastamiseks meie sisseehitatud puhastusvahendit.

Vaikeväärtus whiteListon järgmine:

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: []
}

Kui soovite sellele vaikeväärtusele lisada uusi väärtusi, whiteListsaate teha järgmist.

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)

Kui soovite meie desinfitseerimisvahendist mööda minna, kuna eelistate kasutada spetsiaalset teeki, näiteks DOMpurify , peaksite tegema järgmist.

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})