JavaScript

JQuery-da gurlan goşmaça JavaScript plaginlerimiz bilen Bootstrap-a jan beriň. Her bir plugin, maglumatlarymyz we programma üpjünçiligi API opsiýalary we başgalar barada öwreniň.

Şahsy ýa-da düzülen

Pluginleri aýratynlykda (Bootstrap-yň şahsyýetini ulanyp js/dist/*.js) ýa-da birbada ulanyp bootstrap.jsýa-da kiçeldip bolýar bootstrap.min.js(ikisini hem goşmaň).

Baglaýjy (Webpack, Rollup…) ulansaňyz /js/dist/*.js, UMD taýýar faýllary ulanyp bilersiňiz.

Baglylyklar

Käbir pluginler we CSS komponentleri beýleki pluginlere baglydyr. Plaginleri aýratynlykda goşsaňyz, resminamalarda bu baglylyklary barlaň. Şeýle hem, ähli pluginleriň jQuery-a baglydygyny ýadyňyzdan çykarmaň (bu jQuery plugin faýllaryndan öň goşulmalydyr ). JQuery-iň haýsy wersiýalarynyň goldanýandygyny görmek üçin biziň bilen maslahatlaşyň .package.json

Açylýan ýerlerimiz, açýan ýerlerimiz we gurallarymyz Popper.js -e bagly .

Maglumat atributlary

“Bootstrap” pluginleriniň hemmesini diýen ýaly diňe HTML atributlary (JavaScript funksiýasyny ulanmagyň ileri tutulýan usuly) bilen işledip we düzüp bolýar. Diňe bir elementde maglumat atributlarynyň diňe bir toplumyny ulanmagy unutmaň (mysal üçin, şol bir düwmeden gurallar we modal döredip bilmersiňiz.)

Şeýle-de bolsa, käbir ýagdaýlarda bu funksiýany öçürmek islenip bilner. Maglumat atributy API-i öçürmek üçin resminamanyň atlaryndaky data-apiýaly wakalary aýyryň:

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

Ativea-da bolmasa, belli bir plagini nyşana almak üçin, plugin adyny at giňişligi hökmünde maglumat-api at giňişligi bilen birlikde goşuň:

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

Wakalar

“Bootstrap”, pluginleriň özboluşly hereketleri üçin ýörite wakalary üpjün edýär. Umuman aýdylanda, bular infinitif we geçmiş gatnaşygy görnüşinde gelýär - bu ýerde showbir hadysanyň başynda infinitif (mysal üçin shown) ýüze çykýar we bir iş gutarandan soň öňki gatnaşygy görnüşi (mysal üçin) ýüze çykýar.

Infhli infinitif hadysalar preventDefault()işlemegi üpjün edýär. Bu, hereketiň başlamazdan ozal ýerine ýetirilmegini togtatmak ukybyny üpjün edýär. Waka işleýjisinden ýalan yzyna gaýtarmak hem awtomatiki jaň eder preventDefault().

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

Programmatiki API

Şeýle hem, ähli Bootstrap pluginlerini diňe JavaScript API arkaly ulanyp biljekdigiňize ynanýarys. Publichli jemgyýetçilik API-leri ýeke-täk, zynjyrly usullardyr we ýerine ýetirilen kolleksiýany yzyna gaýtaryp berýär.

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

Methodshli usullar goşmaça opsiýa obýektini, belli bir usuly nyşana alýan setiri ýa-da hiç zady kabul etmeli däldir (deslapky hereket bilen bir plugin açýar):

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

Her bir plugin, çig konstruktoryny bir Constructoremläkde açýar : $.fn.popover.Constructor. Belli bir plugin mysalyny almak isleseňiz, göni bir elementden alyň : $('[rel="popover"]').data('popover').

Asynkron funksiýalar we geçişler

Programhli programma API usullary asynkron bolup, geçiş başlansoň, ýöne gutarmanka jaň edijä gaýdyp gelýär .

Geçiş tamamlanandan soň bir işi ýerine ýetirmek üçin degişli wakany diňläp bilersiňiz.

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

Mundan başga-da, geçiş komponentine çagyryş usuly hasaba alynmaz .

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

Bellenen sazlamalar

Bir plugin üçin deslapky sazlamalary üýtgedip bilersiňiz Constructor.Default:

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

Dawa ýok

Käwagt beýleki UI çarçuwalary bilen Bootstrap plaginlerini ulanmaly bolýar. Bu ýagdaýlarda at giňişliginde wagtal-wagtal çaknyşyklar bolup biler. .noConflictŞeýle ýagdaý ýüze çyksa, bahasyny yzyna öwürmek isleýän pluginiňize jaň edip bilersiňiz.

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

Wersiýa belgileri

VERSION“Bootstrap” -yň jQuery pluginleriniň hersiniň wersiýasyna plugin konstruktorynyň eýeçiligi arkaly girip bolýar . Mysal üçin, gurallar üçin plugin üçin:

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

JavaScript ýapylanda aýratyn ýalňyşlyklar ýok

JavaScript ýapylanda “Bootstrap” -yň pluginleri aýratyn yza çekilmeýär. Bu ýagdaýda ulanyjynyň tejribesi barada alada edýän bolsaňyz, ulanyjylaryňyza <noscript>ýagdaýy (we JavaScript-i nädip täzeden işletmelidigini) düşündirmek we / ýa-da öz ýalňyşlaryňyzy goşmak üçin ulanyň.

Util

“Bootstrap” -yň ähli JavaScript faýllary baglydyr util.jswe beýleki JavaScript faýllary bilen birlikde goşulmalydyr. Eger düzülen (ýa-da kiçeldilen) ulanýan bolsaňyz, bootstrap.jsmuny goşmagyň zerurlygy ýok - ol eýýäm bar.

util.jspeýdaly funksiýalary we transitionEndwakalar üçin esasy kömekçini, şeýle hem CSS geçiş emulýatoryny öz içine alýar. Beýleki pluginler tarapyndan CSS geçiş goldawyny barlamak we asylan geçişleri tutmak üçin ulanylýar.

Arassalaýjy

Gurallar we popovers, HTML-ni kabul edýän wariantlary arassalamak üçin gurlan sanitizatorymyzy ulanýarlar.

Bellenen whiteListbaha aşakdakylar:

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

Bu başlangyç üçin täze bahalar goşmak isleseňiz whiteList, aşakdakylary edip bilersiňiz:

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)

Sanitizatorymyzdan aýlanyp geçmek isleseňiz, aýratyn kitaphanany, mysal üçin DOMPurify ulanmagy makul bilýän bolsaňyz, aşakdakylary etmeli:

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