JavaScript

Zisa iBootstrap ebomini ngeeplagi zethu ozikhethelayo zeJavaScript ezakhelwe kwijQuery. Funda malunga neplagin nganye, idatha yethu kunye neenketho zeprogram ye-API, kunye nokunye.

Umntu ngamnye okanye uqokelelwe

Iiplagi zingabandakanywa ngokwazo (usebenzisa iBootstrap's individual js/dist/*.js), okanye zonke ngaxeshanye usebenzisa bootstrap.jsokanye iminified bootstrap.min.js(ungaquki zombini).

Ukuba usebenzisa i-bundler (i-Webpack, i-Rollup…), unokusebenzisa /js/dist/*.jsiifayile ezisele zilungile i-UMD.

Ukuxhomekeka

Ezinye iiplagi kunye namalungu eCSS axhomekeke kwezinye iiplagi. Ukuba ubandakanya ii-plugins ngabanye, qiniseka ukuba ukhangele ezi zixhomekeke kumaxwebhu. Kwakhona qaphela ukuba zonke iiplagi zixhomekeke kwijQuery (oku kuthetha ukuba i-jQuery kufuneka ifakwe phambi kweefayile zeplagin). Qhagamshelana nathipackage.json ukuze ubone ukuba zeziphi iinguqulelo zejQuery ezixhaswayo.

Iidrophu zethu, iipopovers kunye netooltips nazo zixhomekeke kwiPopper.js .

Iimpawu zedatha

Phantse zonke iiplagi ze-Bootstrap zinokwenziwa kwaye ziqwalaselwe nge-HTML yodwa ngeempawu zedatha (indlela yethu esiyithandayo yokusebenzisa ukusebenza kweJavaScript). Qiniseka ukuba usebenzisa kuphela iseti enye yeempawu zedatha kwinto enye (umzekelo, awukwazi ukuvusa ingcebiso yesixhobo kunye nemodali ukusuka kwiqhosha elifanayo.)

Nangona kunjalo, kwezinye iimeko kunokunqweneleka ukuvala lo msebenzi. Ukukhubaza uphawu loyelelwano lwedatha, khulula zonke iziganeko kuxwebhu olunezithuba data-apiezilolo hlobo:

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

Kungenjalo, ukujolisa iplagin ethile, faka nje igama leplagi njengendawo yegama kunye ne-data-api namespace efana nale:

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

Iziganeko

I-Bootstrap ibonelela ngeziganeko zesiko kwiintshukumo ezininzi ezizodwa zeeplagi. Ngokuqhelekileyo, ezi ziza ngendlela engapheliyo kunye neyexesha elidlulileyo - apho i-infinitive (umz. show) iqaliswa ekuqaleni kwesiganeko, kwaye imo yaso yexesha elidlulileyo ye-participle (umz. shown) ivuselelwe ekugqityweni kwesenzo.

Zonke iziganeko ezingapheliyo zibonelela preventDefault()ngokusebenza. Oku kubonelela ukukwazi ukumisa ukuphunyezwa kwesenzo phambi kokuba siqale. Ukubuyisa okungeyonyani kumphathi wesiganeko nako kuyakufowunela ngokuzenzekelayo preventDefault().

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

Programmatic API

Sikwakholelwa ukuba kufuneka ukwazi ukusebenzisa zonke iiplagi zeBootstrap ngeJavaScript API. Zonke ii-API zikawonke-wonke zinye, iindlela ezibolekwayo, kwaye zibuyisela ingqokelela eyenziwayo.

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

Zonke iindlela kufuneka zamkele into ekhethiweyo yeenketho, umtya ojolise kwindlela ethile, okanye akukho nto (eqalisa iplagin ngokuziphatha okungagqibekanga):

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

I-plugin nganye ikwaveza umakhi wayo okrwada Constructorkwipropati: $.fn.popover.Constructor. Ukuba ungathanda ukufumana umzekelo othile we-plugin, yifumane ngokuthe ngqo kwinto: $('[rel="popover"]').data('popover').

Imisebenzi yeAsynchronous kunye notshintsho

Zonke iindlela zeprogram ye-API zi -asynchronous kwaye zibuyela kumnxeba xa utshintsho luqalisiwe kodwa ngaphambi kokuba luphele .

Ukuze wenze isenzo xa utshintsho lugqityiwe, ungamamela isiganeko esihambelanayo.

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

Ukongeza umnxeba wendlela kwicandelo lotshintsho awuyi kuhoywa .

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

Useto oluhlala lukhona

Ungatshintsha useto olungagqibekanga lweplagi ngokulungisa Constructor.Defaultinto yeplagin:

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

Akukho ngquzulwano

Ngamanye amaxesha kuyimfuneko ukusebenzisa iiplagi ze-Bootstrap kunye nezinye izikhokelo ze-UI. Kwezi meko, ukungqubana kwesithuba segama kunokwenzeka ngamanye amaxesha. Ukuba oku kuyenzeka, .noConflictungafowunela iplagin onqwenela ukubuyisela ixabiso layo.

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

Amanani enguqulelo

Uguqulelo lweplagi nganye yeBootstrap's jQuery inokufikelelwa VERSIONngepropathi yomakhi weplagi. Umzekelo, kwi-plugin yengcebiso yesixhobo:

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

Akukho mpazamo zikhethekileyo xa iJavaScript ivaliwe

Iiplagi zeBootstrap azibuyeli ngasemva ngokukodwa xa iJavaScript ivaliwe. Ukuba unenkathalo ngamava omsebenzisi kule meko, sebenzisa <noscript>ukuchaza imeko (kunye nendlela yokwenza kwakhona iJavaScript) kubasebenzisi bakho, kunye/okanye ukongeza okwakho ukusilela.

Util

Zonke iifayile zeJavaScript zeBootstrap zixhomekeke util.jskwaye kufuneka zibandakanywe ecaleni kwezinye iifayile zeJavaScript. Ukuba usebenzisa i compiled (okanye minified) bootstrap.js, akukho mfuneko yokubandakanya oku-sele kukho.

util.jsibandakanya imisebenzi eluncedo kunye nomncedisi osisiseko wemisitho transitionEndkunye ne-emulator yenguqu ye-CSS. Isetyenziswa zezinye iiplagi ukukhangela inkxaso yenguqu yeCSS nokubamba iinguqu ezijingayo.

Isicoci

Iingcebiso zezixhobo kunye neePopovers zisebenzisa isicoci esakhelwe ngaphakathi ukucoca iinketho ezamkela iHTML.

Ixabiso elimiselweyo whiteListlilandelayo:

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

Ukuba ufuna ukongeza amaxabiso amatsha koku kungagqibekanga whiteListungenza oku kulandelayo:

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)

Ukuba ufuna ukudlula kwi-sanitizer yethu kuba ukhetha ukusebenzisa ithala leencwadi elizinikeleyo, umzekelo DOMpurify , kuya kufuneka wenze oku kulandelayo:

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