JavaScript

Lífgaðu Bootstrap til lífsins með valfrjálsu JavaScript viðbótunum okkar byggð á jQuery. Lærðu um hverja viðbætur, gögn okkar og forritafræðilega API valkosti og fleira.

Einstök eða samsett

Viðbætur geta verið innifalin fyrir sig (með því að nota Bootstrap's individual js/dist/*.js), eða öll í einu með því að nota bootstrap.jseða minnka bootstrap.min.js(ekki innihalda bæði).

Ef þú notar búntara (Webpack, Rollup…), geturðu notað /js/dist/*.jsskrár sem eru UMD tilbúnar.

Ósjálfstæði

Sum viðbætur og CSS íhlutir eru háðir öðrum viðbótum. Ef þú lætur viðbætur fylgja með sér, vertu viss um að athuga hvort þessar ósjálfstæði séu í skjölunum. Athugaðu líka að öll viðbætur eru háðar jQuery (þetta þýðir að jQuery verður að vera með á undan viðbótaskránum). Hafðu samband við okkurpackage.json til að sjá hvaða útgáfur af jQuery eru studdar.

Fellilistarnir okkar, sprettigluggar og verkfæraábendingar eru einnig háðar Popper.js .

Gagnaeiginleikar

Næstum allar Bootstrap viðbætur er hægt að virkja og stilla í gegnum HTML eingöngu með gagnaeiginleikum (valin leið okkar til að nota JavaScript virkni). Gakktu úr skugga um að þú notir aðeins eitt sett af gagnaeigindum á einum þætti (td þú getur ekki kveikt á tóli og aðferð frá sama hnappi).

Hins vegar, í sumum tilfellum, getur verið æskilegt að slökkva á þessari virkni. Til að slökkva á gagnaeigininni API skaltu aftengja alla atburði á skjalinu með nafnabili með data-apisvona:

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

Að öðrum kosti, til að miða á ákveðna viðbót, skaltu bara láta nafn viðbótarinnar fylgja með sem nafnrými ásamt data-api nafnrýminu eins og þetta:

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

Viðburðir

Bootstrap býður upp á sérsniðna atburði fyrir einstaka aðgerðir flestra viðbætur. Yfirleitt koma þær í óendanlegu formi og þátíð - þar sem óendanlegur (til dæmis show) er ræstur í upphafi atburðar, og þátíðarform hans (til dæmis shown) er ræst þegar aðgerð er lokið.

Allir óendanlegir atburðir veita preventDefault()virkni. Þetta veitir möguleika á að stöðva framkvæmd aðgerða áður en hún hefst. Ef þú skilar ósönnum frá atburðastjórnun mun einnig sjálfkrafa hringja preventDefault().

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

Forritað API

Við teljum líka að þú ættir að geta notað öll Bootstrap viðbætur eingöngu í gegnum JavaScript API. Öll opinber API eru stakar, keðjanlegar aðferðir og skila söfnuninni sem brugðist hefur verið við.

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

Allar aðferðir ættu að samþykkja valfrjálsan valmöguleikahlut, streng sem miðar á tiltekna aðferð eða ekkert (sem kemur af stað viðbót með sjálfgefna hegðun):

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

Hver tappi afhjúpar einnig hráan smið á Constructoreign: $.fn.popover.Constructor. Ef þú vilt fá tiltekið viðbótatilvik skaltu sækja það beint úr frumefni: $('[rel="popover"]').data('popover').

Ósamstilltur aðgerðir og umskipti

Allar forritunaraðferðir API eru ósamstilltar og snúa aftur til þess sem hringir þegar umskiptin eru hafin en áður en henni lýkur .

Til að framkvæma aðgerð þegar umskiptum er lokið geturðu hlustað á samsvarandi atburði.

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

Að auki verður aðferðakall á umbreytingarhluta hunsað .

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

Sjálfgefnar stillingar

Þú getur breytt sjálfgefnum stillingum fyrir viðbót með því að breyta Constructor.Defaulthlut viðbótarinnar:

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

Engin átök

Stundum er nauðsynlegt að nota Bootstrap viðbætur með öðrum UI ramma. Við þessar aðstæður geta árekstrar í nafnrými átt sér stað einstaka sinnum. Ef þetta gerist geturðu hringt .noConflictí viðbótina sem þú vilt breyta gildinu á.

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

Útgáfunúmer

Hægt er að nálgast útgáfuna af hverri jQuery viðbót Bootstrap í gegnum VERSIONeign byggingaraðila viðbótarinnar. Til dæmis, fyrir tooltip viðbótina:

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

Engar sérstakar frávik þegar JavaScript er óvirkt

Viðbætur Bootstrap falla ekki sérstaklega tignarlega til baka þegar JavaScript er óvirkt. Ef þér er annt um notendaupplifunina í þessu tilviki, notaðu <noscript>þá til að útskýra aðstæður (og hvernig á að virkja JavaScript aftur) fyrir notendum þínum og/eða bæta við eigin sérsniðnum fallbacks.

Til

Allar JavaScript skrár Bootstrap eru háðar util.jsog þær verða að fylgja með öðrum JavaScript skrám. Ef þú ert að nota samsetta (eða minnkaða) bootstrap.js, þá er engin þörf á að hafa þetta með – það er þegar til staðar.

util.jsinniheldur gagnsemisaðgerðir og grunnhjálp fyrir transitionEndviðburði sem og CSS umbreytingarhermi. Það er notað af öðrum viðbótum til að athuga hvort stuðningur við CSS umskipti sé og til að ná hangandi umbreytingum.

Hreinsiefni

Tooltips og Popovers nota innbyggða sótthreinsiefnið okkar til að hreinsa valkosti sem samþykkja HTML.

Sjálfgefið whiteListgildi er eftirfarandi:

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

Ef þú vilt bæta nýjum gildum við þetta sjálfgefið whiteListgeturðu gert eftirfarandi:

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)

Ef þú vilt komast framhjá hreinsiefninu okkar vegna þess að þú vilt frekar nota sérstakt bókasafn, til dæmis DOMPurify , ættirðu að gera eftirfarandi:

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