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.jsose 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/*.jsskedarë 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-apisi 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')

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. ) shownnxitet 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 (e) {
  if (!data) {
    return e.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ë Constructorpronë: $.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 (e) {
  // 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 (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 !!

Cilësimet e parazgjedhura

Ju mund të ndryshoni cilësimet e paracaktuara për një shtesë duke modifikuar Constructor.Defaultobjektin 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 .noConflictshtojcë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 VERSIONvetive të konstruktorit të shtojcave. Për shembull, për shtojcën e këshillës së veglave:

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

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.

Util

Të gjithë skedarët JavaScript të Bootstrap varen util.jsdhe 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.jspërfshin funksione të shërbimeve dhe një ndihmës bazë për transitionEndngjarjet, 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', '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)
  }
})