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 (e) {
  if (!data) return e.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 (e) {
  // Action to execute once the collapsible area is expanded
})

Акрамя таго, выклік метаду пераходнага кампанента будзе ігнаравацца .

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

Налады па змаўчанні

Вы можаце змяніць налады па змаўчанні для плагіна, змяніўшы Constructor.Defaultаб'ект плагіна:

$.fn.modal.Constructor.Default.keyboard = false // changes default for the modal plugin's `keyboard` option to 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.1.3"

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

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

Утыл

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

util.jsуключае ў сябе службовыя функцыі і асноўны памочнік для transitionEndпадзей, а таксама эмулятар пераходу CSS. Ён выкарыстоўваецца іншымі плагінамі для праверкі падтрымкі пераходаў CSS і для ўлоўлівання завіслых пераходаў.