Popovers
ឯកសារ និងឧទាហរណ៍សម្រាប់ការបន្ថែម Bootstrap popovers ដូចជាអ្វីដែលរកឃើញនៅក្នុង iOS ទៅធាតុណាមួយនៅលើគេហទំព័ររបស់អ្នក។
ទិដ្ឋភាពទូទៅ
អ្វីដែលត្រូវដឹងនៅពេលប្រើកម្មវិធីជំនួយ popover៖
- Popovers ពឹងផ្អែកលើបណ្ណាល័យភាគីទី 3 Popper.js សម្រាប់ការកំណត់ទីតាំង។ អ្នកត្រូវតែបញ្ចូល popper.min.js មុនពេល bootstrap.js ឬប្រើ
bootstrap.bundle.min.js
/bootstrap.bundle.js
ដែលមាន Popper.js ដើម្បីឱ្យ popovers ដំណើរការ! - Popovers ទាមទារ កម្មវិធីជំនួយព័ត៌មានជំនួយ ជាការពឹងផ្អែក។
- ប្រសិនបើអ្នកកំពុងបង្កើត JavaScript របស់យើងពីប្រភព វា ទាមទារ
util.js
. - Popovers ត្រូវបានជ្រើសរើសសម្រាប់ហេតុផលនៃការអនុវត្ត ដូច្នេះ អ្នកត្រូវតែចាប់ផ្តើម វា ដោយខ្លួនឯង
- ប្រវែងសូន្យ
title
និងcontent
តម្លៃនឹងមិនបង្ហាញការលេចឡើងនោះទេ។ - បញ្ជាក់
container: 'body'
ដើម្បីជៀសវាងបញ្ហាក្នុងការបង្ហាញនៅក្នុងសមាសធាតុស្មុគ្រស្មាញ (ដូចជាក្រុមបញ្ចូលរបស់យើង ក្រុមប៊ូតុង។ល។)។ - ការកេះផ្ទាំងព័ត៌មានលើធាតុលាក់នឹងមិនដំណើរការទេ។
- Popovers
.disabled
ឬdisabled
ធាតុត្រូវតែត្រូវបានកេះនៅលើធាតុរុំ។ - នៅពេលដែលត្រូវបានកេះចេញពីយុថ្កាដែលរុំឆ្លងកាត់បន្ទាត់ជាច្រើន ផ្ទាំងប៉ុបនឹងស្ថិតនៅចំកណ្តាលរវាងទទឹងទាំងមូលរបស់យុថ្កា។ ប្រើ
.text-nowrap
នៅលើរបស់អ្នក<a>
ដើម្បីជៀសវាងអាកប្បកិរិយានេះ។ - Popovers ត្រូវតែលាក់ មុនពេលធាតុដែលត្រូវគ្នារបស់ពួកគេត្រូវបានយកចេញពី DOM ។
- Popovers អាចត្រូវបានកេះដោយសារធាតុមួយនៅក្នុង DOM ស្រមោល។
ឥទ្ធិពលចលនានៃសមាសភាគនេះគឺអាស្រ័យលើ prefers-reduced-motion
សំណួរមេឌៀ។ សូមមើល ផ្នែកចលនាដែលបានកាត់បន្ថយនៃឯកសារភាពងាយស្រួលរបស់យើង ។
បន្តអានដើម្បីមើលពីរបៀបដែល popovers ដំណើរការជាមួយនឹងឧទាហរណ៍មួយចំនួន។
ឧទាហរណ៍៖ បើកការលេចឡើងនៅគ្រប់ទីកន្លែង
វិធីមួយដើម្បីចាប់ផ្តើមការលេចឡើងទាំងអស់នៅលើទំព័រមួយគឺដើម្បីជ្រើសរើសពួកវាតាម data-toggle
គុណលក្ខណៈរបស់ពួកគេ៖
ឧទាហរណ៍៖ ការប្រើប្រាស់ container
ជម្រើស
នៅពេលដែលអ្នកមានរចនាប័ទ្មមួយចំនួននៅលើធាតុមេដែលជ្រៀតជ្រែកជាមួយ popover មួយ អ្នកនឹងចង់បញ្ជាក់ផ្ទាល់ខ្លួន container
ដើម្បីឱ្យ HTML របស់ popover លេចឡើងនៅក្នុងធាតុនោះជំនួសវិញ។
ឧទាហរណ៍
ទិសទាំងបួន
មានជម្រើសចំនួនបួន៖ ខាងលើ ស្តាំ បាត និងតម្រឹមឆ្វេង។
ច្រានចោលនៅពេលចុចបន្ទាប់
ប្រើ focus
គន្លឹះដើម្បីច្រានចោលការលេចឡើងនៅលើការចុចបន្ទាប់របស់អ្នកប្រើនៃធាតុផ្សេងគ្នាជាងធាតុបិទបើក។
តម្រូវឱ្យមានការសម្គាល់ជាក់លាក់សម្រាប់ការបដិសេធនៅពេលចុចបន្ទាប់
សម្រាប់ឥរិយាបថឆ្លងកាត់កម្មវិធីរុករក និងឆ្លងវេទិកាត្រឹមត្រូវ អ្នកត្រូវតែប្រើ <a>
ស្លាក មិនមែន ស្លាក <button>
ទេ ហើយអ្នកក៏ត្រូវបញ្ចូល tabindex
គុណលក្ខណៈផងដែរ។
ធាតុពិការ
ធាតុដែលមាន disabled
គុណលក្ខណៈមិនមានអន្តរកម្មទេ មានន័យថាអ្នកប្រើមិនអាចដាក់ ឬចុចវាដើម្បីបង្កឱ្យលេចចេញ (ឬព័ត៌មានជំនួយ)។ ក្នុងនាមជាដំណោះស្រាយមួយ អ្នកនឹងចង់កេះ popover ពី wrapper <div>
ឬ <span>
ហើយបដិសេធ pointer-events
លើធាតុដែលបិទ។
សម្រាប់ការកេះ popover ដែលបានបិទ អ្នកក៏អាចចូលចិត្តដែរ data-trigger="hover"
ដូច្នេះ popover លេចឡើងជាមតិកែលម្អដែលមើលឃើញភ្លាមៗចំពោះអ្នកប្រើរបស់អ្នក ព្រោះពួកគេប្រហែលជាមិនរំពឹងថានឹង ចុច លើធាតុដែលបិទ។
ការប្រើប្រាស់
បើកដំណើរការ popovers តាមរយៈ JavaScript៖
ការបង្កើនល្បឿន GPU
ពេលខ្លះ Popovers ហាក់ដូចជាព្រិលៗនៅលើឧបករណ៍ Windows 10 ដោយសារការបង្កើនល្បឿន GPU និង DPI ប្រព័ន្ធដែលបានកែប្រែ។ ដំណោះស្រាយសម្រាប់បញ្ហានេះនៅក្នុង v4 គឺត្រូវបិទការបង្កើនល្បឿន GPU តាមតម្រូវការនៅលើ popovers របស់អ្នក។
ការជួសជុលដែលបានណែនាំ៖
ការធ្វើឱ្យ popovers ដំណើរការសម្រាប់អ្នកប្រើប្រាស់ក្តារចុច និងជំនួយបច្ចេកវិទ្យា
ដើម្បីអនុញ្ញាតឱ្យអ្នកប្រើក្តារចុចធ្វើឱ្យការលេចឡើងរបស់អ្នកសកម្ម អ្នកគួរតែបន្ថែមពួកវាទៅក្នុងធាតុ HTML ដែលតាមទម្លាប់ក្តារចុចអាចផ្តោតបាន និងអន្តរកម្ម (ដូចជាតំណភ្ជាប់ ឬការគ្រប់គ្រងទម្រង់)។ ទោះបីជាធាតុ HTML បំពាន (ដូចជា <span>
s) អាចផ្តោតបានដោយការបន្ថែម tabindex="0"
គុណលក្ខណៈក៏ដោយ វានឹងបន្ថែមការបញ្ឈប់ផ្ទាំងដែលអាចរំខាន និងច្របូកច្របល់លើធាតុដែលមិនអន្តរកម្មសម្រាប់អ្នកប្រើប្រាស់ក្តារចុច ហើយបច្ចេកវិទ្យាជំនួយភាគច្រើនបច្ចុប្បន្នមិនប្រកាសមាតិការបស់ popover ក្នុងស្ថានភាពនេះទេ។ . លើសពីនេះ កុំពឹងផ្អែកទាំងស្រុងទៅលើ hover
ការកេះសម្រាប់ការលេចចេញរបស់អ្នក ព្រោះវានឹងធ្វើឱ្យពួកវាមិនអាចកេះសម្រាប់អ្នកប្រើប្រាស់ក្តារចុចបានទេ។
ខណៈពេលដែលអ្នកអាចបញ្ចូល HTML ដែលមានរចនាសម្ព័ន្ធសម្បូរបែបនៅក្នុង popovers ជាមួយនឹង html
ជម្រើស យើងសូមណែនាំយ៉ាងមុតមាំថាអ្នកជៀសវាងការបន្ថែមមាតិកាច្រើនពេក។ របៀបដែល popovers ដំណើរការនាពេលបច្ចុប្បន្នគឺថា នៅពេលដែលបង្ហាញ មាតិការបស់ពួកគេត្រូវបានចងភ្ជាប់ទៅនឹងធាតុ trigger ជាមួយនឹង aria-describedby
គុណលក្ខណៈ។ ជាលទ្ធផល ខ្លឹមសារទាំងស្រុងនៃ popover នឹងត្រូវបានប្រកាសដល់អ្នកប្រើប្រាស់បច្ចេកវិទ្យាជាជំនួយក្នុងការស្ទ្រីមរយៈពេលវែង និងគ្មានការរំខាន។
លើសពីនេះទៀត ខណៈពេលដែលវាអាចធ្វើទៅបានផងដែរដើម្បីរួមបញ្ចូលការគ្រប់គ្រងអន្តរកម្ម (ដូចជាធាតុទម្រង់ ឬតំណភ្ជាប់) នៅក្នុងការលេចឡើងរបស់អ្នក (ដោយបន្ថែមធាតុទាំងនេះទៅ whiteList
ឬគុណលក្ខណៈ និងស្លាកដែលបានអនុញ្ញាត) ត្រូវដឹងថាបច្ចុប្បន្ន popover មិនគ្រប់គ្រងលំដាប់នៃការផ្តោតអារម្មណ៍ក្តារចុចទេ។ នៅពេលដែលអ្នកប្រើក្តារចុចបើកផ្ទាំង popover ការផ្តោតអារម្មណ៍នៅតែមាននៅលើធាតុបង្កហេតុ ហើយជាធម្មតា popover មិនធ្វើតាមគន្លឹះក្នុងរចនាសម្ព័ន្ធឯកសារភ្លាមៗនោះ វាមិនមានការធានាថាការបន្តទៅមុខ/ចុចនោះទេ។TABនឹងផ្លាស់ទីអ្នកប្រើក្តារចុចចូលទៅក្នុង popover ខ្លួនវាផ្ទាល់។ សរុបមក ការបន្ថែមវត្ថុបញ្ជាអន្តរកម្មទៅ popover ទំនងជាធ្វើឱ្យការគ្រប់គ្រងទាំងនេះមិនអាចទៅដល់/មិនអាចប្រើប្រាស់បានសម្រាប់អ្នកប្រើប្រាស់ក្តារចុច និងអ្នកប្រើប្រាស់បច្ចេកវិទ្យាជំនួយ ឬយ៉ាងហោចណាស់ធ្វើឱ្យមានលំដាប់នៃការផ្តោតជារួមដែលមិនសមហេតុផល។ នៅក្នុងករណីទាំងនេះ សូមពិចារណាប្រើប្រអប់ម៉ូឌុលជំនួសវិញ។
ជម្រើស
ជម្រើសអាចត្រូវបានឆ្លងកាត់តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript ។ សម្រាប់គុណលក្ខណៈទិន្នន័យ សូមបន្ថែមឈ្មោះជម្រើសទៅ data-
ដូចក្នុង data-animation=""
.
ចំណាំថាសម្រាប់ហេតុផលសុវត្ថិភាព sanitize
, sanitizeFn
និង whiteList
ជម្រើសមិនអាចផ្គត់ផ្គង់ដោយប្រើប្រាស់លក្ខណៈទិន្នន័យបានទេ។
ឈ្មោះ | ប្រភេទ | លំនាំដើម | ការពិពណ៌នា |
---|---|---|---|
ចលនា | ប៊ូលីន | ពិត | អនុវត្តការផ្លាស់ប្តូរបន្ថយ CSS ទៅ popover |
ធុង | ខ្សែអក្សរ | ធាតុ | មិនពិត | មិនពិត | បន្ថែម popover ទៅធាតុជាក់លាក់មួយ។ ឧទាហរណ៍៖ |
មាតិកា | ខ្សែអក្សរ | ធាតុ | មុខងារ | '' | តម្លៃមាតិកាលំនាំដើម ប្រសិនបើ ប្រសិនបើមុខងារត្រូវបានផ្តល់ឱ្យ វានឹងត្រូវបានគេហៅជាមួយនឹង |
ពន្យាពេល | លេខ | វត្ថុ | 0 | ការពន្យាពេលបង្ហាញ និងលាក់ popover (ms) - មិនអនុវត្តចំពោះប្រភេទកេះដោយដៃទេ។ ប្រសិនបើលេខត្រូវបានផ្គត់ផ្គង់ ការពន្យារពេលត្រូវបានអនុវត្តចំពោះទាំងលាក់/បង្ហាញ រចនាសម្ព័ន្ធវត្ថុគឺ៖ |
html | ប៊ូលីន | មិនពិត | បញ្ចូល HTML ទៅក្នុង popover ។ ប្រសិនបើមិនពិត វិធីសាស្ត្ររបស់ jQuery text នឹងត្រូវបានប្រើដើម្បីបញ្ចូលមាតិកាទៅក្នុង DOM ។ ប្រើអត្ថបទប្រសិនបើអ្នកព្រួយបារម្ភអំពីការវាយប្រហារ XSS ។ |
ការដាក់ | ខ្សែអក្សរ | មុខងារ | 'ត្រូវ' | របៀបដាក់ popover - auto | កំពូល | បាត | ឆ្វេង | ត្រឹមត្រូវ។ នៅពេលដែលអនុគមន៍មួយត្រូវបានប្រើដើម្បីកំណត់ការដាក់ វាត្រូវបានហៅជាមួយថ្នាំង DOM popover ជាអាគុយម៉ង់ដំបូងរបស់វា និងធាតុបង្កកថ្នាំង DOM ជាលើកទីពីររបស់វា។ បរិបទ |
អ្នកជ្រើសរើស | ខ្សែអក្សរ | មិនពិត | មិនពិត | ប្រសិនបើឧបករណ៍ជ្រើសរើសត្រូវបានផ្តល់ឱ្យ វត្ថុ popover នឹងត្រូវបានផ្ទេរទៅគោលដៅដែលបានបញ្ជាក់។ នៅក្នុងការអនុវត្ត វាត្រូវបានប្រើដើម្បីបើកមាតិកា HTML ថាមវន្ត ដើម្បីឱ្យមានការបន្ថែម popovers ។ សូមមើល នេះ និង ឧទាហរណ៍ព័ត៌មាន ។ |
គំរូ | ខ្សែអក្សរ | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
មូលដ្ឋាន HTML ដើម្បីប្រើនៅពេលបង្កើត popover ។ Popover's Popover's
ធាតុរុំខាងក្រៅបំផុតគួរតែមាន |
ចំណងជើង | ខ្សែអក្សរ | ធាតុ | មុខងារ | '' | តម្លៃចំណងជើងលំនាំដើម ប្រសិនបើ ប្រសិនបើមុខងារត្រូវបានផ្តល់ឱ្យ វានឹងត្រូវបានគេហៅជាមួយនឹង |
កេះ | ខ្សែអក្សរ | 'ចុច' | របៀបដែល popover ត្រូវបានកេះ - ចុច | hover | ផ្តោតអារម្មណ៍ | ហត្ថកម្ម។ អ្នកអាចឆ្លងកាត់គន្លឹះជាច្រើន; បំបែកពួកវាដោយចន្លោះមួយ។ manual មិនអាចត្រូវបានរួមបញ្ចូលជាមួយកេះផ្សេងទៀត។ |
អុហ្វសិត | លេខ | ខ្សែអក្សរ | 0 | អុហ្វសិតនៃ popover ទាក់ទងទៅនឹងគោលដៅរបស់វា។ សម្រាប់ព័ត៌មានបន្ថែម សូមមើល ឯកសារអុហ្វសិត របស់ Popper.js ។ |
ទីតាំងធ្លាក់ចុះ | ខ្សែអក្សរ | អារេ | 'ត្រឡប់' | អនុញ្ញាតឱ្យបញ្ជាក់ទីតាំងណាដែល Popper នឹងប្រើនៅពេលត្រលប់ក្រោយ។ សម្រាប់ព័ត៌មានបន្ថែម សូមមើល ឯកសារអាកប្បកិរិយា របស់ Popper.js |
ព្រំដែន | ខ្សែអក្សរ | ធាតុ | 'scrollParent' | ហួសព្រំដែនកំណត់នៃ popover ។ ទទួលយកតម្លៃនៃ 'viewport' , 'window' , 'scrollParent' , ឬឯកសារយោង HTMLElement (JavaScript តែប៉ុណ្ណោះ)។ សម្រាប់ព័ត៌មានបន្ថែម សូមមើលឯកសារ PreventOverflow របស់ Popper.js ។ |
ធ្វើអនាម័យ | ប៊ូលីន | ពិត | បើក ឬបិទការធ្វើអនាម័យ។ ប្រសិនបើបានធ្វើឱ្យសកម្ម 'template' ហើយ ជម្រើស 'content' នឹង 'title' ត្រូវបានសម្អាត។ |
បញ្ជីស | វត្ថុ | តម្លៃលំនាំដើម | វត្ថុដែលមានគុណលក្ខណៈ និងស្លាកដែលបានអនុញ្ញាត |
អនាម័យFn | null | មុខងារ | មោឃៈ | នៅទីនេះអ្នកអាចផ្គត់ផ្គង់មុខងារអនាម័យផ្ទាល់ខ្លួនរបស់អ្នក។ វាអាចមានប្រយោជន៍ ប្រសិនបើអ្នកចូលចិត្តប្រើបណ្ណាល័យដែលខិតខំប្រឹងប្រែងដើម្បីអនុវត្តអនាម័យ។ |
popperConfig | null | វត្ថុ | មោឃៈ | ដើម្បីផ្លាស់ប្តូរការកំណត់លំនាំដើម Popper.js របស់ Bootstrap សូមមើល ការកំណត់រចនាសម្ព័ន្ធរបស់ Popper.js |
គុណលក្ខណៈទិន្នន័យសម្រាប់ popovers បុគ្គល
ជម្រើសសម្រាប់ popovers បុគ្គលអាចត្រូវបានបញ្ជាក់ជាជម្រើសតាមរយៈការប្រើប្រាស់គុណលក្ខណៈទិន្នន័យ ដូចដែលបានពន្យល់ខាងលើ។
វិធីសាស្រ្ត
វិធីសាស្រ្ត និងការផ្លាស់ប្តូរអសមកាល
វិធីសាស្រ្ត API ទាំងអស់គឺ អសមកាល ហើយចាប់ផ្តើមការ ផ្លាស់ប្តូរ ។ ពួកគេត្រឡប់ទៅអ្នកហៅចូលវិញភ្លាមៗ នៅពេលដែលការផ្លាស់ប្តូរត្រូវបានចាប់ផ្តើម ប៉ុន្តែ មុនពេលវាបញ្ចប់ ។ លើសពីនេះទៀត ការហៅតាមវិធីសាស្ត្រលើ សមាសភាគអន្តរកាលនឹងត្រូវបានមិនអើពើ ។
$().popover(options)
ចាប់ផ្តើម popovers សម្រាប់ការប្រមូលធាតុ។
.popover('show')
បង្ហាញការលេចឡើងនៃធាតុមួយ។ ត្រឡប់ទៅអ្នកហៅទូរសព្ទវិញមុនពេលលេចចេញត្រូវបានបង្ហាញយ៉ាងពិតប្រាកដ (ឧ. មុន shown.bs.popover
ព្រឹត្តិការណ៍កើតឡើង)។ នេះត្រូវបានគេចាត់ទុកថាជា "សៀវភៅដៃ" ការបង្កឱ្យមានការលេចចេញ។ Popovers ដែលចំណងជើង និងខ្លឹមសារមានប្រវែងសូន្យមិនត្រូវបានបង្ហាញទេ។
.popover('hide')
លាក់ការលេចឡើងនៃធាតុមួយ។ ត្រឡប់ទៅអ្នកហៅទូរសព្ទវិញមុនពេលលេចឮតាមពិតត្រូវបានលាក់ (ឧ. មុន hidden.bs.popover
ព្រឹត្តិការណ៍កើតឡើង)។ នេះត្រូវបានគេចាត់ទុកថាជា "សៀវភៅដៃ" ការបង្កឱ្យមានការលេចចេញ។
.popover('toggle')
បិទ/បើកការលេចឡើងនៃធាតុមួយ។ ត្រឡប់ទៅកាន់អ្នកហៅទូរសព្ទវិញ មុនពេលការលេចចេញត្រូវបានបង្ហាញ ឬ លាក់ (ឧទាហរណ៍ មុនពេល ព្រឹត្តិការណ៍កើតឡើង)។ នេះត្រូវបានគេចាត់ទុកថាជា "សៀវភៅដៃ" ការបង្កឱ្យមានការលេចចេញ។shown.bs.popover
hidden.bs.popover
.popover('dispose')
លាក់ និងបំផ្លាញការលេចឡើងនៃធាតុមួយ។ Popovers ដែលប្រើការធ្វើប្រតិភូកម្ម (ដែលត្រូវបានបង្កើតដោយប្រើ ជម្រើស )selector
មិនអាចត្រូវបំផ្លាញដោយឡែកៗពីគ្នាលើធាតុ descendant trigger ទេ។
.popover('enable')
ផ្តល់លទ្ធភាពបង្ហាញវត្តមានរបស់ធាតុ។ Popovers ត្រូវបានបើកតាមលំនាំដើម។
.popover('disable')
ដកសមត្ថភាពសម្រាប់ការបង្ហាញរបស់ធាតុដែលលេចឡើង។ Popover នឹងអាចបង្ហាញបានលុះត្រាតែវាត្រូវបានបើកឡើងវិញ។
.popover('toggleEnabled')
បិទ/បើកលទ្ធភាពសម្រាប់ការលេចចេញរបស់ធាតុមួយដើម្បីបង្ហាញឬលាក់។
.popover('update')
ធ្វើបច្ចុប្បន្នភាពទីតាំងនៃការលេចឡើងនៃធាតុមួយ។
ព្រឹត្តិការណ៍
ប្រភេទព្រឹត្តិការណ៍ | ការពិពណ៌នា |
---|---|
show.bs.popover | ព្រឹត្តិការណ៍នេះឆេះភ្លាមៗ នៅពេលដែល show វិធីសាស្ត្រ instance ត្រូវបានហៅ។ |
បង្ហាញ.bs.popover | ព្រឹត្តិការណ៍នេះត្រូវបានបញ្ឈប់នៅពេលដែលផ្ទាំងព័ត៌មានត្រូវបានធ្វើឱ្យអ្នកប្រើមើលឃើញ (នឹងរង់ចាំការផ្លាស់ប្តូរ CSS ដើម្បីបញ្ចប់)។ |
hide.bs.popover | ព្រឹត្តិការណ៍នេះត្រូវបានបញ្ឈប់ភ្លាមៗនៅពេលដែល hide វិធីសាស្ត្រវត្ថុត្រូវបានហៅ។ |
លាក់.bs.popover | ព្រឹត្តិការណ៍នេះត្រូវបានបញ្ឈប់នៅពេលដែល popover បានបញ្ចប់ត្រូវបានលាក់ពីអ្នកប្រើប្រាស់ (នឹងរង់ចាំការផ្លាស់ប្តូរ CSS បញ្ចប់)។ |
បញ្ចូល.bs.popover | ព្រឹត្តិការណ៍នេះត្រូវបានបញ្ឈប់បន្ទាប់ពី show.bs.popover ព្រឹត្តិការណ៍នៅពេលដែលគំរូ popover ត្រូវបានបន្ថែមទៅ DOM ។ |