I-JavaScript

Yenza i-Bootstrap iphile ngama-plugin ethu e-JavaScript ongawakhetha akhelwe ku-jQuery. Funda mayelana ne-plugin ngayinye, idatha yethu nezinketho zohlelo lwe-API, nokuningi.

Ngamunye noma ihlanganiswe

Ama-plugin angafakwa ngawodwana (usebenzisa i-Bootstrap's individual js/dist/*.js), noma wonke ngesikhathi esisodwa usebenzisa bootstrap.jsnoma i-minified bootstrap.min.js(ungafaki kokubili).

Uma usebenzisa i-bundler (Webpack, Rollup…), ungasebenzisa /js/dist/*.jsamafayela aselungile nge-UMD.

Ukuncika

Amanye ama-plugin nezingxenye ze-CSS zincike kwamanye ama-plugin. Uma ufaka ama-plugin ngawodwana, qiniseka ukuthi uhlola lokhu kuncika kumadokhumenti. Futhi qaphela ukuthi wonke ama-plugin ancike ku-jQuery (lokhu kusho ukuthi i-jQuery kufanele ifakwe ngaphambi kwamafayela e-plugin). Xhumana nathipackage.json ukuze ubone ukuthi yiziphi izinguqulo ze-jQuery ezisekelwayo.

Okwehliswayo kwethu, ama-popover kanye namathiphu amathuluzi nakho kuncike ku- Popper.js .

Izibaluli zedatha

Cishe wonke ama-plugin e-Bootstrap angavulwa futhi amiswe nge-HTML iyodwa ngezibaluli zedatha (indlela yethu esiyikhethayo yokusebenzisa ukusebenza kwe-JavaScript). Qiniseka ukuthi usebenzisa isethi eyodwa yezibaluli zedatha entweni eyodwa (isb, awukwazi ukucupha ithiphu yamathuluzi nemodali enkinobho efanayo.)

Nokho, kwezinye izimo kungase kufiseleke ukukhubaza lokhu kusebenza. Ukuze ukhubaze i-API yesibaluli sedatha, khulula yonke imicimbi kudokhumenti enezikhala zamagama data-apikanje:

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

Okunye, ukuze uqondise i-plugin ethile, vele ufake igama le-plugin njengendawo yegama kanye nendawo yegama yedatha-api kanje:

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

Imicimbi

I-Bootstrap inikeza imicimbi yangokwezifiso yezenzo ezihlukile zama-plugin. Ngokuvamile, lezi ziza ngendlela engapheli kanye nenkathi edlule - lapho okungapheli (isb. show) kuqalwa ekuqaleni komcimbi, futhi isimo saso sokuhlanganyela esidlule (isib. shown) siqaliswa lapho kuqedwa isenzo.

Yonke imicimbi engapheli inikeza preventDefault()ukusebenza. Lokhu kunikeza ikhono lokumisa ukwenziwa kwesenzo ngaphambi kokuthi siqale. Ukubuyisela amanga kusiphathi somcimbi nakho kuzoshaya ngokuzenzakalelayo preventDefault().

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

I-Programmatic API

Sikholelwa futhi ukuthi kufanele ukwazi ukusebenzisa wonke ama-plugin e-Bootstrap nge-JavaScript API. Wonke ama-API asesidlangalaleni ayindlela eyodwa, esebenzisekayo, futhi abuyisela iqoqo osekwenziwe ngalo.

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

Zonke izindlela kufanele zamukele into ongakhetha kuyo, iyunithi yezinhlamvu eqondise indlela ethile, noma lutho (okuqalisa i-plugin ngokuziphatha okuzenzakalelayo):

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

I-plugin ngayinye iphinde iveze umakhi wayo ongahluziwe esakhiweni Constructor: $.fn.popover.Constructor. Uma ungathanda ukuthola isibonelo esithile se-plugin, sithole ngokuqondile entweni: $('[rel="popover"]').data('popover').

Imisebenzi ye-Asynchronous kanye noshintsho

Zonke izindlela ze-API zohlelo azivumelanisi futhi zibuyela kofonayo uma uguquko seluqalile kodwa ngaphambi kokuthi luphele .

Ukuze wenze isenzo uma inguquko isiqedile, ungalalela umcimbi ohambisanayo.

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

Ngaphezu kwalokho ikholi yendlela engxenyeni eguqukayo izozitshwa .

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

Izilungiselelo ezizenzakalelayo

Ungashintsha izilungiselelo ezizenzakalelayo ze-plugin ngokulungisa Constructor.Defaultinto ye-plugin:

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

Akukho ukungqubuzana

Kwesinye isikhathi kuyadingeka ukusebenzisa ama-plugin e-Bootstrap nezinye izinhlaka ze-UI. Kulezi zimo, ukungqubuzana kwendawo yamagama kungenzeka ngezikhathi ezithile. Uma lokhu kwenzeka, ungashayela .noConflicti-plugin ofisa ukubuyisela inani layo.

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

Izinombolo zenguqulo

Inguqulo ye-plugin ngayinye ye-Bootstrap's jQuery ingafinyelelwa ngesakhiwo somakhi VERSIONwe-plugin. Isibonelo, nge-plugin yethiphu yamathuluzi:

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

Akukho okubuyela emuva okukhethekile uma i-JavaScript ivaliwe

Ama-plugin e-Bootstrap awabuyeli kahle ikakhulukazi uma i-JavaScript ivaliwe. Uma unendaba nolwazi lomsebenzisi kulesi simo, sebenzisa <noscript>ukuchaza isimo (nokuthi ungayenza kanjani i-JavaScript isebenze kabusha) kubasebenzisi bakho, kanye/noma wengeze okwakho okubuyela emuva ngokwezifiso.

Util

Wonke amafayela e-JavaScript e-Bootstrap ancike kuwo util.jsfuthi kufanele afakwe eceleni kwamanye amafayela e-JavaScript. Uma usebenzisa i-comiled (noma minified) bootstrap.js, asikho isidingo sokufaka lokhu—sekuvele kukhona.

util.jsihlanganisa imisebenzi yensiza kanye nomsizi oyisisekelo transitionEndwemicimbi kanye nesifanisi soguquko se-CSS. Isetshenziswa amanye ama-plugin ukuhlola ukwesekwa koshintsho lwe-CSS nokubamba izinguquko ezilengayo.

I-Sanitizer

Amathuluzi nama-Popovers asebenzisa isicoci esakhelwe ngaphakathi ukuze sihlanze izinketho ezamukela i-HTML.

Inani elizenzakalelayo 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', 'srcset', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Uma ufuna ukwengeza amanani amasha kulokhu okumisiwe whiteListungenza okulandelayo:

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)

Uma ufuna ukweqa isibulali magciwane sethu ngoba ukhetha ukusebenzisa umtapo wolwazi ozinikele, isibonelo DOMPurify , kufanele wenze okulandelayo:

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