JavaScript
នាំឱ្យ Bootstrap មានជីវិតជាមួយនឹងកម្មវិធីជំនួយ JavaScript ជាជម្រើសរបស់យើង។ ស្វែងយល់អំពីកម្មវិធីជំនួយនីមួយៗ ទិន្នន័យរបស់យើង និងជម្រើស API កម្មវិធី និងច្រើនទៀត។
បុគ្គល ឬចងក្រង
កម្មវិធីជំនួយអាចត្រូវបានរួមបញ្ចូលជាលក្ខណៈបុគ្គល (ដោយប្រើបុគ្គលរបស់ Bootstrap js/dist/*.js
) ឬទាំងអស់នៅពេលតែមួយដោយប្រើ bootstrap.js
ឬបង្រួម bootstrap.min.js
(មិនរួមបញ្ចូលទាំងពីរ)។
ប្រសិនបើអ្នកប្រើ bundler (Webpack, Rollup...) អ្នកអាចប្រើ /js/dist/*.js
ឯកសារដែល UMD រួចរាល់។
ការប្រើប្រាស់ Bootstrap ជាម៉ូឌុល
យើងផ្តល់កំណែ 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>
កម្មវិធីជំនួយមិនឆបគ្នា។
ដោយសារការកំណត់របស់កម្មវិធីរុករកតាមអ៊ីនធឺណិត កម្មវិធីជំនួយមួយចំនួនរបស់យើងដូចជា Dropdown, Tooltip និង Popover plugins មិនអាចប្រើក្នុង <script>
ស្លាកជាមួយ module
ប្រភេទបានទេ ដោយសារពួកវាពឹងផ្អែកលើ Popper។ សម្រាប់ព័ត៌មានបន្ថែមអំពីបញ្ហានេះ សូមមើល នៅទីនេះ ។
ភាពអាស្រ័យ
កម្មវិធីជំនួយ និងសមាសធាតុ CSS មួយចំនួនអាស្រ័យលើកម្មវិធីជំនួយផ្សេងទៀត។ ប្រសិនបើអ្នករួមបញ្ចូលកម្មវិធីជំនួយដាច់ដោយឡែក ត្រូវប្រាកដថាពិនិត្យមើលភាពអាស្រ័យទាំងនេះនៅក្នុងឯកសារ។
ការទម្លាក់ចុះ ការលេចឡើង និងព័ត៌មានជំនួយរបស់យើងក៏អាស្រ័យលើ Popper ផងដែរ។
នៅតែចង់ប្រើ jQuery? វាអាចទៅរួច!
Bootstrap 5 ត្រូវបានរចនាឡើងដើម្បីប្រើដោយគ្មាន jQuery ប៉ុន្តែវានៅតែអាចប្រើសមាសធាតុរបស់យើងជាមួយ jQuery ។ ប្រសិនបើ Bootstrap រកឃើញ jQuery
នៅក្នុង window
វត្ថុ វានឹងបន្ថែមសមាសធាតុរបស់យើងទាំងអស់នៅក្នុងប្រព័ន្ធកម្មវិធីជំនួយរបស់ jQuery ។ នេះមានន័យថាអ្នកនឹងអាចធ្វើ $('[data-bs-toggle="tooltip"]').tooltip()
ដើម្បីបើកព័ត៌មានជំនួយ។ ដូចគ្នាទៅនឹងសមាសធាតុផ្សេងទៀតរបស់យើង។
គុណលក្ខណៈទិន្នន័យ
កម្មវិធីជំនួយ Bootstrap ស្ទើរតែទាំងអស់អាចត្រូវបានបើក និងកំណត់រចនាសម្ព័ន្ធតាមរយៈ HTML តែម្នាក់ឯងជាមួយនឹងគុណលក្ខណៈទិន្នន័យ (វិធីដែលយើងពេញចិត្តក្នុងការប្រើមុខងារ JavaScript)។ ត្រូវប្រាកដថា ប្រើតែសំណុំនៃគុណលក្ខណៈទិន្នន័យនៅលើធាតុតែមួយ (ឧទាហរណ៍ អ្នកមិនអាចកេះព័ត៌មានជំនួយ និងម៉ូឌុលពីប៊ូតុងតែមួយបានទេ។)
អ្នកជ្រើសរើស
បច្ចុប្បន្នដើម្បីសាកសួរធាតុ DOM យើងប្រើវិធីសាស្ត្រដើម querySelector
និង querySelectorAll
សម្រាប់ហេតុផលប្រតិបត្តិការ ដូច្នេះអ្នកត្រូវប្រើ ឧបករណ៍ជ្រើសរើសត្រឹមត្រូវ ។ ប្រសិនបើអ្នកប្រើឧបករណ៍ជ្រើសរើសពិសេស ឧទាហរណ៍៖ collapse:Example
ត្រូវប្រាកដថាគេចពីពួកវា។
ព្រឹត្តិការណ៍
Bootstrap ផ្តល់នូវព្រឹត្តិការណ៍ផ្ទាល់ខ្លួនសម្រាប់សកម្មភាពពិសេសៗរបស់កម្មវិធីជំនួយភាគច្រើន។ ជាទូទៅ ទាំងនេះមកក្នុងទម្រង់ចូលរួមគ្មានកំណត់ និងអតីតកាល ដែលអកំណត់ (ឧ។ show
) ត្រូវបានបង្កឡើងនៅពេលចាប់ផ្តើមព្រឹត្តិការណ៍ ហើយទម្រង់ចូលរួមអតីតកាលរបស់វា (ឧ. shown
) ត្រូវបានបង្កឡើងនៅពេលបញ្ចប់សកម្មភាព។
ព្រឹត្តិការណ៍គ្មានកំណត់ទាំងអស់ផ្តល់នូវ preventDefault()
មុខងារ។ វាផ្តល់នូវសមត្ថភាពក្នុងការបញ្ឈប់ការប្រតិបត្តិនៃសកម្មភាពមុនពេលវាចាប់ផ្តើម។ ការត្រឡប់មិនពិតពីកម្មវិធីដោះស្រាយព្រឹត្តិការណ៍នឹងហៅដោយស្វ័យប្រវត្តិផងដែរ preventDefault()
។
var myModal = document.getElementById('myModal')
myModal.addEventListener('show.bs.modal', function (event) {
if (!data) {
return event.preventDefault() // stops modal from being shown
}
})
ព្រឹត្តិការណ៍ jQuery
Bootstrap នឹងរកឃើញ jQuery ប្រសិនបើ jQuery
មានវត្តមាននៅក្នុង window
វត្ថុ ហើយមិនមាន data-bs-no-jquery
គុណលក្ខណៈកំណត់នៅលើ <body>
. ប្រសិនបើ jQuery ត្រូវបានរកឃើញ Bootstrap នឹងបញ្ចេញព្រឹត្តិការណ៍អរគុណចំពោះប្រព័ន្ធព្រឹត្តិការណ៍របស់ jQuery ។ ដូច្នេះប្រសិនបើអ្នកចង់ស្តាប់ព្រឹត្តិការណ៍របស់ Bootstrap អ្នកនឹងត្រូវប្រើវិធី jQuery ( .on
, .one
) ជំនួសឱ្យ addEventListener
.
$('#myTab a').on('shown.bs.tab', function () {
// do something...
})
API កម្មវិធី
អ្នកសាងសង់ទាំងអស់ទទួលយកវត្ថុជម្រើសស្រេចចិត្ត ឬគ្មានអ្វីសោះ (ដែលផ្តួចផ្តើមកម្មវិធីជំនួយជាមួយនឹងឥរិយាបថលំនាំដើមរបស់វា)៖
var myModalEl = document.getElementById('myModal')
var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard
ប្រសិនបើអ្នកចង់ទទួលបានឧទាហរណ៍កម្មវិធីជំនួយជាក់លាក់មួយ កម្មវិធីជំនួយនីមួយៗបង្ហាញ getInstance
វិធីសាស្ត្រមួយ។ ដើម្បីទាញយកវាដោយផ្ទាល់ពីធាតុមួយ ធ្វើដូចនេះ៖ bootstrap.Popover.getInstance(myPopoverEl)
.
ឧបករណ៍ជ្រើសរើស CSS នៅក្នុងអ្នកសាងសង់
អ្នកក៏អាចប្រើឧបករណ៍ជ្រើសរើស CSS ជាអាគុយម៉ង់ដំបូងជំនួសឱ្យធាតុ DOM ដើម្បីចាប់ផ្តើមកម្មវិធីជំនួយ។ បច្ចុប្បន្នធាតុសម្រាប់កម្មវិធីជំនួយត្រូវបានរកឃើញដោយ querySelector
វិធីសាស្ត្រ ដោយសារកម្មវិធីជំនួយរបស់យើងគាំទ្រធាតុតែមួយប៉ុណ្ណោះ។
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
មុខងារ និងការផ្លាស់ប្តូរអសមកាល
វិធីសាស្ត្រ API កម្មវិធីទាំងអស់គឺ អសមកាល ហើយត្រឡប់ទៅអ្នកហៅវិញនៅពេលដែលការផ្លាស់ប្តូរត្រូវបានចាប់ផ្តើម ប៉ុន្តែ មុនពេលវាបញ្ចប់ ។
ដើម្បីប្រតិបត្តិសកម្មភាពនៅពេលការផ្លាស់ប្តូរត្រូវបានបញ្ចប់ អ្នកអាចស្តាប់ព្រឹត្តិការណ៍ដែលទាក់ទងគ្នា។
var myCollapseEl = document.getElementById('myCollapse')
myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
// Action to execute once the collapsible area is expanded
})
បន្ថែមពីលើនេះ ការហៅតាមវិធីសាស្ត្រលើ សមាសធាតុផ្លាស់ប្តូរនឹងត្រូវមិនអើពើ ។
var myCarouselEl = document.getElementById('myCarousel')
var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance
myCarouselEl.addEventListener('slid.bs.carousel', function (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 !!
កំណត់លំនាំដើម
អ្នកអាចផ្លាស់ប្តូរការកំណត់លំនាំដើមសម្រាប់កម្មវិធីជំនួយដោយកែប្រែ Constructor.Default
វត្ថុរបស់កម្មវិធីជំនួយ៖
// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false
គ្មានការប៉ះទង្គិចទេ (លុះត្រាតែអ្នកប្រើ jQuery)
ពេលខ្លះចាំបាច់ត្រូវប្រើកម្មវិធីជំនួយ Bootstrap ជាមួយនឹងក្របខ័ណ្ឌ UI ផ្សេងទៀត។ ក្នុងកាលៈទេសៈទាំងនេះ ការប៉ះទង្គិចឈ្មោះចន្លោះអាចកើតឡើងម្តងម្កាល។ ប្រសិនបើរឿងនេះកើតឡើង អ្នកអាចហៅ .noConflict
ទៅកម្មវិធីជំនួយដែលអ្នកចង់ត្រឡប់តម្លៃនៃ
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
លេខកំណែ
កំណែនៃកម្មវិធីជំនួយរបស់ Bootstrap នីមួយៗអាចចូលប្រើបានតាមរយៈ VERSION
លក្ខណសម្បត្តិរបស់អ្នកបង្កើតកម្មវិធីជំនួយ។ ឧទាហរណ៍ សម្រាប់កម្មវិធីជំនួយព័ត៌មានជំនួយ៖
bootstrap.Tooltip.VERSION // => "5.0.2"
មិនមានការបដិសេធពិសេសនៅពេលដែល JavaScript ត្រូវបានបិទ
កម្មវិធីជំនួយរបស់ Bootstrap មិនធ្លាក់ចុះមកវិញទេ ជាពិសេសនៅពេលដែល JavaScript ត្រូវបានបិទ។ ប្រសិនបើអ្នកខ្វល់ពីបទពិសោធន៍អ្នកប្រើប្រាស់ក្នុងករណីនេះ សូមប្រើ <noscript>
ដើម្បីពន្យល់ពីស្ថានភាព (និងរបៀបបើក JavaScript ឡើងវិញ) ដល់អ្នកប្រើប្រាស់របស់អ្នក និង/ឬបន្ថែមការបដិសេធផ្ទាល់ខ្លួនរបស់អ្នក។
បណ្ណាល័យភាគីទីបី
Bootstrap មិនគាំទ្រជាផ្លូវការនូវបណ្ណាល័យ JavaScript ភាគីទីបី ដូចជា Prototype ឬ jQuery UI ទេ។ ទោះបីជា .noConflict
និងព្រឹត្តិការណ៍ដាក់ឈ្មោះក៏ដោយ វាអាចមានបញ្ហាភាពឆបគ្នាដែលអ្នកត្រូវជួសជុលដោយខ្លួនឯង។
ទឹកអនាម័យ
ព័ត៌មានជំនួយ និង Popovers ប្រើប្រាស់ឧបករណ៍អនាម័យដែលភ្ជាប់មកជាមួយរបស់យើង ដើម្បីធ្វើអនាម័យជម្រើសដែលទទួលយក HTML ។
តម្លៃ លំនាំដើម allowList
មានដូចខាងក្រោម៖
var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var 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
អ្នកអាចធ្វើដូចខាងក្រោម៖
var 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
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultAllowList['*'].push(myCustomRegex)
ប្រសិនបើអ្នកចង់រំលងឧបករណ៍អនាម័យរបស់យើង ដោយសារអ្នកចូលចិត្តប្រើបណ្ណាល័យដែលមានការយកចិត្តទុកដាក់ ឧទាហរណ៍ DOMPurify អ្នកគួរធ្វើដូចខាងក្រោម៖
var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
sanitizeFn: function (content) {
return DOMPurify.sanitize(content)
}
})