JavaScript

Hunza Bootstrap kuhupenyu neyedu sarudzo JavaScript plugins yakavakirwa pajQuery. Dzidza nezve plugin yega yega, data redu uye programmatic API sarudzo, nezvimwe.

Mumwe nemumwe kana kuunganidzwa

Mapulagi anogona kuverengerwa ega (uchishandisa Bootstrap's munhu js/dist/*.js), kana zvese kamwechete uchishandisa bootstrap.jskana minified bootstrap.min.js(usasanganise ese ari maviri).

Kana iwe ukashandisa bundler (Webpack, Rollup…), unogona kushandisa /js/dist/*.jsmafaera akagadzirira UMD.

Dependencies

Mamwe mapulagi neCSS zvinotsamira pane mamwe mapulagi. Kana iwe ukasanganisira plugins wega, ita shuwa yekutarisa kune izvi zvinotsamira mumagwaro. Ziva zvakare kuti ese maplugins anoenderana nejQuery (izvi zvinoreva kuti jQuery inofanira kuverengerwa pamberi pemafaira eplugin). Bvunza yedupackage.json kuti uone kuti ndedzipi shanduro dzejQuery dzinotsigirwa.

Kudonhedza kwedu, popovers uye matipi ekushandisa zvakare zvinoenderana nePopper.js .

Data attribute

Anenge ese maBootstrap plugins anogona kugoneswa uye kugadziridzwa kuburikidza neHTML chete ane data hunhu (nzira yedu yatinoda yekushandisa JavaScript mashandiro). Iva nechokwadi chekushandisa seti imwe chete yedata hunhu pane chinhu chimwe chete (semuenzaniso, haugone kukonzeresa chetipi uye modal kubva pabhatani rimwechete.)

Zvisinei, mune mamwe mamiriro ezvinhu zvingava zvinodiwa kudzima basa iri. Kudzima iyo data API, sunungura zvese zviitiko pagwaro rakaiswa mazita data-apisaizvozvo:

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

Neimwe nzira, kunanga imwe plugin, ingo sanganisira zita replugin sezita rezita pamwe chete nedata-api namespace seizvi:

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

Zviitiko

Bootstrap inopa zviitiko zvetsika kune akawanda plugins 'akasarudzika zviito. Kazhinji, izvi zvinouya muchimiro chechirevo chisingaperi uye chekare - apo chisingaperi (ex. show) chinotangwa pakutanga kwechiitiko, uye chimiro chayo chechirevo chekare (ex. shown) chinotangwa pakupedzwa kwechiito.

Zvose zvisingagumi zviitiko zvinopa preventDefault()kushanda. Izvi zvinopa kugona kumisa kuitwa kwechiito chisati chatanga. Kudzorera nhema kubva kumubati wechiitiko kuchafonawo otomatiki preventDefault().

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

Purogiramu yepurogiramu

Isu tinotenda zvakare kuti unofanirwa kukwanisa kushandisa ese Bootstrap plugins kuburikidza neJavaScript API. MaAPI ese eruzhinji inzira imwechete, inobatika, uye inodzosa kuunganidzwa kwaitwa.

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

Nzira dzese dzinofanirwa kugamuchira chinhu chekusarudza sarudzo, tambo inonangana neimwe nzira, kana hapana (iyo inotanga plugin ine default maitiro):

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

Imwe neimwe plugin zvakare inofumura mugadziri wayo mbishi pachivakwa Constructor: $.fn.popover.Constructor. Kana iwe uchida kuwana imwe plugin muenzaniso, itore zvakananga kubva kune chinhu: $('[rel="popover"]').data('popover').

Asynchronous mabasa uye shanduko

Yese programmatic API nzira dzine asynchronous uye dzinodzokera kune anofona kana shanduko yatanga asi isati yapera .

Kuti uite chiito kana shanduko yapera, unogona kuteerera kune chiitiko chinoenderana.

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

Pamusoro peiyo nzira yekufona pachikamu chekuchinja inozofuratirwa .

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

Default settings

Unogona kushandura zvigadziriso zveplugin nekugadzirisa chinhu cheplugin Constructor.Default:

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

Hapana kunetsana

Dzimwe nguva zvinodikanwa kushandisa Bootstrap plugins nemamwe maUI maficha. Mumamiriro ezvinhu aya, kudhumhana kwemazita kunogona kuitika dzimwe nguva. Kana izvi zvikaitika, unogona kufonera .noConflictplugin yaunoda kudzorera kukosha kwayo.

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

Nhamba dzeshanduro

Iyo vhezheni yeimwe neimwe yeBootstrap's jQuery plugins inogona kuwanikwa kuburikidza nemudziyo wemugadziri weplugin VERSION. Semuenzaniso, kune iyo tooltip plugin:

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

Hapana zvakakosha zvinodzokera kana JavaScript yakadzimwa

Bootstrap's plugins haidzoke kumashure zvakanyanya nenyasha kana JavaScript yakadzimwa. Kana iwe uine hanya neruzivo rwemushandisi mune iyi kesi, shandisa <noscript>kutsanangura mamiriro acho (uye maitiro ekuitazve JavaScript) kune vashandisi vako, uye/kana wedzera yako wega yekudonha.

Util

Mafaira ese eBootstrap eJavaScript anoenderana util.jsnazvo uye anofanirwa kuverengerwa padivi pemamwe mafaera eJavaScript. Kana uri kushandisa compiled (kana minified) bootstrap.js, hapana chikonzero chekuisa izvi-zvatovepo.

util.jsinosanganisira mabasa ekushandisa uye mubatsiri wekutanga transitionEndwezviitiko pamwe neCSS shanduko emulator. Inoshandiswa nemamwe maplugins kutarisa CSS shanduko yerutsigiro uye kubata yakarembera shanduko.

Sanitizer

Maturusi uye Popovers anoshandisa yedu yakavakirwa-mukati sanitizer kuchenesa sarudzo dzinogamuchira HTML.

The default whiteListvalue ndeiyi inotevera:

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

Kana iwe uchida kuwedzera hutsva hutsva kune iyi default whiteListunogona kuita zvinotevera:

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)

Kana iwe uchida kupfuura yedu sanitizer nekuti unofarira kushandisa raibhurari yakatsaurirwa, semuenzaniso DOMpurify , unofanirwa kuita zvinotevera:

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