JavaScript

JQuery-da yaratilgan ixtiyoriy JavaScript plaginlarimiz yordamida Bootstrap-ni jonlantiring. Har bir plagin, maʼlumotlarimiz va dasturiy API imkoniyatlari va boshqalar haqida bilib oling.

Individual yoki tuzilgan

Plaginlar alohida-alohida (Bootstrap individual dan foydalangan holda js/dist/*.js) yoki bir vaqtning o'zida bootstrap.jsyoki kichiklashtirilgan bootstrap.min.js(ikkalasi ham qo'shilmaydi) yordamida kiritilishi mumkin.

Agar siz bundlerdan (Webpack, Rollup…) foydalansangiz /js/dist/*.js, UMD tayyor bo'lgan fayllardan foydalanishingiz mumkin.

Bog'liqlar

Ba'zi plaginlar va CSS komponentlari boshqa plaginlarga bog'liq. Agar siz plaginlarni alohida-alohida qo'shsangiz, hujjatlarda ushbu bog'liqliklarni tekshiring. Shuni ham yodda tutingki, barcha plaginlar jQuery-ga bog'liq (bu jQuery plagin fayllaridan oldin kiritilishi kerakligini anglatadi ). jQuery-ning qaysi versiyalari qo'llab-quvvatlanishini ko'rish uchun biz bilan maslahatlashing .package.json

Bizning ochiladigan menyular, popoverlar va maslahatlar ham Popper.js ga bog'liq .

Ma'lumotlar atributlari

Deyarli barcha Bootstrap plaginlarini faqat ma'lumotlar atributlari bilan HTML orqali yoqish va sozlash mumkin (JavaScript funksiyasidan foydalanishning afzal usuli). Bitta elementda faqat bitta maʼlumotlar atributlari toʻplamidan foydalanishga ishonch hosil qiling (masalan, bitta tugmadan asboblar maslahati va modalni ishga tushira olmaysiz.)

Biroq, ba'zi hollarda bu funksiyani o'chirib qo'yish maqsadga muvofiqdir. API ma'lumotlar atributini o'chirib qo'yish uchun hujjatdagi barcha hodisalarni quyidagi tarzda ajratib oling data-api:

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

Shu bilan bir qatorda, ma'lum bir plaginni maqsad qilish uchun plagin nomini quyidagi kabi data-api nom maydoni bilan birga nom maydoni sifatida kiriting:

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

Voqealar

Bootstrap ko'pchilik plaginlarning noyob harakatlari uchun maxsus tadbirlarni taqdim etadi. Odatda, bular infinitiv va o‘tgan zamon shakllarida keladi - bunda infinitiv (masalan show, ) hodisa boshida, uning o‘tgan zamon shakli (masalan shown, ) esa ish-harakat tugagandan so‘ng ishga tushadi.

Barcha infinitiv hodisalar preventDefault()funksionallikni ta'minlaydi. Bu harakat boshlanishidan oldin uning bajarilishini to'xtatish imkoniyatini beradi. Hodisa ishlov beruvchisidan false qaytarilishi ham avtomatik ravishda qo'ng'iroq preventDefault()qiladi.

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

Dasturli API

Shuningdek, barcha Bootstrap plaginlarini faqat JavaScript API orqali ishlatishingiz kerakligiga ishonamiz. Barcha ommaviy API’lar yagona, zanjirband bo‘ladigan usullar bo‘lib, ular bajarilgan to‘plamni qaytaradi.

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

Barcha usullar ixtiyoriy variantlar ob'ektini, ma'lum bir usulga mo'ljallangan qatorni yoki hech narsani (standart xatti-harakat bilan plaginni ishga tushiradigan) qabul qilishi kerak:

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

Har bir plagin shuningdek, o'zining xom konstruktorini Constructorxususiyatga ko'rsatadi: $.fn.popover.Constructor. Agar siz ma'lum bir plagin namunasini olishni istasangiz, uni to'g'ridan-to'g'ri elementdan oling: $('[rel="popover"]').data('popover').

Asinxron funktsiyalar va o'tishlar

Barcha dasturiy API usullari asenkron bo'lib, o'tish boshlanganidan keyin, lekin tugashidan oldin qo'ng'iroq qiluvchiga qaytadi .

O'tish tugagandan so'ng harakatni bajarish uchun siz tegishli voqeani tinglashingiz mumkin.

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

Bunga qo'shimcha ravishda, o'tish komponentidagi usul chaqiruvi e'tiborga olinmaydi .

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

Standart sozlamalar

Constructor.DefaultPlagin ob'ektini o'zgartirish orqali plagin uchun standart sozlamalarni o'zgartirishingiz mumkin :

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

Mojaro yo'q

Ba'zan boshqa UI ramkalari bilan Bootstrap plaginlaridan foydalanish kerak bo'ladi. Bunday sharoitda, vaqti-vaqti bilan nomlar maydoni to'qnashuvi sodir bo'lishi mumkin. Agar bu ro'y bersa, siz .noConflictqiymatini qaytarishni xohlagan plaginga qo'ng'iroq qilishingiz mumkin.

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

Versiya raqamlari

VERSIONBootstrap jQuery plaginlarining har bir versiyasiga plagin konstruktorining xususiyati orqali kirish mumkin . Masalan, maslahat plagini uchun:

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

JavaScript o'chirilgan bo'lsa, maxsus zaxiralar yo'q

Bootstrap plaginlari, ayniqsa JavaScript o'chirilgan bo'lsa, unchalik yaxshi ishlamaydi. Agar siz bu holatda foydalanuvchi tajribasi haqida qayg'ursangiz, foydalanuvchilarga <noscript>vaziyatni tushuntirish uchun foydalaning (va JavaScript-ni qayta yoqish) va/yoki o'zingizning shaxsiy zaxiralaringizni qo'shing.

Util

Bootstrap-ning barcha JavaScript fayllari bunga bog'liq util.jsva u boshqa JavaScript fayllari bilan birga kiritilishi kerak. Agar siz kompilyatsiya qilingan (yoki kichiklashtirilgan) dan foydalanayotgan bo'lsangiz, buni bootstrap.jsqo'shishning hojati yo'q - u allaqachon mavjud.

util.jsUtility funktsiyalari va voqealar uchun asosiy yordamchi transitionEnd, shuningdek CSS o'tish emulyatorini o'z ichiga oladi. U boshqa plaginlar tomonidan CSS o'tish qo'llab-quvvatlashini tekshirish va osilgan o'tishlarni qo'lga olish uchun ishlatiladi.

Sanitizer

Maslahatlar va Popoverlar HTMLni qabul qiladigan variantlarni tozalash uchun oʻrnatilgan sanitarizatorimizdan foydalanadi.

Standart whiteListqiymat quyidagicha:

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

Agar siz ushbu standart qiymatga yangi qiymatlarni qo'shmoqchi whiteListbo'lsangiz, quyidagilarni qilishingiz mumkin:

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)

Agar siz maxsus kutubxonadan, masalan , DOMPurify dan foydalanishni afzal ko'rganingiz uchun bizning dezinfektsiyalash vositasini chetlab o'tmoqchi bo'lsangiz, quyidagilarni qilishingiz kerak:

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