Popovers
உங்கள் தளத்தில் உள்ள எந்த உறுப்புக்கும் iOS இல் உள்ளதைப் போன்ற பூட்ஸ்டார்ப் பாப்ஓவர்களைச் சேர்ப்பதற்கான ஆவணங்கள் மற்றும் எடுத்துக்காட்டுகள்.
கண்ணோட்டம்
பாப்ஓவர் செருகுநிரலைப் பயன்படுத்தும் போது தெரிந்து கொள்ள வேண்டியவை:
- Popovers 3வது தரப்பு லைப்ரரியான Popper.js ஐ பொசிஷனிங் செய்ய நம்பியுள்ளது. நீங்கள் bootstrap.js க்கு முன் popper.min.js ஐ சேர்க்க வேண்டும் அல்லது popovers வேலை செய்ய Popper.js ஐ கொண்டிருக்கும்
bootstrap.bundle.min.js
/ பயன்படுத்தவும்!bootstrap.bundle.js
- Popovers டூல்டிப் சொருகி ஒரு சார்புநிலையாக தேவைப்படுகிறது.
- நீங்கள் எங்கள் ஜாவாஸ்கிரிப்டை மூலத்திலிருந்து உருவாக்கினால், அதற்கு
util.js
. - செயல்திறன் காரணங்களுக்காக Popovers தேர்வு செய்யப்படுகின்றன, எனவே அவற்றை நீங்களே துவக்க வேண்டும் .
- பூஜ்ஜிய நீளம்
title
மற்றும்content
மதிப்புகள் ஒருபோதும் பாப்ஓவரைக் காட்டாது. - மிகவும் சிக்கலான கூறுகளில் (எங்கள் உள்ளீட்டு குழுக்கள், பொத்தான் குழுக்கள் போன்றவை) ரெண்டரிங்
container: 'body'
சிக்கல்களைத் தவிர்க்க குறிப்பிடவும். - மறைக்கப்பட்ட கூறுகளில் பாப்ஓவர்களைத் தூண்டுவது வேலை செய்யாது.
- ஒரு ரேப்பர் உறுப்பில் பாபோவர்ஸ்
.disabled
அல்லதுdisabled
உறுப்புகள் தூண்டப்பட வேண்டும். - பல கோடுகளில் மூடப்பட்டிருக்கும் ஆங்கர்களில் இருந்து தூண்டப்படும் போது, பாப்ஓவர்கள் ஆங்கர்களின் ஒட்டுமொத்த அகலத்திற்கு இடையே மையப்படுத்தப்படும். இந்த நடத்தையைத் தவிர்க்க
.text-nowrap
உங்கள் களில் பயன்படுத்தவும் .<a>
- DOM இலிருந்து தொடர்புடைய உறுப்புகள் அகற்றப்படுவதற்கு முன், Popovers மறைக்கப்பட வேண்டும்.
- நிழல் DOM இல் உள்ள ஒரு உறுப்புக்கு நன்றி செலுத்துவதன் மூலம் Popovers தூண்டப்படலாம்.
இந்தக் கூறுகளின் அனிமேஷன் விளைவு prefers-reduced-motion
மீடியா வினவலைச் சார்ந்தது. எங்கள் அணுகல்தன்மை ஆவணத்தின் குறைக்கப்பட்ட இயக்கம் பகுதியைப் பார்க்கவும் .
சில எடுத்துக்காட்டுகளுடன் popovers எவ்வாறு செயல்படுகிறது என்பதைப் பார்க்க தொடர்ந்து படியுங்கள்.
எடுத்துக்காட்டு: எல்லா இடங்களிலும் பாப்ஓவர்களை இயக்கவும்
data-toggle
ஒரு பக்கத்தில் அனைத்து பாபோவர்களையும் துவக்குவதற்கான ஒரு வழி, அவற்றின் பண்புக்கூறு மூலம் அவற்றைத் தேர்ந்தெடுப்பதாகும் :
எடுத்துக்காட்டு: container
விருப்பத்தைப் பயன்படுத்துதல்
பாப்ஓவரில் குறுக்கிடும் ஒரு பெற்றோர் உறுப்பில் சில ஸ்டைல்கள் இருந்தால், container
அதற்குப் பதிலாக அந்த உறுப்பில் பாப்ஓவரின் HTML தோன்றும் வகையில் தனிப்பயன் ஒன்றைக் குறிப்பிட வேண்டும்.
உதாரணமாக
நான்கு திசைகள்
நான்கு விருப்பங்கள் உள்ளன: மேல், வலது, கீழ் மற்றும் இடது சீரமைக்கப்பட்டது.
அடுத்த கிளிக்கில் நிராகரிக்கவும்
focus
மாற்று உறுப்பைக் காட்டிலும் வேறொரு உறுப்பின் பயனரின் அடுத்த கிளிக்கில் பாப்ஓவர்களை நிராகரிக்க தூண்டுதலைப் பயன்படுத்தவும் .
அடுத்த கிளிக்கில் நிராகரிக்க குறிப்பிட்ட மார்க்அப் தேவை
சரியான குறுக்கு-உலாவி மற்றும் குறுக்கு-தளம் நடத்தைக்கு, நீங்கள் குறிச்சொல்லைப் பயன்படுத்த வேண்டும், <a>
குறிச்சொல்லை அல்ல , <button>
மேலும் நீங்கள் ஒரு tabindex
பண்புக்கூறையும் சேர்க்க வேண்டும்.
முடக்கப்பட்ட கூறுகள்
பண்புக்கூறுடன் கூடிய கூறுகள் disabled
ஊடாடக்கூடியவை அல்ல, அதாவது பாப்ஓவரை (அல்லது உதவிக்குறிப்பு) தூண்டுவதற்கு பயனர்கள் அவற்றைச் சுழற்றவோ அல்லது கிளிக் செய்யவோ முடியாது. ஒரு தீர்வாக, நீங்கள் ஒரு ரேப்பரிலிருந்து பாப்ஓவரைத் தூண்ட வேண்டும் <div>
அல்லது முடக்கப்பட்ட உறுப்பை <span>
மேலெழுத வேண்டும் pointer-events
.
முடக்கப்பட்ட பாப்ஓவர் தூண்டுதல்களுக்கு, data-trigger="hover"
உங்கள் பயனர்கள் முடக்கப்பட்ட உறுப்பைக் கிளிக் செய்ய எதிர்பார்க்காததால், பாப்ஓவர் உடனடி காட்சிப் பின்னூட்டமாகத் தோன்றும்.
பயன்பாடு
ஜாவாஸ்கிரிப்ட் வழியாக பாப்ஓவர்களை இயக்கவும்:
விசைப்பலகை மற்றும் உதவி தொழில்நுட்ப பயனர்களுக்கு popovers வேலை செய்யும்
விசைப்பலகை பயனர்கள் உங்கள் பாப்ஓவர்களைச் செயல்படுத்த அனுமதிக்க, பாரம்பரியமாக கீபோர்டு-ஃபோகஸ் செய்யக்கூடிய மற்றும் ஊடாடும் (இணைப்புகள் அல்லது படிவக் கட்டுப்பாடுகள் போன்றவை) HTML உறுப்புகளில் மட்டுமே அவற்றைச் சேர்க்க வேண்டும். பண்புக்கூறைச் சேர்ப்பதன் மூலம் தன்னிச்சையான HTML உறுப்புகள் ( <span>
கள் போன்றவை) கவனம் செலுத்த முடியும் என்றாலும், இது விசைப்பலகை பயனர்களுக்கு ஊடாடாத கூறுகளில் tabindex="0"
எரிச்சலூட்டும் மற்றும் குழப்பமான தாவல் நிறுத்தங்களைச் சேர்க்கும், மேலும் பெரும்பாலான உதவித் தொழில்நுட்பங்கள் தற்போது பாப்ஓவரின் உள்ளடக்கத்தை அறிவிக்கவில்லை. . கூடுதலாக, உங்கள் பாப்ஓவர்களுக்கான தூண்டுதலாக மட்டுமே நம்ப வேண்டாம் hover
, ஏனெனில் இது விசைப்பலகை பயனர்களைத் தூண்டுவதை சாத்தியமற்றதாக்கும்.
இந்த விருப்பத்தின் மூலம் நீங்கள் பணக்கார, கட்டமைக்கப்பட்ட HTML ஐ பாப்ஓவர்களில் செருக முடியும் என்றாலும், html
அதிகப்படியான உள்ளடக்கத்தைச் சேர்ப்பதைத் தவிர்க்குமாறு நாங்கள் கடுமையாக பரிந்துரைக்கிறோம். popovers தற்போது செயல்படும் விதம் என்னவென்றால், ஒருமுறை காட்டப்பட்டால், அவற்றின் உள்ளடக்கம் aria-describedby
பண்புக்கூறுடன் தூண்டுதல் உறுப்புடன் இணைக்கப்பட்டுள்ளது. இதன் விளைவாக, பாப்ஓவரின் முழு உள்ளடக்கமும் ஒரு நீண்ட, தடையற்ற ஸ்ட்ரீமாக உதவி தொழில்நுட்ப பயனர்களுக்கு அறிவிக்கப்படும்.
கூடுதலாக, உங்கள் பாப்ஓவரில் ஊடாடும் கட்டுப்பாடுகளையும் (படிவ உறுப்புகள் அல்லது இணைப்புகள் போன்றவை) சேர்க்க முடியும் (இந்த உறுப்புகளை whiteList
அல்லது அனுமதிக்கப்பட்ட பண்புக்கூறுகள் மற்றும் குறிச்சொற்களில் சேர்ப்பதன் மூலம்), தற்போது பாப்ஓவர் விசைப்பலகை ஃபோகஸ் ஆர்டரை நிர்வகிக்கவில்லை என்பதை அறிந்து கொள்ளுங்கள். விசைப்பலகை பயனர் ஒரு பாப்ஓவரைத் திறக்கும்போது, தூண்டுதல் உறுப்பு மீது கவனம் செலுத்தப்படும், மேலும் ஆவணத்தின் கட்டமைப்பில் உள்ள தூண்டுதலைப் பொதுவாக பாப்ஓவர் உடனடியாகப் பின்பற்றாததால், முன்னோக்கி நகர்கிறது/அழுத்துகிறது என்பதற்கு எந்த உத்தரவாதமும் இல்லை.TABவிசைப்பலகை பயனரை பாப்ஓவரிலேயே நகர்த்தும். சுருக்கமாக, பாப்ஓவரில் ஊடாடும் கட்டுப்பாடுகளைச் சேர்ப்பது, விசைப்பலகை பயனர்களுக்கும் உதவித் தொழில்நுட்பங்களைப் பயன்படுத்துபவர்களுக்கும் இந்தக் கட்டுப்பாடுகளை அணுக முடியாத/பயன்படுத்த முடியாததாக மாற்றும் அல்லது குறைந்தபட்சம் ஒரு நியாயமற்ற ஒட்டுமொத்த ஃபோகஸ் ஆர்டரை உருவாக்கலாம். இந்த சந்தர்ப்பங்களில், அதற்குப் பதிலாக மாதிரி உரையாடலைப் பயன்படுத்தவும்.
விருப்பங்கள்
தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் மூலம் விருப்பங்களை அனுப்பலாம். data-
தரவு பண்புக்கூறுகளுக்கு, இல் உள்ளதைப் போல விருப்பப் பெயரைச் சேர்க்கவும் data-animation=""
.
பாதுகாப்பு காரணங்களுக்காக தரவு பண்புக்கூறுகளைப் பயன்படுத்தி sanitize
, sanitizeFn
மற்றும் whiteList
விருப்பங்களை வழங்க முடியாது என்பதை நினைவில் கொள்ளவும்.
பெயர் | வகை | இயல்புநிலை | விளக்கம் |
---|---|---|---|
இயங்குபடம் | பூலியன் | உண்மை | பாப்ஓவருக்கு CSS ஃபேட் மாற்றத்தைப் பயன்படுத்தவும் |
கொள்கலன் | சரம் | உறுப்பு | பொய் | பொய் | ஒரு குறிப்பிட்ட உறுப்புடன் பாப்ஓவரைச் சேர்க்கிறது. உதாரணம்: |
உள்ளடக்கம் | சரம் | உறுப்பு | செயல்பாடு | '' |
ஒரு செயல்பாடு கொடுக்கப்பட்டால், அது |
தாமதம் | எண் | பொருள் | 0 | பாப்ஓவரை (எம்எஸ்) காட்டுவது மற்றும் மறைப்பது தாமதம் - கைமுறை தூண்டுதல் வகைக்கு பொருந்தாது ஒரு எண் வழங்கப்பட்டால், மறை/காட்சி இரண்டிற்கும் தாமதம் பயன்படுத்தப்படும் பொருளின் அமைப்பு: |
html | பூலியன் | பொய் | பாப்ஓவரில் HTML ஐச் செருகவும். text தவறு எனில் , DOM இல் உள்ளடக்கத்தைச் செருக jQuery இன் முறை பயன்படுத்தப்படும். XSS தாக்குதல்களைப் பற்றி நீங்கள் கவலைப்பட்டால், உரையைப் பயன்படுத்தவும். |
வேலை வாய்ப்பு | சரம் | செயல்பாடு | 'சரி' | பாப்ஓவரை நிலைநிறுத்துவது எப்படி - ஆட்டோ | மேல் | கீழே | விட்டு | சரி. இடத்தைத் தீர்மானிக்க ஒரு செயல்பாடு பயன்படுத்தப்படும்போது, அது பாப்ஓவர் DOM முனை அதன் முதல் வாதமாகவும், தூண்டுதல் உறுப்பு DOM முனை அதன் இரண்டாவது எனவும் அழைக்கப்படுகிறது. சூழல் பாப்ஓவர் நிகழ்வாக |
தேர்வாளர் | சரம் | பொய் | பொய் | தேர்வாளர் வழங்கப்பட்டால், குறிப்பிட்ட இலக்குகளுக்கு பாப்ஓவர் பொருள்கள் ஒப்படைக்கப்படும். நடைமுறையில், டைனமிக் HTML உள்ளடக்கத்தை பாப்ஓவர் சேர்க்க இது பயன்படுத்தப்படுகிறது. இதையும் ஒரு தகவல் உதாரணத்தையும் பார்க்கவும் . |
டெம்ப்ளேட் | லேசான கயிறு | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
பாப்ஓவரை உருவாக்கும் போது பயன்படுத்த அடிப்படை HTML. பாப்ஓவரில் பாப்ஓவரில்
வெளிப்புற ரேப்பர் உறுப்பு வகுப்பைக் கொண்டிருக்க வேண்டும் |
தலைப்பு | சரம் | உறுப்பு | செயல்பாடு | '' |
ஒரு செயல்பாடு கொடுக்கப்பட்டால், அது |
தூண்டுதல் | லேசான கயிறு | 'கிளிக்' | பாப்ஓவர் எவ்வாறு தூண்டப்படுகிறது - கிளிக் | மிதவை | கவனம் | கையேடு. நீங்கள் பல தூண்டுதல்களை அனுப்பலாம்; அவற்றை ஒரு இடைவெளியுடன் பிரிக்கவும். manual வேறு எந்த தூண்டுதலுடனும் இணைக்க முடியாது. |
ஆஃப்செட் | எண் | லேசான கயிறு | 0 | அதன் இலக்குடன் தொடர்புடைய பாப்ஓவரின் ஈடுசெய்யப்பட்டது. மேலும் தகவலுக்கு, Popper.js இன் ஆஃப்செட் டாக்ஸைப் பார்க்கவும் . |
வீழ்ச்சியடைதல் | சரம் | வரிசை | 'புரட்டு' | ஃபால்பேக்கில் பாப்பர் எந்த நிலையைப் பயன்படுத்துவார் என்பதைக் குறிப்பிட அனுமதிக்கவும். மேலும் தகவலுக்கு, Popper.js இன் நடத்தை ஆவணத்தைப் பார்க்கவும் |
எல்லை | சரம் | உறுப்பு | 'சுருள் பெற்றோர்' | பாப்ஓவரின் ஓவர்ஃப்ளோ கட்டுப்பாடு எல்லை. 'viewport' , 'window' , 'scrollParent' , அல்லது HTMLElement குறிப்பு (JavaScript மட்டும்) இன் மதிப்புகளை ஏற்கிறது . மேலும் தகவலுக்கு, Popper.js-ன் தடுத்தல் ஆவணத்தைப் பார்க்கவும் . |
சுத்தப்படுத்து | பூலியன் | உண்மை | சுத்தப்படுத்துதலை இயக்கவும் அல்லது முடக்கவும். செயல்படுத்தப்பட்டால் 'template' , 'content' மற்றும் 'title' விருப்பங்கள் சுத்தப்படுத்தப்படும். |
வெள்ளைப்பட்டியல் | பொருள் | இயல்புநிலை மதிப்பு | அனுமதிக்கப்பட்ட பண்புக்கூறுகள் மற்றும் குறிச்சொற்களைக் கொண்ட பொருள் |
சுத்திகரிப்பு | பூஜ்ய | செயல்பாடு | ஏதுமில்லை | இங்கே நீங்கள் உங்கள் சொந்த சுத்திகரிப்பு செயல்பாட்டை வழங்கலாம். சுத்திகரிப்பு செய்ய பிரத்யேக நூலகத்தைப் பயன்படுத்த விரும்பினால் இது பயனுள்ளதாக இருக்கும். |
popperConfig | பூஜ்ய | பொருள் | ஏதுமில்லை | Bootstrap இன் இயல்புநிலை Popper.js கட்டமைப்பை மாற்ற, Popper.js இன் உள்ளமைவைப் பார்க்கவும் |
தனிப்பட்ட பாபோவர்களுக்கான தரவு பண்புக்கூறுகள்
மேலே விவரிக்கப்பட்டுள்ளபடி, தனிப்பட்ட பாப்ஓவர்களுக்கான விருப்பங்களை தரவு பண்புக்கூறுகளின் மூலம் மாற்றாகக் குறிப்பிடலாம்.
முறைகள்
ஒத்திசைவற்ற முறைகள் மற்றும் மாற்றங்கள்
அனைத்து API முறைகளும் ஒத்திசைவற்றவை மற்றும் மாற்றத்தைத் தொடங்குகின்றன . மாற்றம் தொடங்கப்பட்டவுடன், ஆனால் அது முடிவதற்குள் அவர்கள் அழைப்பாளரிடம் திரும்புகிறார்கள் . கூடுதலாக, மாற்றும் கூறுகளின் முறை அழைப்பு புறக்கணிக்கப்படும் .
மேலும் தகவலுக்கு எங்கள் ஜாவாஸ்கிரிப்ட் ஆவணங்களைப் பார்க்கவும் .
$().popover(options)
உறுப்பு சேகரிப்புக்கான பாப்ஓவர்களைத் துவக்குகிறது.
.popover('show')
ஒரு தனிமத்தின் பாப்ஓவரை வெளிப்படுத்துகிறது. பாப்ஓவர் உண்மையில் காட்டப்படுவதற்கு முன்பு (அதாவது shown.bs.popover
நிகழ்வு நிகழும் முன்) அழைப்பாளருக்குத் திரும்புகிறது. இது பாப்ஓவரின் "கையேடு" தூண்டுதலாகக் கருதப்படுகிறது. தலைப்பு மற்றும் உள்ளடக்கம் பூஜ்ஜிய நீளம் கொண்ட Popovers ஒருபோதும் காட்டப்படாது.
.popover('hide')
ஒரு தனிமத்தின் பாப்ஓவரை மறைக்கிறது. பாப்ஓவர் உண்மையில் மறைக்கப்படுவதற்கு முன்பு (அதாவது hidden.bs.popover
நிகழ்வு நிகழும் முன்) அழைப்பாளரிடம் திரும்பும். இது பாப்ஓவரின் "கையேடு" தூண்டுதலாகக் கருதப்படுகிறது.
.popover('toggle')
ஒரு உறுப்பின் பாப்ஓவரை மாற்றுகிறது. பாப்ஓவர் உண்மையில் காட்டப்படுவதற்கு அல்லது மறைக்கப்படுவதற்கு முன்பு (அதாவது நிகழ்வு shown.bs.popover
அல்லது hidden.bs.popover
நிகழ்வு நிகழும் முன்) அழைப்பாளருக்குத் திரும்புகிறது. இது பாப்ஓவரின் "கையேடு" தூண்டுதலாகக் கருதப்படுகிறது.
.popover('dispose')
ஒரு தனிமத்தின் பாப்ஓவரை மறைத்து அழிக்கிறது. பிரதிநிதித்துவத்தைப் பயன்படுத்தும் Popovers ( selector
விருப்பத்தைப் பயன்படுத்தி உருவாக்கப்பட்டவை ) சந்ததி தூண்டுதல் கூறுகளில் தனித்தனியாக அழிக்கப்பட முடியாது.
.popover('enable')
ஒரு தனிமத்தின் பாப்ஓவர் காட்டப்படும் திறனை வழங்குகிறது. Popovers இயல்பாகவே இயக்கப்படும்.
.popover('disable')
ஒரு உறுப்பின் பாப்ஓவர் காட்டப்படுவதற்கான திறனை நீக்குகிறது. பாப்ஓவர் மீண்டும் இயக்கப்பட்டால் மட்டுமே அதைக் காட்ட முடியும்.
.popover('toggleEnabled')
ஒரு உறுப்பின் பாப்ஓவர் காட்டப்படும் அல்லது மறைக்கப்படுவதற்கான திறனை மாற்றுகிறது.
.popover('update')
உறுப்பின் பாப்ஓவரின் நிலையைப் புதுப்பிக்கிறது.
நிகழ்வுகள்
நிகழ்வு வகை | விளக்கம் |
---|---|
show.bs.popover | show நிகழ்வு முறை என்று அழைக்கப்படும் போது இந்த நிகழ்வு உடனடியாக சுடுகிறது . |
காட்டப்பட்டுள்ளது.bs.popover | பாப்ஓவர் பயனருக்குத் தெரியும் போது இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடிவடையும் வரை காத்திருக்கும்). |
hide.bs.popover | hide நிகழ்வு முறை அழைக்கப்பட்டவுடன் இந்த நிகழ்வு உடனடியாக நீக்கப்படும் . |
மறைக்கப்பட்ட.bs.popover | பாப்ஓவர் பயனரிடமிருந்து மறைக்கப்பட்டதும் (CSS மாற்றங்கள் முடியும் வரை காத்திருக்கும்) இந்த நிகழ்வு நீக்கப்படும். |
செருகப்பட்டது.bs.popover | show.bs.popover DOM இல் பாப்ஓவர் டெம்ப்ளேட் சேர்க்கப்படும் போது, நிகழ்வுக்குப் பிறகு இந்த நிகழ்வு நீக்கப்படும் . |