JavaScript

JQuery'де курулган кошумча JavaScript плагиндерибиз менен Bootstrap'ти жандандырыңыз. Ар бир плагин, биздин дайындар жана программалык API параметрлери жана башкалар жөнүндө билип алыңыз.

Жеке же түзүлгөн

Плагиндер өзүнчө (Bootstrap'тин жекечеси js/dist/*.jsменен) же бардыгын бир эле учурда bootstrap.jsже кичирейтилген (экөөнү тең камтыба ) колдонсо болот bootstrap.min.js.

Эгерде сиз байлагычты (Webpack, Rollup…) колдонсоңуз /js/dist/*.js, UMD даяр болгон файлдарды колдоно аласыз.

Көз карандылыктар

Кээ бир плагиндер жана CSS компоненттери башка плагиндерден көз каранды. Эгер сиз плагиндерди өзүнчө кошсоңуз, бул көз карандылыктарды документтерде текшериңиз. Ошондой эле, бардык плагиндер jQueryден көз каранды экенин эске алыңыз (бул jQuery плагин файлдарынын алдында камтылышы керек дегенди билдирет). jQuery'динpackage.json кайсы версиялары колдоого алынарын көрүү үчүн биздин кеңешке кайрылыңыз.

Биздин ачылуучу тизмелерибиз, поповерлерибиз жана кеңештерибиз да Popper.js'тен көз каранды .

Маалымат атрибуттары

Дээрлик бардык Bootstrap плагиндерин маалымат атрибуттары менен гана HTML аркылуу иштетип, конфигурациялоого болот (JavaScript функциясын колдонуунун биз жактырган ыкмасы). Бир эле элементте маалымат атрибуттарынын бир топтомун колдонууну унутпаңыз (мисалы, сиз бир эле баскычтан инструментти жана модалды иштете албайсыз.)

Бирок, кээ бир учурларда, бул функцияны өчүрүү туура болушу мүмкүн. API маалымат атрибутун өчүрүү үчүн документтеги бардык окуяларды төмөнкүдөй түрдө ажыратыңыз data-api:

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

Же болбосо, белгилүү бир плагинди максаттуу үчүн, жөн гана плагиндин атын төмөнкүдөй data-api аттар мейкиндиги менен кошо аттар мейкиндиги катары кошуңуз:

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

Окуялар

Bootstrap көпчүлүк плагиндердин уникалдуу аракеттери үчүн ыңгайлаштырылган окуяларды камсыз кылат. Негизинен булар инфинитив жана өткөн чак формада келет - мында инфинитив (мис. show) окуянын башталышында, ал эми анын өткөн чак формасы (мис. shown) иш-аракет аяктаганда ишке ашырылат.

Бардык инфинитив окуялар preventDefault()функционалдуулукту камсыз кылат. Бул аракеттин аткарылышын ал башталганга чейин токтотуу мүмкүнчүлүгүн берет. Окуяны иштеткичтен жалганды кайтаруу да автоматтык түрдө чакырат 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Плагиндин объектисин өзгөртүү менен плагиндин демейки жөндөөлөрүн өзгөртө аласыз :

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

Конфликт жок

Кээде башка UI алкактары менен Bootstrap плагиндерин колдонуу керек болот. Мындай шарттарда аттар мейкиндигинде кагылышуулар кээде пайда болушу мүмкүн. Эгер мындай болуп калса, сиз .noConflictмаанисин кайтарууну каалаган плагинге чалсаңыз болот.

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

Версия номерлери

Bootstrap's jQuery плагиндеринин ар биринин версиясына VERSIONплагиндин конструкторунун касиети аркылуу кирүүгө болот. Мисалы, инструментарий плагини үчүн:

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

JavaScript өчүрүлгөндө, эч кандай өзгөчө кайтаруу жок

Bootstrap плагиндери JavaScript өчүрүлгөндө өзгөчө кооздук менен кайра түшпөйт. Эгер сиз бул учурда колдонуучунун тажрыйбасына маани берсеңиз, колдонуучуларыңызга <noscript>кырдаалды (жана JavaScript-ти кайра иштетүүнү) түшүндүрүү үчүн колдонуңуз жана/же өзүңүздүн жеке ыңгайлаштырылган резервдерди кошуңуз.

Util

Бардык Bootstrap'тын JavaScript файлдары көз каранды util.jsжана башка JavaScript файлдары менен кошо камтылууга тийиш. Эгер сиз компиляцияланган (же кичирейтилген) файлын колдонуп жатсаңыз, муну кошуунун bootstrap.jsкереги жок — ал мурунтан эле бар.

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

Санитизатор

Tooltips жана Popovers биздин орнотулган дезинфекциялоочу каражатыбызды 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', '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)
  }
})