JavaScript

Atdzīviniet Bootstrap, izmantojot mūsu izvēles JavaScript spraudņus, kas izveidoti uz jQuery. Uzziniet par katru spraudni, mūsu datu un programmatiskās API opcijām un daudz ko citu.

Individuāli vai apkopoti

Spraudņus var iekļaut atsevišķi (izmantojot Bootstrap individuālo js/dist/*.js), vai visus uzreiz, izmantojot bootstrap.jsvai samazinātu bootstrap.min.js(neietveriet abus).

Ja izmantojat komplektētāju (Webpack, Rollup…), varat izmantot /js/dist/*.jsfailus, kas ir gatavi UMD.

Atkarības

Daži spraudņi un CSS komponenti ir atkarīgi no citiem spraudņiem. Ja spraudņus iekļaujat atsevišķi, noteikti pārbaudiet, vai dokumentos nav šīs atkarības. Ņemiet vērā arī to, ka visi spraudņi ir atkarīgi no jQuery (tas nozīmē, ka jQuery ir jāiekļauj pirms spraudņa failiem). Sazinieties ar mūsupackage.json , lai uzzinātu, kuras jQuery versijas tiek atbalstītas.

Mūsu nolaižamās izvēlnes, uznirstošie logi un rīka padomi ir atkarīgi arī no Popper.js .

Datu atribūti

Gandrīz visus Bootstrap spraudņus var iespējot un konfigurēt, izmantojot tikai HTML ar datu atribūtiem (mūsu vēlamais JavaScript funkcionalitātes izmantošanas veids). Noteikti izmantojiet tikai vienu datu atribūtu kopu vienam elementam (piemēram, jūs nevarat aktivizēt rīka padomu un modālu no vienas pogas).

Tomēr dažās situācijās var būt vēlams šo funkcionalitāti atspējot. Lai atspējotu datu atribūta API, atsaistiet visus notikumus dokumenta nosaukumvietā data-apišādi:

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

Alternatīvi, lai atlasītu konkrētu spraudni, vienkārši iekļaujiet spraudņa nosaukumu kā nosaukumvietu kopā ar datu api nosaukumvietu, piemēram:

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

Pasākumi

Bootstrap nodrošina pielāgotus notikumus lielākajai daļai spraudņu unikālo darbību. Parasti tie ir infinitīva un pagātnes divdabja formā — kur infinitīvs (piem. show) tiek aktivizēts notikuma sākumā, bet tā pagātnes divdabja forma (piem. shown) tiek aktivizēta pēc darbības pabeigšanas.

Visi infinitīvie notikumi nodrošina preventDefault()funkcionalitāti. Tas nodrošina iespēju apturēt darbības izpildi pirms tās sākšanas. Atgriežot false no notikumu apstrādātāja, automātiski tiks izsaukts arī preventDefault().

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

Programmatiskā API

Mēs arī uzskatām, ka jums vajadzētu būt iespējai izmantot visus Bootstrap spraudņus, tikai izmantojot JavaScript API. Visas publiskās API ir atsevišķas, ķēdējamas metodes, un tās atgriež kolekciju, uz kuru ir veikta darbība.

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

Visām metodēm ir jāpieņem neobligāto opciju objekts, virkne, kuras mērķis ir noteikta metode, vai nekas (kas iniciē spraudni ar noklusējuma darbību):

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

Katrs spraudnis arī parāda savu neapstrādāto konstruktoru Constructorīpašumā: $.fn.popover.Constructor. Ja vēlaties iegūt konkrētu spraudņa instanci, izgūstiet to tieši no elementa: $('[rel="popover"]').data('popover').

Asinhronās funkcijas un pārejas

Visas programmatiskās API metodes ir asinhronas un atgriežas pie zvanītāja, kad pāreja ir sākta, bet pirms tās beigām .

Lai veiktu darbību, kad pāreja ir pabeigta, varat noklausīties atbilstošo notikumu.

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

Turklāt pārejas komponenta metodes izsaukums tiks ignorēts .

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

Noklusējuma iestatījumi

Varat mainīt spraudņa noklusējuma iestatījumus, modificējot spraudņa Constructor.Defaultobjektu:

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

Nav konflikta

Dažreiz ir nepieciešams izmantot Bootstrap spraudņus ar citiem lietotāja interfeisa ietvariem. Šādos apstākļos dažkārt var rasties nosaukumtelpas sadursmes. Ja tā notiek, varat izsaukt .noConflictspraudni, kura vērtību vēlaties atjaunot.

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

Versiju numuri

Katra Bootstrap jQuery spraudņa versijai var piekļūt, izmantojot VERSIONspraudņa konstruktora īpašumu. Piemēram, rīka padoma spraudnim:

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

Nav īpašu atkāpšanās gadījumu, ja JavaScript ir atspējots

Bootstrap spraudņi nav īpaši graciozi, ja JavaScript ir atspējots. Ja jums rūp lietotāja pieredze šajā gadījumā, izmantojiet <noscript>, lai izskaidrotu situāciju (un kā atkārtoti iespējot JavaScript) saviem lietotājiem un/vai pievienojiet savus pielāgotos atkāpšanās variantus.

Util

Visi Bootstrap JavaScript faili ir atkarīgi, util.jsun tie ir jāiekļauj kopā ar citiem JavaScript failiem. Ja izmantojat kompilēto (vai samazināto) bootstrap.js, tas nav jāiekļauj — tas jau ir tur.

util.jsietver utilīta funkcijas un pamata palīgu transitionEndpasākumiem, kā arī CSS pārejas emulatoru. To izmanto citi spraudņi, lai pārbaudītu CSS pārejas atbalstu un noķertu pārejas.

Dezinficētājs

Rīka padomi un uznirstošie elementi izmanto mūsu iebūvēto dezinfekcijas līdzekli, lai dezinficētu opcijas, kas pieņem HTML.

Noklusējuma whiteListvērtība ir šāda:

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

Ja šim noklusējumam vēlaties pievienot jaunas vērtības, whiteListvarat rīkoties šādi:

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)

Ja vēlaties apiet mūsu dezinfekcijas līdzekli, jo vēlaties izmantot īpašu bibliotēku, piemēram , DOMpurify , rīkojieties šādi:

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