JavaScript

Dați viață Bootstrap-ului cu pluginurile noastre opționale JavaScript construite pe jQuery. Aflați despre fiecare plugin, despre opțiunile noastre de date și API programatice și multe altele.

Individual sau compilat

Pluginurile pot fi incluse individual (folosind individualul Bootstrap js/dist/*.js) sau toate odată folosind bootstrap.jssau diminuate bootstrap.min.js(nu le includeți pe ambele).

Dacă utilizați un bundler (Webpack, Rollup...), puteți utiliza /js/dist/*.jsfișiere care sunt gata UMD.

Dependente

Unele plugin-uri și componente CSS depind de alte plugin-uri. Dacă includeți pluginuri individual, asigurați-vă că verificați aceste dependențe în documente. De asemenea, rețineți că toate pluginurile depind de jQuery (aceasta înseamnă că jQuery trebuie inclus înainte de fișierele plugin). Consultați-nepackage.json pentru a vedea ce versiuni de jQuery sunt acceptate.

Mențiunile derulante, popover-urile și sfaturile noastre de instrumente depind și de Popper.js .

Atributele datelor

Aproape toate pluginurile Bootstrap pot fi activate și configurate numai prin HTML cu atribute de date (modul nostru preferat de a folosi funcționalitatea JavaScript). Asigurați-vă că utilizați un singur set de atribute de date pe un singur element (de exemplu, nu puteți declanșa un balon explicativ și un modal de pe același buton.)

Cu toate acestea, în unele situații poate fi de dorit să dezactivați această funcționalitate. Pentru a dezactiva API-ul atributului de date, dezlegați toate evenimentele din documentul cu spații de nume data-apiastfel:

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

Alternativ, pentru a viza un anumit plugin, includeți doar numele pluginului ca spațiu de nume împreună cu spațiul de nume data-api, astfel:

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

Evenimente

Bootstrap oferă evenimente personalizate pentru acțiunile unice ale majorității pluginurilor. În general, acestea vin într-o formă de infinitiv și participiu trecut - unde infinitivul (ex. show) este declanșat la începutul unui eveniment, iar forma sa de participiu trecut (ex. shown) este declanșat la finalizarea unei acțiuni.

Toate evenimentele infinitive oferă preventDefault()funcționalitate. Aceasta oferă posibilitatea de a opri execuția unei acțiuni înainte de a începe. Întoarcerea false de la un handler de evenimente va apela automat și preventDefault().

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

API-ul programatic

De asemenea, credem că ar trebui să puteți utiliza toate pluginurile Bootstrap doar prin API-ul JavaScript. Toate API-urile publice sunt metode unice, care pot fi înlănțuite și returnează colecția asupra căreia se acționează.

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

Toate metodele ar trebui să accepte un obiect opțional opțional, un șir care vizează o anumită metodă sau nimic (care inițiază un plugin cu comportament implicit):

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

Fiecare plugin își expune, de asemenea, constructorul brut pe o Constructorproprietate: $.fn.popover.Constructor. Dacă doriți să obțineți o anumită instanță de plugin, preluați-o direct dintr-un element: $('[rel="popover"]').data('popover').

Funcții și tranziții asincrone

Toate metodele API programatice sunt asincrone și revin la apelant odată ce tranziția este începută, dar înainte ca aceasta să se încheie .

Pentru a executa o acțiune odată ce tranziția este finalizată, puteți asculta evenimentul corespunzător.

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

În plus, un apel de metodă pentru o componentă de tranziție va fi ignorat .

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

Setări implicite

Puteți modifica setările implicite pentru un plugin modificând obiectul pluginului Constructor.Default:

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

Fără conflict

Uneori este necesar să utilizați pluginuri Bootstrap cu alte cadre UI. În aceste circumstanțe, pot apărea ocazional coliziuni ale spațiului de nume. Dacă se întâmplă acest lucru, puteți apela .noConflictla pluginul căruia doriți să reveniți la valoarea.

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

Numerele versiunii

Versiunea fiecărui plugin jQuery de la Bootstrap poate fi accesată prin VERSIONproprietatea constructorului pluginului. De exemplu, pentru pluginul tooltip:

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

Nu există soluții speciale când JavaScript este dezactivat

Pluginurile Bootstrap nu revin în mod deosebit de grațios atunci când JavaScript este dezactivat. Dacă vă pasă de experiența utilizatorului în acest caz, folosiți <noscript>pentru a explica situația (și cum să reactivați JavaScript) utilizatorilor dvs. și/sau adăugați propriile alternative personalizate.

Util

Toate fișierele JavaScript din Bootstrap depind util.jsși trebuie incluse alături de celelalte fișiere JavaScript. Dacă utilizați fișierul compilat (sau minimizat) bootstrap.js, nu este nevoie să îl includeți - este deja acolo.

util.jsinclude funcții utilitare și un ajutor de bază pentru transitionEndevenimente, precum și un emulator de tranziție CSS. Este folosit de celelalte plugin-uri pentru a verifica suportul pentru tranziția CSS și pentru a prinde tranzițiile suspendate.

Dezinfectant

Sfaturile cu instrumente și popoverele folosesc dezinfectantul nostru încorporat pentru a dezinfecta opțiunile care acceptă HTML.

Valoarea implicită whiteListeste următoarea:

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

Dacă doriți să adăugați noi valori la această valoare implicită whiteList, puteți face următoarele:

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)

Dacă doriți să ocoliți dezinfectantul nostru deoarece preferați să utilizați o bibliotecă dedicată, de exemplu DOMPurify , ar trebui să faceți următoarele:

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