JavaScript

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

Энэ хуудсан дээр

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

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

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

JavaScript хүрээтэй ашиглах

Bootstrap CSS-ийг ямар ч фреймворктой ашиглаж болох ч Bootstrap JavaScript нь DOM-ийн талаар бүрэн мэдлэгтэй React, Vue, Angular зэрэг JavaScript фреймворкуудтай бүрэн нийцэхгүй байна . Bootstrap болон фрэймворк хоёулаа ижил DOM элементийг мутаци хийх оролдлого хийж болох бөгөөд үүний үр дүнд "нээлттэй" байрлалд гацсан уналт зэрэг алдаа гарч ирдэг.

Энэ төрлийн фреймворк ашигладаг хүмүүст зориулсан илүү сайн хувилбар бол Bootstrap JavaScript -ийн оронд тухайн хүрээний багцыг ашиглах явдал юм . Энд хамгийн алдартай сонголтуудын зарим нь байна:

React: React Bootstrap
Vue: BootstrapVue (одоогоор зөвхөн Vue 2 болон Bootstrap 4-ийг дэмждэг)
Өнцөг: ng-bootstrap

Bootstrap-ийг модуль болгон ашиглах

Та өөрөө туршаад үзээрэй! Bootstrap-ийг ES модуль болгон ашиглахын тулд эх код болон ажлын демо-г twbs/examples репозитороос татаж авна уу . Та жишээг StackBlitz дээр нээж болно.

Бид Bootstrap-ийн ESM( bootstrap.esm.jsба ) хувилбараар бүтээгдсэн хувилбарыг санал болгож байгаа бөгөөд хэрэв таны зорилтот хөтчүүд үүнийг дэмждэгbootstrap.esm.min.js бол Bootstrap-г хөтчийн модуль болгон ашиглах боломжтой .

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

JS багцлагчтай харьцуулахад хөтөч дээр ESM ашиглах нь модулийн нэрний оронд бүтэн зам болон файлын нэрийг ашиглахыг шаарддаг. Хөтөчөөс JS модулиудын талаар дэлгэрэнгүй уншина уу. Тийм учраас бид дээрхийн 'bootstrap.esm.min.js'оронд хэрэглэдэг 'bootstrap'. Гэсэн хэдий ч Попперыг манай JavaScript-д дараах байдлаар импортлодог Попперын хамаарал нь үүнийг улам хүндрүүлдэг.

import * as Popper from "@popperjs/core"

Хэрэв та үүнийг байгаагаар нь оролдвол консол дээр дараахтай адил алдаа гарч ирнэ.

Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relative references must start with either "/", "./", or "../".

Үүнийг засахын тулд та importmapзамыг дуусгахын тулд дурын модулийн нэрийг шийдвэрлэхийн тулд ашиглаж болно. Хэрэв таны зорилтот хөтчүүд дэмждэггүй importmapбол та es-module-shims төслийг ашиглах хэрэгтэй болно. Энэ нь Bootstrap болон Popper-д хэрхэн ажилладаг талаар эндээс үзнэ үү.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <title>Hello, modularity!</title>
  </head>
  <body>
    <h1>Hello, modularity!</h1>
    <button id="popoverButton" type="button" class="btn btn-primary btn-lg" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button>

    <script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js" crossorigin="anonymous"></script>
    <script type="importmap">
    {
      "imports": {
        "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js",
        "bootstrap": "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.esm.min.js"
      }
    }
    </script>
    <script type="module">
      import * as bootstrap from 'bootstrap'

      new bootstrap.Popover(document.getElementById('popoverButton'))
    </script>
  </body>
</html>

Хамаарал

Зарим залгаасууд болон CSS бүрэлдэхүүн хэсгүүд нь бусад залгаасуудаас хамаардаг. Хэрэв та залгаасуудыг тус тусад нь оруулсан бол эдгээр хамаарлыг баримтаас шалгаарай.

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

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

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

Сонголтуудыг өгөгдлийн атрибутууд эсвэл JavaScript-ээр дамжуулж болох тул та -д сонголтын нэрийг нэмж data-bs-болно data-bs-animation="{value}". Өгөгдлийн атрибутуудаар сонголтуудыг дамжуулахдаа сонголтын нэрийн төрлийг " camelCase "-ээс " kebab-case " болгон өөрчлөхөө мартуузай . Жишээлбэл, data-bs-custom-class="beautifier"оронд нь хэрэглэнэ data-bs-customClass="beautifier".

Bootstrap 5.2.0 хувилбарын хувьд бүх бүрэлдэхүүн хэсгүүд нь энгийн бүрэлдэхүүн хэсгийн тохиргоог JSON стринг болгон байрлуулах боломжтой туршилтын нөөцлөгдсөн өгөгдлийн шинж чанарыг дэмждэг. data-bs-configЭлемент data-bs-config='{"delay":0, "title":123}'болон data-bs-title="456"шинж чанаруудтай бол эцсийн titleутга нь байх 456ба тусдаа өгөгдлийн шинж чанарууд нь дээр өгөгдсөн утгыг дарна data-bs-config. Нэмж дурдахад, одоо байгаа өгөгдлийн атрибутууд нь JSON утгыг хадгалах боломжтой data-bs-delay='{"show":0,"hide":150}'.

Сонгогчид

Бид гүйцэтгэлийн шалтгаанаар DOM элементүүдийг асуулгад эх querySelectorболон аргуудыг ашигладаг тул та хүчинтэй сонгогч ашиглах ёстой . Хэрэв та гэх мэт тусгай сонгогч ашигладаг бол тэдгээрээс зайлсхийхээ мартуузай.querySelectorAllcollapse:Example

Үйл явдал

Bootstrap нь ихэнх залгаасуудын өвөрмөц үйлдлүүдэд зориулсан тусгай үйл явдлуудыг хангадаг. showЕрөнхийдөө эдгээр нь үйл явдлын эхэнд инфинитив (жишээ нь ) идэвхждэг shownба үйл ажиллагаа дууссаны дараа түүний өнгөрсөн үеийн хэлбэр (жишээ нь ) идэвхждэг.

Бүх инфинитив үйл явдлууд preventDefault()функцийг хангадаг. Энэ нь үйлдлийг эхлэхээс өмнө гүйцэтгэх ажиллагааг зогсоох боломжийг олгодог. Үйл явдал зохицуулагчаас худал буцаах нь мөн автоматаар дуудагдана preventDefault().

const myModal = document.querySelector('#myModal')

myModal.addEventListener('show.bs.modal', event => {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

Програмчлалын API

Бүх бүтээгчид нэмэлт сонголтын объектыг хүлээн авдаг эсвэл юу ч биш (энэ нь анхдагч үйлдэлтэй залгаасыг эхлүүлдэг):

const myModalEl = document.querySelector('#myModal')

const modal = new bootstrap.Modal(myModalEl) // initialized with defaults

const configObject = { keyboard: false }
const modal1 = new bootstrap.Modal(myModalEl, configObject) // initialized with no keyboard

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

bootstrap.Popover.getInstance(myPopoverEl)

nullХүссэн элемент дээр жишээ эхлүүлээгүй тохиолдолд энэ арга нь буцаж ирнэ .

Эсвэл getOrCreateInstanceDOM элементтэй холбоотой жишээг авах эсвэл эхлүүлээгүй тохиолдолд шинээр үүсгэхэд ашиглаж болно.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

Хэрэв жишээ эхлүүлээгүй бол энэ нь нэмэлт тохиргооны объектыг хоёр дахь аргумент болгон хүлээн авч ашиглаж болно.

Бүтээгч дэх CSS сонгогчид

getInstanceболон аргуудаас гадна getOrCreateInstanceбүх залгаас бүтээгчид DOM элемент эсвэл хүчинтэй CSS сонгогчийг эхний аргумент болгон хүлээн авах боломжтой. querySelectorМанай залгаасууд зөвхөн нэг элементийг дэмждэг тул залгаасын элементүүдийг энэ аргаар олж болно .

const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
const offcanvas = bootstrap.Offcanvas.getInstance('#myOffcanvas')
const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')

Асинхрон функцууд ба шилжилтүүд

Бүх программчлагдсан API аргууд нь асинхрон бөгөөд шилжилт эхлэхээс өмнө дуудагч руу буцдаг . Шилжилт дууссаны дараа үйлдлийг гүйцэтгэхийн тулд та холбогдох үйл явдлыг сонсож болно.

const myCollapseEl = document.querySelector('#myCollapse')

myCollapseEl.addEventListener('shown.bs.collapse', event => {
  // Action to execute once the collapsible area is expanded
})

Нэмж хэлэхэд, шилжилтийн бүрэлдэхүүн хэсэг дэх аргын дуудлагыг үл тоомсорлох болно.

const myCarouselEl = document.querySelector('#myCarousel')
const carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', event => {
  carousel.to('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

carousel.to('1') // Will start sliding to the slide 1 and returns to the caller
carousel.to('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

`dispose`арга

dispose-ийн дараа шууд хэрэглэх нь зөв мэт санагдаж болох ч энэ нь hide()буруу үр дүнд хүргэнэ. Асуудлыг ашиглах жишээ энд байна:

const myModal = document.querySelector('#myModal')
myModal.hide() // it is asynchronous

myModal.addEventListener('shown.bs.hidden', event => {
  myModal.dispose()
})

Өгөгдмөл тохиргоо

Constructor.DefaultТа залгаасын объектыг өөрчлөх замаар залгаасын үндсэн тохиргоог өөрчилж болно :

// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false

Арга, шинж чанар

Bootstrap залгаас бүр дараах аргууд болон статик шинж чанаруудыг харуулдаг.

Арга	Тодорхойлолт
`dispose`	Элементийн горимыг устгадаг. (DOM элемент дээр хадгалагдсан өгөгдлийг устгана)
`getInstance`	DOM элементтэй холбоотой модаль жишээг авах боломжийг олгодог статик арга.
`getOrCreateInstance`	DOM элементтэй холбоотой модаль жишээг авах эсвэл үүнийг эхлүүлээгүй тохиолдолд шинээр үүсгэх боломжийг олгодог статик арга.

Статик шинж чанар	Тодорхойлолт
`NAME`	Plugin нэрийг буцаана. (Жишээ нь: `bootstrap.Tooltip.NAME`)
`VERSION`	Bootstrap-ийн залгаас бүрийн хувилбарт залгаасын үүсгэгчийн өмчөөр хандаж болно `VERSION`(Жишээ нь: `bootstrap.Tooltip.VERSION`)

Ариутгагч

Зөвлөмжүүд болон Popovers нь HTML-г хүлээн зөвшөөрдөг сонголтуудыг ариутгахын тулд бидний суулгасан ариутгагчийг ашигладаг.

Өгөгдмөл allowListутга нь дараах байдалтай байна.

const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
const DefaultAllowlist = {
  // 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: []
}

Хэрэв та энэ өгөгдмөл утгад шинэ утгыг нэмэхийг хүсвэл allowListдараахь зүйлийг хийж болно.

const myDefaultAllowList = bootstrap.Tooltip.Default.allowList

// To allow table elements
myDefaultAllowList.table = []

// To allow td elements and data-bs-option attributes on td elements
myDefaultAllowList.td = ['data-bs-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
const myCustomRegex = /^data-my-app-[\w-]+/
myDefaultAllowList['*'].push(myCustomRegex)

Хэрэв та тусгай номын сан, жишээ нь DOMPurify ашиглахыг илүүд үздэг тул манай ариутгагчийг тойрч гарахыг хүсвэл дараах зүйлийг хийх хэрэгтэй.

const yourTooltipEl = document.querySelector('#yourTooltip')
const tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn(content) {
    return DOMPurify.sanitize(content)
  }
})

Сонголтоор jQuery ашиглана

Bootstrap 5 дээр танд jQuery хэрэггүй , гэхдээ манай бүрэлдэхүүн хэсгүүдийг jQuery-тэй ашиглах боломжтой хэвээр байна. Хэрэв Bootstrap объектыг илрүүлбэл jQuery jQuery- windowийн залгаас системд бидний бүх бүрэлдэхүүн хэсгүүдийг нэмнэ. Энэ нь танд дараахь зүйлийг хийх боломжийг олгоно.

$('[data-bs-toggle="tooltip"]').tooltip() // to enable tooltips, with default configuration

$('[data-bs-toggle="tooltip"]').tooltip({ boundary: 'clippingParents', customClass: 'myClass' }) // to initialize tooltips with given configuration

$('#myTooltip').tooltip('show') // to trigger `show` method

Манай бусад бүрэлдэхүүн хэсгүүдэд мөн адил хамаарна.

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

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

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

Bootstrap нь Prototype эсвэл jQuery UI зэрэг гуравдагч талын JavaScript сангуудыг албан ёсоор дэмждэггүй. Үйл явдлууд болон нэрийн зайтай байсан ч .noConflictта өөрөө засах шаардлагатай нийцтэй байдлын асуудал гарч болзошгүй.

jQuery үйл явдлууд

Bootstrap нь jQueryтухайн объектод байгаа атрибут windowбайхгүй бол jQuery-г илрүүлэх болно . Хэрэв jQuery олдвол Bootstrap нь jQuery-ийн үйл явдлын системийн ачаар үйл явдлуудыг гаргах болно. Хэрэв та Bootstrap-ийн үйл явдлуудыг сонсохыг хүсвэл , оронд jQuery аргуудыг ( , ) ашиглах хэрэгтэй болно .data-bs-no-jquery<body>.on.oneaddEventListener

$('#myTab a').on('shown.bs.tab', () => {
  // do something...
})

JavaScript идэвхгүй болсон

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