JavaScript

Ажывіце Bootstrap з дапамогай нашых дадатковых плагінаў JavaScript, створаных на аснове jQuery. Даведайцеся аб кожным плагіне, нашых параметрах даных і праграмнага API і многае іншае.

Індывідуальныя або складзеныя

Убудовы могуць быць уключаны паасобку (з выкарыстаннем Bootstrap's individual js/dist/*.js), або ўсе адразу з дапамогай bootstrap.jsабо мінімізацыі bootstrap.min.js(не ўключайце абодва).

Калі вы выкарыстоўваеце камплектавальнік (Webpack, Rollup…), вы можаце выкарыстоўваць /js/dist/*.jsфайлы, якія падтрымліваюць UMD.

Залежнасці

Некаторыя ўбудовы і кампаненты CSS залежаць ад іншых убудоў. Калі вы ўключаеце плагіны паасобку, пераканайцеся, што праверылі гэтыя залежнасці ў дакументах. Таксама звярніце ўвагу, што ўсе плагіны залежаць ад jQuery (гэта азначае, што jQuery павінен быць уключаны перад файламі плагінаў). Пракансультуйцеся з наміpackage.json , каб даведацца, якія версіі jQuery падтрымліваюцца.

Нашы выпадальныя спісы, усплывальныя вобразы і падказкі таксама залежаць ад Popper.js .

Атрыбуты дадзеных

Амаль усе плагіны Bootstrap можна ўключыць і наладзіць толькі праз HTML з атрыбутамі даных (наш пераважны спосаб выкарыстання функцыянальнасці JavaScript). Абавязкова выкарыстоўвайце толькі адзін набор атрыбутаў даных для аднаго элемента (напрыклад, вы не можаце выклікаць падказку і мадальнае з адной і той жа кнопкі.)

Аднак у некаторых сітуацыях можа быць пажадана адключыць гэту функцыянальнасць. Каб адключыць API атрыбутаў дадзеных, развязайце ўсе падзеі ў прасторы імёнаў дакумента data-apiнаступным чынам:

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

У якасці альтэрнатывы, каб арыентавацца на пэўны плагін, проста ўключыце імя плагіна ў якасці прасторы імёнаў разам з прасторай імёнаў data-api, як гэта:

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

Падзеі

Bootstrap забяспечвае карыстальніцкія падзеі для большасці унікальных дзеянняў плагінаў. Як правіла, яны бываюць у форме інфінітыва і дзеепрыметніка прошлага часу - дзе інфінітыў (напр. show) спрацоўвае ў пачатку падзеі, а яго форма прошлага дзеепрыметніка (напр. shown) спрацоўвае пасля завяршэння дзеяння.

Усе інфінітыўныя падзеі забяспечваюць preventDefault()функцыянальнасць. Гэта забяспечвае магчымасць спыніць выкананне дзеяння да яго пачатку. Вяртанне false з апрацоўшчыка падзей таксама аўтаматычна выклікае 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

Кожны плагін таксама паказвае свой неапрацаваны канструктар ва 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 з іншымі структурамі карыстацкага інтэрфейсу. У такіх абставінах перыядычна могуць узнікаць сутыкненні прасторы імёнаў. Калі гэта адбудзецца, вы можаце выклікаць .noConflictплагін, значэнне якога хочаце вярнуць.

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

Нумары версій

Да версіі кожнага з плагінаў jQuery Bootstrap можна атрымаць доступ праз VERSIONуласцівасць канструктара плагіна. Напрыклад, для плагіна падказкі:

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

Няма спецыяльных рэзервовых варыянтаў, калі JavaScript адключаны

Убудовы Bootstrap не адмаўляюцца асабліва вытанчана, калі JavaScript адключаны. Калі вы клапоціцеся аб узаемадзеянні з карыстальнікам у гэтым выпадку, выкарыстоўвайце <noscript>для тлумачэння сітуацыі (і таго, як паўторна ўключыць JavaScript) вашым карыстальнікам, і/або дадайце свае ўласныя запасныя варыянты.

Утыл

Усе файлы JavaScript Bootstrap залежаць ад 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)
  }
})