JavaScript

JQuery дээр бүтээгдсэн манай нэмэлт JavaScript залгаасуудаар Bootstrap-г амилуулаарай. Залгаас тус бүр, манай өгөгдөл болон программын API сонголтууд болон бусад зүйлсийн талаар мэдэж аваарай.

Ганцаарчилсан эсвэл эмхэтгэсэн

Залгаасуудыг тус тусад нь (Bootstrap-ийн individual -ийг ашиглан js/dist/*.js) эсвэл бүгдийг нь нэг дор bootstrap.jsэсвэл жижигрүүлсэн bootstrap.min.js(хоёуланг нь оруулахгүй) ашиглаж болно.

Хэрэв та багцлагч (Webpack, Rollup...) ашигладаг /js/dist/*.jsбол UMD бэлэн файлуудыг ашиглаж болно.

Хамаарал

Зарим залгаасууд болон CSS бүрэлдэхүүн хэсгүүд нь бусад залгаасуудаас хамаардаг. Хэрэв та залгаасуудыг тус тусад нь оруулсан бол эдгээр хамаарлыг баримтаас шалгаарай. Мөн бүх залгаасууд jQuery-ээс хамаардаг гэдгийг анхаарна уу (энэ нь залгаасын файлуудын өмнө jQuery-г оруулах ёстой гэсэн үг ). jQuery-ийн аль хувилбарууд дэмжигддэгийг манайхаас лавлана уу.package.json

Бидний унадаг цэс, поповер болон зөвлөмжүүд нь Popper.js -ээс хамаарна .

Өгөгдлийн шинж чанарууд

Бараг бүх Bootstrap залгаасуудыг зөвхөн өгөгдлийн шинж чанаруудтай (бидний JavaScript функцийг ашиглах илүүд үздэг арга) HTML-ээр дамжуулан идэвхжүүлж, тохируулах боломжтой. Нэг элемент дээр зөвхөн нэг багц өгөгдлийн шинж чанарыг ашиглахаа мартуузай (жишээ нь, та нэг товчлуураас хэрэгслийн зөвлөмж болон модальыг идэвхжүүлэх боломжгүй).

Гэсэн хэдий ч зарим тохиолдолд энэ функцийг идэвхгүй болгох нь зүйтэй юм. Өгөгдлийн атрибут 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

Мөн залгаас бүр өөрийн түүхий бүтээгчийг 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

Зөрчилдөөн байхгүй

Заримдаа бусад UI хүрээтэй Bootstrap залгаасуудыг ашиглах шаардлагатай болдог. Ийм нөхцөлд нэрийн орон зайн зөрчилдөөн хааяа тохиолдож болно. Хэрэв ийм зүйл тохиолдвол та .noConflictутгыг буцаахыг хүссэн залгаас руу залгаж болно.

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

Хувилбарын дугаарууд

VERSIONBootstrap-ийн jQuery залгаас бүрийн хувилбарт залгаасын үүсгэгчийн өмчөөр хандаж болно . Жишээлбэл, зааврын нэмэлт өргөтгөлийн хувьд:

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

JavaScript-г идэвхгүй болгосон үед тусгай нөөц байхгүй

JavaScript идэвхгүй болсон үед Bootstrap-ийн залгаасууд тийм ч сайн унадаггүй. Хэрэв та энэ тохиолдолд хэрэглэгчийн туршлагад санаа тавьж байгаа бол хэрэглэгчдэдээ <noscript>нөхцөл байдлыг тайлбарлах (мөн JavaScript-г хэрхэн дахин идэвхжүүлэх) болон/эсвэл өөрийн захиалгат өгөгдлүүдийг нэмэхийн тулд ашиглана уу.

Util

Bootstrap-ийн бүх JavaScript файлууд нь үүнээс хамаардаг util.jsбөгөөд бусад JavaScript файлуудтай хамт байх ёстой. Хэрэв та эмхэтгэсэн (эсвэл жижигрүүлсэн) ашиглаж bootstrap.jsбайгаа бол үүнийг оруулах шаардлагагүй - энэ нь аль хэдийн байна.

util.jsХэрэглээний функцууд болон transitionEndүйл явдлын үндсэн туслах, мөн CSS шилжилтийн эмулятор орно. Үүнийг бусад залгаасууд CSS-ийн шилжилтийн дэмжлэг байгаа эсэхийг шалгах, өлгөөтэй шилжилтийг барихад ашигладаг.

Ариутгагч

Зөвлөмжүүд болон 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', '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)
  }
})