JavaScript
នាំឱ្យ Bootstrap មានជីវិតជាមួយនឹងកម្មវិធីជំនួយ JavaScript ស្រេចចិត្តរបស់យើងដែលបានបង្កើតឡើងនៅលើ jQuery ។ ស្វែងយល់អំពីកម្មវិធីជំនួយនីមួយៗ ទិន្នន័យរបស់យើង និងជម្រើស API កម្មវិធី និងច្រើនទៀត។
កម្មវិធីជំនួយអាចត្រូវបានរួមបញ្ចូលជាលក្ខណៈបុគ្គល (ដោយប្រើបុគ្គលរបស់ Bootstrap js/dist/*.js
) ឬទាំងអស់នៅពេលតែមួយដោយប្រើ bootstrap.js
ឬបង្រួម bootstrap.min.js
(មិនរួមបញ្ចូលទាំងពីរ)។
ប្រសិនបើអ្នកប្រើ bundler (Webpack, Rollup...) អ្នកអាចប្រើ /js/dist/*.js
ឯកសារដែល UMD រួចរាល់។
កម្មវិធីជំនួយ និងសមាសធាតុ CSS មួយចំនួនអាស្រ័យលើកម្មវិធីជំនួយផ្សេងទៀត។ ប្រសិនបើអ្នករួមបញ្ចូលកម្មវិធីជំនួយដាច់ដោយឡែក ត្រូវប្រាកដថាពិនិត្យមើលភាពអាស្រ័យទាំងនេះនៅក្នុងឯកសារ។ សូមចំណាំផងដែរថា កម្មវិធីជំនួយទាំងអស់ពឹងផ្អែកលើ jQuery (នេះមានន័យថា jQuery ត្រូវតែរួមបញ្ចូល មុនពេល ឯកសារកម្មវិធីជំនួយ) ។ ពិគ្រោះជាមួយពួកយើងpackage.json
ដើម្បីមើលថាតើ jQuery កំណែណាដែលត្រូវបានគាំទ្រ។
ការទម្លាក់ចុះ ការលេចឡើង និងព័ត៌មានជំនួយរបស់យើងក៏អាស្រ័យលើ Popper.js ផងដែរ។
កម្មវិធីជំនួយ Bootstrap ស្ទើរតែទាំងអស់អាចត្រូវបានបើក និងកំណត់រចនាសម្ព័ន្ធតាមរយៈ HTML តែម្នាក់ឯងជាមួយនឹងគុណលក្ខណៈទិន្នន័យ (វិធីដែលយើងពេញចិត្តក្នុងការប្រើមុខងារ JavaScript)។ ត្រូវប្រាកដថា ប្រើតែសំណុំនៃគុណលក្ខណៈទិន្នន័យនៅលើធាតុតែមួយ (ឧទាហរណ៍ អ្នកមិនអាចកេះព័ត៌មានជំនួយ និងម៉ូឌុលពីប៊ូតុងតែមួយបានទេ។)
ទោះយ៉ាងណាក៏ដោយ ក្នុងស្ថានភាពខ្លះ វាអាចជាការចង់បិទមុខងារនេះ។ ដើម្បីបិទដំណើរការ API គុណលក្ខណៈទិន្នន័យ សូមផ្តាច់ព្រឹត្តិការណ៍ទាំងអស់នៅលើឯកសារដែលដាក់ឈ្មោះ data-api
ដូចនោះ៖
ជាជម្រើស ដើម្បីកំណត់គោលដៅកម្មវិធីជំនួយជាក់លាក់មួយ គ្រាន់តែបញ្ចូលឈ្មោះរបស់កម្មវិធីជំនួយជា namespace រួមជាមួយនឹង data-api namespace ដូចនេះ៖
កំពុងរត់គេចពីអ្នកជ្រើសរើស
ប្រសិនបើអ្នកប្រើឧបករណ៍ជ្រើសរើសពិសេស ឧទាហរណ៍៖ collapse:Example
ត្រូវប្រាកដថាគេចចេញពីពួកវា ព្រោះពួកវានឹងត្រូវឆ្លងកាត់ jQuery។
Bootstrap ផ្តល់នូវព្រឹត្តិការណ៍ផ្ទាល់ខ្លួនសម្រាប់សកម្មភាពពិសេសៗរបស់កម្មវិធីជំនួយភាគច្រើន។ ជាទូទៅ ទាំងនេះមកក្នុងទម្រង់ចូលរួមគ្មានកំណត់ និងអតីតកាល ដែលអកំណត់ (ឧ។ show
) ត្រូវបានបង្កឡើងនៅពេលចាប់ផ្តើមព្រឹត្តិការណ៍ ហើយទម្រង់ចូលរួមអតីតកាលរបស់វា (ឧ. shown
) ត្រូវបានបង្កឡើងនៅពេលបញ្ចប់សកម្មភាព។
ព្រឹត្តិការណ៍គ្មានកំណត់ទាំងអស់ផ្តល់នូវ preventDefault()
មុខងារ។ វាផ្តល់នូវសមត្ថភាពក្នុងការបញ្ឈប់ការប្រតិបត្តិនៃសកម្មភាពមុនពេលវាចាប់ផ្តើម។ ការត្រឡប់មិនពិតពីកម្មវិធីដោះស្រាយព្រឹត្តិការណ៍នឹងហៅដោយស្វ័យប្រវត្តិផងដែរ preventDefault()
។
យើងក៏ជឿថា អ្នកគួរតែអាចប្រើកម្មវិធីជំនួយ Bootstrap ទាំងអស់តាមរយៈ JavaScript API។ APIs សាធារណៈទាំងអស់គឺជាវិធីសាស្រ្ដតែមួយ ដែលអាចច្រវ៉ាក់បាន ហើយត្រឡប់ការប្រមូលដែលបានធ្វើសកម្មភាព។
វិធីសាស្រ្តទាំងអស់គួរតែទទួលយកវត្ថុជម្រើសស្រេចចិត្ត ខ្សែអក្សរដែលកំណត់គោលដៅវិធីសាស្រ្តជាក់លាក់ណាមួយ ឬគ្មានអ្វីសោះ (ដែលផ្តួចផ្តើមកម្មវិធីជំនួយដែលមានឥរិយាបថលំនាំដើម)៖
កម្មវិធីជំនួយនីមួយៗក៏លាតត្រដាង constructor ដើមរបស់វានៅលើ Constructor
លក្ខណៈសម្បត្តិ៖ $.fn.popover.Constructor
. ប្រសិនបើអ្នកចង់ទទួលបានឧទាហរណ៍កម្មវិធីជំនួយជាក់លាក់មួយ ទាញយកវាដោយផ្ទាល់ពីធាតុមួយ៖ $('[rel="popover"]').data('popover')
.
វិធីសាស្ត្រ API កម្មវិធីទាំងអស់គឺ អសមកាល ហើយត្រឡប់ទៅអ្នកហៅវិញនៅពេលដែលការផ្លាស់ប្តូរត្រូវបានចាប់ផ្តើម ប៉ុន្តែ មុនពេលវាបញ្ចប់ ។
ដើម្បីប្រតិបត្តិសកម្មភាពនៅពេលការផ្លាស់ប្តូរត្រូវបានបញ្ចប់ អ្នកអាចស្តាប់ព្រឹត្តិការណ៍ដែលទាក់ទងគ្នា។
បន្ថែមពីលើនេះ ការហៅតាមវិធីសាស្ត្រលើ សមាសធាតុផ្លាស់ប្តូរនឹងត្រូវមិនអើពើ ។
អ្នកអាចផ្លាស់ប្តូរការកំណត់លំនាំដើមសម្រាប់កម្មវិធីជំនួយដោយកែប្រែ Constructor.Default
វត្ថុរបស់កម្មវិធីជំនួយ៖
ពេលខ្លះចាំបាច់ត្រូវប្រើកម្មវិធីជំនួយ Bootstrap ជាមួយនឹងក្របខ័ណ្ឌ UI ផ្សេងទៀត។ ក្នុងកាលៈទេសៈទាំងនេះ ការប៉ះទង្គិចឈ្មោះចន្លោះអាចកើតឡើងម្តងម្កាល។ ប្រសិនបើរឿងនេះកើតឡើង អ្នកអាចហៅ .noConflict
ទៅកម្មវិធីជំនួយដែលអ្នកចង់ត្រឡប់តម្លៃនៃ
កំណែនៃកម្មវិធីជំនួយ jQuery របស់ Bootstrap នីមួយៗអាចចូលប្រើបានតាមរយៈ VERSION
លក្ខណសម្បត្តិរបស់អ្នកបង្កើតកម្មវិធីជំនួយ។ ឧទាហរណ៍ សម្រាប់កម្មវិធីជំនួយព័ត៌មានជំនួយ៖
កម្មវិធីជំនួយរបស់ Bootstrap មិនធ្លាក់ចុះមកវិញទេ ជាពិសេសនៅពេលដែល JavaScript ត្រូវបានបិទ។ ប្រសិនបើអ្នកខ្វល់ពីបទពិសោធន៍អ្នកប្រើប្រាស់ក្នុងករណីនេះ សូមប្រើ <noscript>
ដើម្បីពន្យល់ពីស្ថានភាព (និងរបៀបបើក JavaScript ឡើងវិញ) ដល់អ្នកប្រើប្រាស់របស់អ្នក និង/ឬបន្ថែមការបដិសេធផ្ទាល់ខ្លួនរបស់អ្នក។
បណ្ណាល័យភាគីទីបី
Bootstrap មិនគាំទ្រជាផ្លូវការនូវបណ្ណាល័យ JavaScript ភាគីទីបី ដូចជា Prototype ឬ jQuery UI ទេ។ ទោះបីជា .noConflict
និងព្រឹត្តិការណ៍ដាក់ឈ្មោះក៏ដោយ វាអាចមានបញ្ហាភាពឆបគ្នាដែលអ្នកត្រូវជួសជុលដោយខ្លួនឯង។
ឯកសារ JavaScript ទាំងអស់របស់ Bootstrap អាស្រ័យលើ util.js
ហើយវាត្រូវតែបញ្ចូលជាមួយឯកសារ JavaScript ផ្សេងទៀត។ ប្រសិនបើអ្នកកំពុងប្រើការចងក្រង (ឬបង្រួម) bootstrap.js
នោះមិនចាំបាច់បញ្ចូលវាទេ វាមានរួចហើយ។
util.js
រួមបញ្ចូលមុខងារឧបករណ៍ប្រើប្រាស់ និងជំនួយជាមូលដ្ឋានសម្រាប់ transitionEnd
ព្រឹត្តិការណ៍ ក៏ដូចជាកម្មវិធីត្រាប់តាមការផ្លាស់ប្តូរ CSS ។ វាត្រូវបានប្រើដោយកម្មវិធីជំនួយផ្សេងទៀតដើម្បីពិនិត្យមើលការគាំទ្រការផ្លាស់ប្តូរ CSS និងដើម្បីចាប់ដំណើរការព្យួរ។