JavaScript

Buhayin ang Bootstrap gamit ang aming mga opsyonal na plugin ng JavaScript na binuo sa jQuery. Matuto tungkol sa bawat plugin, aming data at mga opsyon sa programmatic na API, at higit pa.

Indibidwal o pinagsama-sama

Maaaring isama ang mga plugin nang isa-isa (gamit ang indibidwal na Bootstrap js/dist/*.js), o sabay-sabay gamit bootstrap.jso ang minified bootstrap.min.js(huwag isama ang pareho).

Kung gumagamit ka ng isang bundler (Webpack, Rollup...), maaari kang gumamit ng /js/dist/*.jsmga file na nakahanda sa UMD.

Dependencies

Ang ilang mga plugin at mga bahagi ng CSS ay nakadepende sa iba pang mga plugin. Kung isa-isa kang magsasama ng mga plugin, tiyaking suriin ang mga dependency na ito sa mga doc. Tandaan din na ang lahat ng mga plugin ay nakasalalay sa jQuery (ito ay nangangahulugan na ang jQuery ay dapat isama bago ang mga plugin na file). Kumonsulta sa aminpackage.json upang makita kung aling mga bersyon ng jQuery ang sinusuportahan.

Ang aming mga dropdown, popover at tooltip ay nakadepende rin sa Popper.js .

Mga katangian ng data

Halos lahat ng mga plugin ng Bootstrap ay maaaring paganahin at i-configure sa pamamagitan ng HTML lamang na may mga katangian ng data (ang aming gustong paraan ng paggamit ng paggana ng JavaScript). Tiyaking gumamit lamang ng isang hanay ng mga katangian ng data sa isang elemento (hal., hindi ka makakapag-trigger ng tooltip at modal mula sa parehong button.)

Gayunpaman, sa ilang mga sitwasyon ay maaaring kanais-nais na huwag paganahin ang pagpapaandar na ito. Upang hindi paganahin ang data attribute API, i-unbind ang lahat ng kaganapan sa dokumento na may namespace na data-apitulad nito:

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

Bilang kahalili, upang i-target ang isang partikular na plugin, isama lamang ang pangalan ng plugin bilang isang namespace kasama ang data-api namespace tulad nito:

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

Mga kaganapan

Nagbibigay ang Bootstrap ng mga custom na kaganapan para sa mga natatanging pagkilos ng karamihan sa mga plugin. Sa pangkalahatan, ang mga ito ay dumating sa isang infinitive at past participle form - kung saan ang infinitive (hal. show) ay na-trigger sa simula ng isang kaganapan, at ang past participle form nito (hal. shown) ay na-trigger sa pagkumpleto ng isang aksyon.

Ang lahat ng infinitive na kaganapan ay nagbibigay ng preventDefault()functionality. Nagbibigay ito ng kakayahang ihinto ang pagpapatupad ng isang aksyon bago ito magsimula. Ang pagbabalik ng false mula sa isang event handler ay awtomatikong tatawag preventDefault().

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

Programmatic API

Naniniwala rin kami na dapat mong magamit ang lahat ng Bootstrap plugins sa pamamagitan lamang ng JavaScript API. Ang lahat ng mga pampublikong API ay iisa, nakaka-chainable na mga pamamaraan, at ibinabalik ang koleksyon na naaksyunan.

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

Ang lahat ng mga pamamaraan ay dapat tumanggap ng isang opsyonal na object na opsyon, isang string na nagta-target sa isang partikular na paraan, o wala (na nagpasimula ng isang plugin na may default na gawi):

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

Inilalantad din ng bawat plugin ang raw constructor nito sa isang Constructorproperty: $.fn.popover.Constructor. Kung gusto mong makakuha ng partikular na instance ng plugin, direktang kunin ito mula sa isang elemento: $('[rel="popover"]').data('popover').

Mga asynchronous na function at transition

Ang lahat ng mga pamamaraan ng programmatic API ay asynchronous at bumalik sa tumatawag kapag nagsimula ang paglipat ngunit bago ito matapos .

Upang maisagawa ang isang aksyon kapag nakumpleto na ang paglipat, maaari kang makinig sa kaukulang kaganapan.

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

Bilang karagdagan, ang isang tawag sa pamamaraan sa isang bahagi ng paglipat ay hindi papansinin .

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

Mga default na setting

Maaari mong baguhin ang mga default na setting para sa isang plugin sa pamamagitan ng pagbabago sa Constructor.Defaultobject ng plugin:

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

Walang conflict

Minsan kinakailangan na gumamit ng mga plugin ng Bootstrap kasama ng iba pang mga framework ng UI. Sa mga sitwasyong ito, maaaring mangyari paminsan-minsan ang mga banggaan ng namespace. Kung mangyari ito, maaari kang tumawag .noConflictsa plugin na nais mong ibalik ang halaga.

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

Mga numero ng bersyon

Ang bersyon ng bawat isa sa mga plugin ng jQuery ng Bootstrap ay maaaring ma-access sa pamamagitan ng pag- VERSIONaari ng constructor ng plugin. Halimbawa, para sa tooltip plugin:

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

Walang mga espesyal na fallback kapag hindi pinagana ang JavaScript

Ang mga plugin ng Bootstrap ay hindi bumabalik lalo na nang maganda kapag ang JavaScript ay hindi pinagana. Kung nagmamalasakit ka sa karanasan ng user sa kasong ito, gamitin <noscript>upang ipaliwanag ang sitwasyon (at kung paano muling paganahin ang JavaScript) sa iyong mga user, at/o magdagdag ng sarili mong mga custom na fallback.

Util

Nakadepende ang lahat ng JavaScript file ng Bootstrap util.jsat dapat itong isama kasama ng iba pang mga JavaScript file. Kung ginagamit mo ang compiled (o minified) bootstrap.js, hindi na kailangang isama ito—nandiyan na ito.

util.jsmay kasamang mga function ng utility at isang pangunahing katulong para sa transitionEndmga kaganapan pati na rin ang isang CSS transition emulator. Ito ay ginagamit ng iba pang mga plugin upang tingnan ang CSS transition support at para mahuli ang hanging transition.

Sanitizer

Ginagamit ng Tooltips at Popovers ang aming built-in na sanitizer para i-sanitize ang mga opsyon na tumatanggap ng HTML.

Ang default whiteListna halaga ay ang sumusunod:

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

Kung gusto mong magdagdag ng mga bagong value sa default na ito whiteListmaaari mong gawin ang sumusunod:

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)

Kung gusto mong i-bypass ang aming sanitizer dahil mas gusto mong gumamit ng dedikadong library, halimbawa DOMPuify , dapat mong gawin ang sumusunod:

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