JavaScript

Vivu Bootstrap per niaj laŭvolaj JavaScript-kromaĵoj konstruitaj sur jQuery. Lernu pri ĉiu kromaĵo, niaj datumoj kaj programaj API-opcioj, kaj pli.

Individuaj aŭ kompilitaj

Kromaĵoj povas esti inkluzivitaj individue (uzante la individuan de Bootstrap js/dist/*.js), aŭ ĉiuj samtempe uzante bootstrap.jsaŭ la minigitajn bootstrap.min.js(ne inkluzivas ambaŭ).

Se vi uzas pakaĵon (Webpack, Rollup...), vi povas uzi /js/dist/*.jsdosierojn kiuj estas UMD pretaj.

Dependecoj

Iuj aldonaĵoj kaj CSS-komponentoj dependas de aliaj aldonaĵoj. Se vi inkluzivas kromaĵojn individue, nepre kontroli ĉi tiujn dependecojn en la dokumentoj. Rimarku ankaŭ, ke ĉiuj kromprogramoj dependas de jQuery (ĉi tio signifas, ke jQuery devas esti inkluzivita antaŭ la kromprogramoj). Konsultu nianpackage.json por vidi kiuj versioj de jQuery estas subtenataj.

Niaj falmenuoj, popovers kaj konsiletoj ankaŭ dependas de Popper.js .

Datumaj atributoj

Preskaŭ ĉiuj Bootstrap-kromaĵoj povas esti ebligitaj kaj agorditaj per HTML sole kun datumaj atributoj (nia preferata maniero uzi JavaScript-funkciecon). Nepre uzu nur unu aron da datumaj atributoj sur ununura elemento (ekz., vi ne povas ekigi konsileton kaj modalon de la sama butono.)

Tamen, en iuj situacioj eble estos dezirinde malŝalti ĉi tiun funkcion. Por malŝalti la datuman atributon API, malligu ĉiujn eventojn en la dokumento nomspacigitan jene data-api:

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

Alternative, por celi specifan kromaĵon, simple inkluzivu la nomon de la kromaĵo kiel nomspacon kune kun la data-api nomspaco jene:

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

Eventoj

Bootstrap provizas kutimajn eventojn por la unikaj agoj de la plej multaj kromprogramoj. Ĝenerale, tiuj venas en infinitiva kaj preterito participo - kie la infinitivo (ekz. show) estas ekigita ĉe la komenco de okazaĵo, kaj ĝia preterito participformo (ekz. shown) estas ekigita sur la kompletigo de ago.

Ĉiuj infinitivaj eventoj disponigas preventDefault()funkciecon. Ĉi tio disponigas la kapablon ĉesigi la ekzekuton de ago antaŭ ol ĝi komenciĝas. Reveno de malvera de evento-traktilo ankaŭ aŭtomate vokos preventDefault().

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

Programa API

Ni ankaŭ kredas, ke vi devus povi uzi ĉiujn Bootstrap kromaĵojn nur per la JavaScript API. Ĉiuj publikaj API-oj estas unuopaj, ĉeneblaj metodoj, kaj resendas la kolekton pri kiu reagis.

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

Ĉiuj metodoj devas akcepti laŭvolan opcian objekton, ĉenon kiu celas apartan metodon, aŭ nenion (kiu iniciatas kromprogramon kun defaŭlta konduto):

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

Ĉiu kromaĵo ankaŭ elmontras sian krudan konstruilon sur Constructorposedaĵo: $.fn.popover.Constructor. Se vi ŝatus ricevi apartan kromprogramon, reakiru ĝin rekte de elemento: $('[rel="popover"]').data('popover').

Nesinkronaj funkcioj kaj transiroj

Ĉiuj programaj API-metodoj estas nesinkronaj kaj revenas al la alvokanto post kiam la transiro estas komencita sed antaŭ ol ĝi finiĝas .

Por efektivigi agon post kiam la transiro estas finita, vi povas aŭskulti la respondan eventon.

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

Krome metodovoko sur transira komponanto estos ignorita .

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

Defaŭltaj agordoj

Vi povas ŝanĝi la defaŭltajn agordojn por kromaĵo modifante la Constructor.Defaultobjekton de la kromaĵo:

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

Neniu konflikto

Kelkfoje necesas uzi Bootstrap-kromaĵojn kun aliaj UI-kadroj. En tiuj cirkonstancoj, nomspackolizioj povas foje okazi. Se tio okazas, vi povas alvoki .noConflictla kromprogramon, pri kiu vi volas reverti la valoron.

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

Versinumeroj

La versio de ĉiu el la aldonaĵoj jQuery de Bootstrap estas alirebla per la VERSIONposedaĵo de la konstrukciisto de la kromaĵo. Ekzemple, por la konsileto-kromaĵo:

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

Neniuj specialaj kompensoj kiam JavaScript estas malŝaltita

La kromprogramoj de Bootstrap ne falas precipe gracie kiam JavaScript estas malŝaltita. Se vi zorgas pri la uzantsperto en ĉi tiu kazo, uzu <noscript>por klarigi la situacion (kaj kiel reebligi JavaScript) al viaj uzantoj, kaj/aŭ aldoni viajn proprajn laŭmendajn kompensojn.

Util

Ĉiuj JavaScript-dosieroj de Bootstrap dependas de util.jskaj ĝi devas esti inkluzivita kune kun la aliaj JavaScript-dosieroj. Se vi uzas la kompilitan (aŭ minimumigitan) bootstrap.js, ne necesas inkluzivi ĉi tion—ĝi jam estas tie.

util.jsinkluzivas utilajn funkciojn kaj bazan helpanton por transitionEndeventoj kaj ankaŭ CSS-transira emulilo. Ĝi estas uzata de la aliaj kromprogramoj por kontroli por CSS-transirsubteno kaj por kapti pendantajn transirojn.

Sanitizer

Konsiletoj kaj Popovers uzas nian enkonstruitan sanigilon por malpurigi opciojn kiuj akceptas HTML.

La defaŭlta whiteListvaloro estas la sekva:

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

Se vi volas aldoni novajn valorojn al ĉi tiu defaŭlto whiteList, vi povas fari la jenon:

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)

Se vi volas preteriri nian sanigilon ĉar vi preferas uzi dediĉitan bibliotekon, ekzemple DOMPurify , vi devus fari la jenon:

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