JavaScript

JQuery өстендә төзелгән өстәмә JavaScript плагиннарыбыз белән Bootstrapны тормышка китерегез. Eachәр плагин, безнең мәгълүматлар һәм программалы API параметрлары һәм башкалар турында белү.

Индивидуаль яки тупланган

Плагиннар индивидуаль кертелергә мөмкин (Bootstrap индивидуаль кулланып js/dist/*.js), яисә берьюлы куллану bootstrap.jsяки минимальләштерү bootstrap.min.js(икесен дә кертмәгез).

Әгәр дә сез бәйләүче куллансагыз (Веб-пакет, Rollup…), сез /js/dist/*.jsUMD әзер файлларны куллана аласыз.

Бәйләнешләр

Кайбер плагиннар һәм CSS компонентлары бүтән плагиннарга бәйле. Әгәр дә сез плагиннарны аерым кертсәгез, бу бәйләнешләрне документларда тикшерегез. Шулай ук ​​барлык плагиннар jQuery белән бәйле (бу jQuery плагин файллары алдыннан кертелергә тиеш дигәнне аңлата ). JQuery'ның нинди версияләре булышканын белү өчен безнең белән киңәшләшегез.package.json

Безнең тамчылар, поповерлар һәм кораллар шулай ук ​​Popper.js'ка бәйле .

Мәгълүмат атрибутлары

Бөтен Bootstrap плагиннары диярлек HTML аша мәгълүмат атрибутлары белән кушылырга һәм конфигурацияләнергә мөмкин (безнең JavaScript функциясен куллануның өстенлекле ысулы). Бер элементта бер генә мәгълүмат атрибутларын кулланырга онытмагыз (мәсәлән, сез бер үк төймәдән кораллар һәм модальне эшләтеп җибәрә алмыйсыз.)

Ләкин, кайбер очракларда бу функцияне сүндерергә кирәк. Мәгълүмат атрибуты API-ны сүндерү өчен, документ исемендәге барлык вакыйгаларны бәйләгез data-api:

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

Альтернатив рәвештә, билгеле бер плагинны максат итү өчен, плагинның исемен исем киңлеге итеп кертегез, шулай ук ​​мәгълүмат-api исем киңлеге:

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

Вакыйгалар

Bootstrap күпчелек плагиннарның уникаль эшләре өчен махсус вакыйгалар тәкъдим итә. Гадәттә, алар инфинитив һәм үткән катнашу формасында килә - монда инфинитив (мәс. show) Вакыйга башланганда, һәм аның үткән катнашу формасы (мәс. shown) Эш тәмамлангач башлана.

Барлык инфинитив вакыйгалар да preventDefault()функциональлек бирә. Бу эшне башлар алдыннан туктату мөмкинлеген бирә. Вакыйга эшкәртүчесеннән ялганны кире кайтару шулай ук ​​автоматик рәвештә шалтыратыр preventDefault().

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

Программатик API

Без шулай ук ​​барлык Bootstrap плагиннарын JavaScript API аша гына куллана белергә тиеш дип саныйбыз. Барлык иҗтимагый API-лар бер, чылбырлы ысуллар, һәм эшләнгән коллекцияне кире кайтаралар.

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

Барлык ысуллар да өстәмә вариантлар объектын, билгеле бер методка юнәлтелгән сызыкны яки бернәрсә дә кабул итмәскә тиеш (бу плагинны килешү тәртибе белән башлый):

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

Eachәр плагин шулай ук ​​чимал конструкторын Constructorмилектә фаш итә : $.fn.popover.Constructor. Әгәр дә сез билгеле бер плагин инстанциясен алырга телисез икән, аны турыдан-туры элементтан алыгыз : $('[rel="popover"]').data('popover').

Асинхрон функцияләр һәм күчү

Барлык программатик API ысуллары да асинхрон һәм күчү башланганнан соң, ләкин беткәнче шалтыратучыга кире кайта .

Күчеш тәмамлангач, эшне башкару өчен, сез тиешле вакыйганы тыңлый аласыз.

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

Моннан тыш, күчү компонентына методик чакыру игътибарсыз калачак .

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

Килешенгән көйләүләр

Constructor.DefaultПлагин объектын үзгәртеп, плагин өчен килешенгән көйләүләрне үзгәртә аласыз :

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

Конфликт юк

Кайвакыт Bootstrap плагиннарын башка UI рамкалары белән кулланырга кирәк. Бу шартларда вакыт-вакыт исем киңлеге бәрелешләре булырга мөмкин. .noConflictБу очрак булса, сез кыйммәтен кире кайтарырга теләгән плагинга шалтырата аласыз.

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

Вариант номерлары

Bootstrap-ның jQuery плагиннарының һәрберсенең версиясенә VERSIONплагин конструкторы милеге аша кереп була. Мәсәлән, корал плагины өчен:

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

JavaScript сүндерелгәндә махсус кимчелекләр юк

JavaScript сүндерелгәндә Bootstrap плагиннары аеруча матур итеп кире кайтмыйлар. Әгәр дә сез бу очракта кулланучының тәҗрибәсе турында кайгыртасыз икән, кулланучыларга <noscript>ситуацияне (һәм JavaScriptны ничек яңадан эшләтеп җибәрергә) аңлату өчен кулланыгыз, һәм / яки үзегезнең кимчелекләрегезне өстәгез.

Утил

Bootstrap-ның барлык JavaScript файллары бәйле util.jsһәм ул башка JavaScript файллары белән бергә кертелергә тиеш. Әгәр дә сез тупланган (яки минималь) кулланасыз икән, моны bootstrap.jsкертергә кирәкми - ул инде бар.

util.jsфайдалы функцияләрне һәм вакыйгалар өчен төп ярдәмче, transitionEndшулай ук ​​CSS күчү эмуляторын үз эченә ала. Бу бүтән плагиннар тарафыннан CSS күчү ярдәмен тикшерү һәм асылынган күчү өчен кулланыла.

Санитизатор

Кораллар һәм Поповерлар HTML-ны кабул иткән вариантларны санитарлаштыру өчен безнең урнаштырылган санитизаторны кулланалар.

Килешенгән whiteListкыйммәт түбәндәгеләр:

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

Әгәр дә сез бу килешүгә яңа кыйммәтләр өстәргә телисез икән, whiteListсез түбәндәгеләрне эшли аласыз:

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)

Әгәр дә сез безнең санитизаторны узып китәсегез килсә, сез махсус китапханә куллануны өстен күрәсез, мәсәлән , DOMPurify , сез түбәндәгеләрне эшләргә тиеш:

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