Popovers
ඔබගේ වෙබ් අඩවියේ ඇති ඕනෑම මූලද්රව්යයකට iOS හි ඇති ඒවා වැනි Bootstrap popovers එකතු කිරීම සඳහා ප්රලේඛනය සහ උදාහරණ.
දළ විශ්ලේෂණය
popover ප්ලගිනය භාවිතා කරන විට දැනගත යුතු දේවල්:
- Popovers ස්ථානගත කිරීම සඳහා 3වන පාර්ශ්ව පුස්තකාලය Popper මත රඳා පවතී . ඔබ bootstrap.js ට පෙර popper.min.js ඇතුළත් කළ යුතුය හෝ popovers ක්රියා කිරීම සඳහා Popper අඩංගු
bootstrap.bundle.min.js
/ භාවිතා කළ යුතුය!bootstrap.bundle.js
- Popovers මත යැපීම ලෙස මෙවලම් ඉඟි ප්ලගිනය අවශ්ය වේ.
- ඔබ අපගේ ජාවාස්ක්රිප්ට් නිර්මාණය කරන්නේ මූලාශ්රයෙන් නම්, එයට අවශ්ය වේ
util.js
. - Popovers කාර්ය සාධන හේතූන් මත තෝරාගෙන ඇත, එබැවින් ඔබ විසින්ම ඒවා ආරම්භ කළ යුතුය .
- ශුන්ය-දිග
title
සහcontent
අගයන් කිසිවිටෙක උත්ප්රාප්තිය නොපෙන්වයි. container: 'body'
වඩාත් සංකීර්ණ සංරචකවල (අපගේ ආදාන කණ්ඩායම්, බොත්තම් කණ්ඩායම්, ආදිය) විදැහුම්කරණ ගැටළු වළක්වා ගැනීමට සඳහන් කරන්න .- සැඟවුණු මූලද්රව්ය මත popovers අවුලුවාලීම ක්රියා නොකරනු ඇත.
- පොපෝවර්
.disabled
හෝdisabled
මූලද්රව්ය දවටන මූලද්රව්යයක් මත ක්රියාරම්භ කළ යුතුය. - රේඛා කිහිපයක් හරහා ඔතා ඇති නැංගුරම් වලින් ක්රියාරම්භ කරන විට, popovers නැංගුරම් වල සමස්ත පළල අතර කේන්ද්රගත වේ. මෙම හැසිරීම වළක්වා ගැනීමට
.text-nowrap
ඔබේ s මත භාවිතා කරන්න .<a>
- ඒවායේ අනුරූප මූලද්රව්ය DOM වෙතින් ඉවත් කිරීමට පෙර Popovers සැඟවිය යුතුය.
- සෙවනැලි DOM තුළ ඇති මූලද්රව්යයකට ස්තුති වන්නට Popovers ක්රියාරම්භ කළ හැක.
prefers-reduced-motion
මාධ්ය විමසුම මත රඳා පවතී. අපගේ ප්රවේශ්යතා ලේඛනවල අඩු කළ චලන කොටස බලන්න
.
සමහර උදාහරණ සමඟ popovers ක්රියා කරන ආකාරය බැලීමට කියවන්න.
උදාහරණය: සෑම තැනකම popovers සබල කරන්න
පිටුවක ඇති සියලුම popovers ආරම්භ කිරීමට එක් ක්රමයක් වනුයේ ඒවායේ data-toggle
ගුණාංගය අනුව ඒවා තෝරාගැනීමයි:
$(function () {
$('[data-toggle="popover"]').popover()
})
උදාහරණය: container
විකල්පය භාවිතා කිරීම
ඔබට popover එකකට බාධා කරන මව් මූලද්රව්යයක් මත සමහර මෝස්තර ඇති විට, container
ඒ වෙනුවට popover හි HTML එම මූලද්රව්යය තුළ දිස්වන පරිදි අභිරුචියක් සඳහන් කිරීමට ඔබට අවශ්ය වනු ඇත.
$(function () {
$('.example-popover').popover({
container: 'body'
})
})
උදාහරණයක්
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
දිශාවන් හතරක්
විකල්ප හතරක් තිබේ: ඉහළ, දකුණ, පහළ සහ වමට පෙළගස්වා ඇත.
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
Popover on left
</button>
ඊළඟ ක්ලික් කිරීම මත ඉවතලන්න
focus
ටොගල් මූලද්රව්යයට වඩා වෙනස් මූලද්රව්යයක පරිශීලකයාගේ මීළඟ ක්ලික් කිරීම මත popovers ඉවත දැමීමට ප්රේරකය භාවිතා කරන්න .
ඊළඟ-ක්ලික් කිරීම මත ඉවත් කිරීම සඳහා නිශ්චිත සලකුණු කිරීම අවශ්ය වේ
නිවැරදි හරස් බ්රවුසරය සහ හරස් වේදිකා හැසිරීම සඳහා, ඔබ ටැගය භාවිතා කළ යුතුය, ටැගය<a>
භාවිතා කළ යුතු අතර , ඔබ ගුණාංගයක් ද ඇතුළත් කළ යුතුය .<button>
tabindex
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
$('.popover-dismiss').popover({
trigger: 'focus'
})
ආබාධිත මූලද්රව්ය
උපලක්ෂණයක් සහිත මූලද්රව්ය disabled
අන්තර්ක්රියාකාරී නොවේ, එනම් පරිශීලකයින්ට පොපොවර් (හෝ මෙවලම් ඉඟි) ක්රියාරම්භ කිරීමට ඒවා සැරිසැරීමට හෝ ක්ලික් කිරීමට නොහැකි වේ. විසඳුමක් ලෙස, ඔබට පොප්ඕවර් එතුමකින් ක්රියාරම්භ කිරීමට <div>
හෝ <span>
සහ pointer-events
අක්රිය මූලද්රව්ය ප්රතික්ෂේප කිරීමට අවශ්ය වනු ඇත.
ආබාධිත popover ප්රේරක සඳහා, ඔබ කැමති විය හැක data-trigger="hover"
එවිට popover ඔබගේ පරිශීලකයින්ට ක්ෂණික දෘශ්ය ප්රතිපෝෂණයක් ලෙස දිස්වනු ඇත, මන්ද ඔවුන් අබල කළ මූලද්රව්යයක් මත ක්ලික් කිරීමට බලාපොරොත්තු නොවිය හැක.
<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
භාවිතය
JavaScript හරහා popovers සබල කරන්න:
$('#example').popover(options)
GPU ත්වරණය
GPU ත්වරණය සහ වෙනස් කරන ලද පද්ධති DPI හේතුවෙන් Windows 10 උපාංගවල Popovers සමහර විට නොපැහැදිලි ලෙස දිස්වේ. v4 හි මේ සඳහා වන විසඳුම වන්නේ ඔබේ popovers මත අවශ්ය පරිදි GPU ත්වරණය අක්රිය කිරීමයි.
යෝජිත නිවැරදි කිරීම:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
යතුරුපුවරු සහ සහායක තාක්ෂණ පරිශීලකයින් සඳහා popovers ක්රියා කිරීම
යතුරුපුවරු පරිශීලකයින්ට ඔබගේ popovers සක්රිය කිරීමට ඉඩ දීම සඳහා, ඔබ ඒවා සම්ප්රදායිකව යතුරුපුවරුව කේන්ද්රගත කළ හැකි සහ අන්තර්ක්රියාකාරී (සබැඳි හෝ පෝරම පාලන වැනි) HTML මූලද්රව්ය වෙත පමණක් එක් කළ යුතුය. අත්තනෝමතික HTML මූලද්රව්ය ( <span>
s වැනි) උපලක්ෂණ එකතු කිරීමෙන් නාභිගත කළ හැකි වුවද tabindex="0"
, මෙය යතුරුපුවරු භාවිත කරන්නන් සඳහා අන්තර්ක්රියාකාරී නොවන මූලද්රව්ය මත කරදරකාරී සහ ව්යාකූල ටැබ් නැවතුම් එක් කරනු ඇති අතර, බොහෝ සහායක තාක්ෂණ දැනට මෙම තත්ත්වය තුළ popover හි අන්තර්ගතය නිවේදනය නොකරයි. . මීට අමතරව, ඔබේ popovers සඳහා ප්රේරකය ලෙස පමණක් රඳා නොසිටින්න hover
, මෙය යතුරුපුවරු භාවිතා කරන්නන් සඳහා ක්රියාරම්භ කිරීමට නොහැකි වනු ඇත.
ඔබට විකල්පය සමඟ පොපෝවර් තුළ පොහොසත්, ව්යුහගත HTML ඇතුළත් කළ හැකි අතර html
, ඔබ අධික අන්තර්ගත ප්රමාණයක් එකතු කිරීමෙන් වළකින ලෙස අපි තරයේ නිර්දේශ කරමු. popovers දැනට ක්රියා කරන ආකාරය නම්, ප්රදර්ශනය වූ පසු, ඒවායේ අන්තර්ගතය aria-describedby
ගුණාංගය සමඟ ප්රේරක මූලද්රව්යයට බැඳී තිබීමයි. එහි ප්රතිඵලයක් වශයෙන්, popover හි සම්පූර්ණ අන්තර්ගතය එක් දිගු, අඛණ්ඩ ප්රවාහයක් ලෙස සහායක තාක්ෂණ පරිශීලකයින්ට නිවේදනය කරනු ඇත.
මීට අමතරව, ඔබගේ popover තුළ අන්තර්ක්රියාකාරී පාලන (ආකෘති මූලද්රව්ය හෝ සබැඳි වැනි) ඇතුළත් කිරීමට හැකි වන අතර (මෙම මූලද්රව්ය whiteList
හෝ අවසර දී ඇති ගුණාංග සහ ටැග් වෙත එක් කිරීමෙන්), දැනට popover යතුරුපුවරු නාභිගත අනුපිළිවෙල කළමනාකරණය නොකරන බව දැන ගන්න. යතුරුපුවරු පරිශීලකයෙකු popover එකක් විවෘත කරන විට, ප්රේරක මූලද්රව්යය කෙරෙහි අවධානය යොමු වන අතර, popover සාමාන්යයෙන් ලේඛනයේ ව්යුහයේ ඇති ප්රේරකය වහාම අනුගමනය නොකරන බැවින්, ඉදිරියට යාම/එබීම පිළිබඳ සහතිකයක් නොමැත.TABයතුරුපුවරු පරිශීලකයෙකු popover වෙත ගෙන යනු ඇත. කෙටියෙන් කිවහොත්, හුදෙක් popover එකකට අන්තර්ක්රියාකාරී පාලනයක් එක් කිරීමෙන් යතුරුපුවරු භාවිතා කරන්නන්ට සහ සහායක තාක්ෂණ භාවිතා කරන්නන්ට මෙම පාලන ළඟා විය නොහැකි/භාවිත කළ නොහැකි බවට පත් කිරීමට හෝ අවම වශයෙන් තාර්කික නොවන සමස්ත අවධානය යොමු කිරීමේ අනුපිළිවෙලක් ඇති කිරීමට ඉඩ ඇත. මෙම අවස්ථා වලදී, ඒ වෙනුවට මොඩල් සංවාදයක් භාවිතා කිරීම සලකා බලන්න.
විකල්ප
දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-
, ලෙසට එකතු කරන්න data-animation=""
.
sanitize
,
sanitizeFn
සහ
whiteList
විකල්ප දත්ත ගුණාංග භාවිතයෙන් සැපයිය නොහැකි බව සලකන්න.
නම | ටයිප් කරන්න | පෙරනිමිය | විස්තර |
---|---|---|---|
සජීවිකරණය | බූලියන් | සැබෑ | Popover වෙත CSS ෆේඩ් සංක්රාන්තියක් යොදන්න |
බහාලුම් | තන්තුව | මූලද්රව්යය | බොරු | බොරු | විශේෂිත මූලද්රව්යයකට popover එකතු කරයි. උදාහරණය |
අන්තර්ගතය | තන්තුව | මූලද්රව්යය | කාර්යය | '' |
ශ්රිතයක් ලබා දෙන්නේ නම්, එය |
ප්රමාදය | අංකය | වස්තුව | 0 | popover (ms) පෙන්වීම සහ සැඟවීම ප්රමාද කිරීම - අතින් ප්රේරක වර්ගයට අදාළ නොවේ අංකයක් සපයා ඇත්නම්, සැඟවීම/පෙන්වීම යන දෙකටම ප්රමාදය යෙදේ වස්තු ව්යුහය යනු: |
html | බූලියන් | බොරු | popover වෙත HTML ඇතුළු කරන්න. අසත්ය නම්, text DOM වෙත අන්තර්ගතය ඇතුළු කිරීමට jQuery හි ක්රමය භාවිතා කරනු ඇත. ඔබ XSS ප්රහාර ගැන කනස්සල්ලෙන් සිටින්නේ නම් පෙළ භාවිතා කරන්න. |
ස්ථානගත කිරීම | තන්තුව | කාර්යය | 'හරි' | popover ස්ථානගත කරන්නේ කෙසේද - auto | ඉහළ | පහළ | ඉතිරි | හරි. ස්ථානගත කිරීම තීරණය කිරීම සඳහා ශ්රිතයක් භාවිතා කරන විට, එය එහි පළමු තර්කය ලෙස popover DOM නෝඩය සහ ප්රේරක මූලද්රව්ය DOM නෝඩය එහි දෙවැන්න ලෙස හැඳින්වේ. |
තේරීම්කරු | තන්තුව | බොරු | බොරු | තේරීම්කාරකයක් සපයා තිබේ නම්, popover වස්තූන් නිශ්චිත ඉලක්ක වෙත පවරනු ලැබේ. ප්රායෝගිකව, මෙය popovers එකතු කිරීමට ගතික HTML අන්තර්ගතය සක්රීය කිරීමට භාවිතා කරයි. මෙය සහ තොරතුරු සහිත උදාහරණයක් බලන්න . |
සැකිල්ල | නූල් | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
popover නිර්මාණය කිරීමේදී භාවිතා කිරීමට මූලික HTML. පොපෝවර් පොපෝවර්
පිටතම දවටන මූලද්රව්යයේ |
ශීර්ෂය | තන්තුව | මූලද්රව්යය | කාර්යය | '' |
ශ්රිතයක් ලබා දෙන්නේ නම්, එය |
අවුලුවාලීම | නූල් | 'ක්ලික් කරන්න' | popover අවුලුවන ආකාරය - ක්ලික් කරන්න | සැරිසරනවා | අවධානය | අත්පොත. ඔබට ප්රේරක කිහිපයක් සමත් විය හැක; අවකාශය සමඟ ඒවා වෙන් කරන්න. manual වෙනත් ප්රේරකයක් සමඟ ඒකාබද්ධ කළ නොහැක. |
ඕෆ්සෙට් | අංකය | නූල් | 0 | එහි ඉලක්කයට සාපේක්ෂව පොපෝවර් හි හිලව් කිරීම. වැඩි විස්තර සඳහා Popper's offset docs වෙත යොමු වන්න . |
පහත වැටීම ස්ථානගත කිරීම | තන්තුව | අරාව | 'පෙරළන්න' | පසුබැසීමේදී Popper භාවිතා කරන්නේ කුමන ස්ථානයද යන්න සඳහන් කිරීමට ඉඩ දෙන්න. වැඩි විස්තර සඳහා පොපර්ගේ හැසිරීම් ලේඛන බලන්න |
අභිරුචි පන්තිය | තන්තුව | කාර්යය | '' | එය පෙන්වන විට popover වෙත පන්ති එක් කරන්න. අච්චුවෙහි දක්වා ඇති ඕනෑම පංතියකට අමතරව මෙම පන්ති එකතු කරන බව සලකන්න. බහු පන්ති එකතු කිරීමට, ඒවා හිස්තැන් වලින් වෙන් කරන්න: අමතර පන්ති නම් අඩංගු තනි තන්තුවක් ආපසු ලබා දිය යුතු ශ්රිතයක් ද ඔබට සම්මත කළ හැක. |
මායිම | තන්තුව | මූලද්රව්යය | 'scrollParent' | පොපෝවර් හි පිටාර ගැලීමේ සීමාව. 'viewport' , 'window' , 'scrollParent' , හෝ HTMLElement යොමු (JavaScript පමණි) අගයන් පිළිගනී. වැඩි විස්තර සඳහා Popper's preventOverflow docs වෙත යොමු වන්න . |
සනීපාරක්ෂක කරන්න | බූලියන් | සැබෑ | සනීපාරක්ෂාව සක්රිය හෝ අක්රිය කරන්න. සක්රිය කර ඇත්නම් 'template' , 'content' සහ 'title' විකල්පයන් සනීපාරක්ෂාව කෙරේ. අපගේ ජාවාස්ක්රිප්ට් ප්රලේඛනයේ සනීපාරක්ෂක අංශය බලන්න . |
සුදු ලැයිස්තුව | වස්තුව | පෙරනිමි අගය | අවසර ලත් ගුණාංග සහ ටැග් අඩංගු වස්තුව |
sanitizeFn | ශුන්ය | කාර්යය | null | මෙහිදී ඔබට ඔබේම සනීපාරක්ෂක කාර්යය සැපයිය හැකිය. සනීපාරක්ෂාව සිදු කිරීම සඳහා කැපවූ පුස්තකාලයක් භාවිතා කිරීමට ඔබ කැමති නම් මෙය ප්රයෝජනවත් විය හැක. |
popperConfig | ශුන්ය | වස්තුව | null | Bootstrap හි පෙරනිමි පොපර් වින්යාසය වෙනස් කිරීමට, Popper හි වින්යාසය බලන්න |
තනි පුද්ගල popovers සඳහා දත්ත ගුණාංග
ඉහත පැහැදිලි කර ඇති පරිදි, තනි පුද්ගල popovers සඳහා විකල්ප විකල්ප වශයෙන් දත්ත ගුණාංග භාවිතයෙන් නියම කළ හැක.
ක්රම
අසමමුහුර්ත ක්රම සහ සංක්රාන්ති
සියලුම API ක්රම අසමමුහුර්ත වන අතර සංක්රාන්තියක් ආරම්භ කරන්න . සංක්රාන්තිය ආරම්භ වූ වහාම නමුත් එය අවසන් වීමට පෙර ඔවුන් නැවත අමතන්නා වෙත පැමිණේ . ඊට අමතරව, සංක්රාන්ති සංරචකයක ක්රම ඇමතුමක් නොසලකා හරිනු ඇත .
$().popover(options)
මූලද්රව්ය එකතුවක් සඳහා popover ආරම්භ කරයි.
.popover('show')
මූලද්රව්යයක පොපෝවර් හෙළි කරයි. Popover ඇත්ත වශයෙන්ම පෙන්වීමට පෙර (එනම් shown.bs.popover
සිදුවීම සිදුවීමට පෙර) අමතන්නා වෙත ආපසු පැමිණේ. මෙය popover හි "අත්පොත" අවුලුවන ලෙස සැලකේ. මාතෘකාව සහ අන්තර්ගතය ශුන්ය දිග යන දෙකම ඇති Popovers කිසි විටෙක සංදර්ශණය නොවේ.
$('#element').popover('show')
.popover('hide')
මූලද්රව්යයක පොපෝවර් සඟවයි. Popover ඇත්ත වශයෙන්ම සැඟවීමට පෙර (එනම් hidden.bs.popover
සිදුවීම සිදුවීමට පෙර) අමතන්නා වෙත ආපසු පැමිණේ. මෙය popover හි "අත්පොත" අවුලුවන ලෙස සැලකේ.
$('#element').popover('hide')
.popover('toggle')
මූලද්රව්යයක popover ටොගල් කරයි. popover ඇත්ත වශයෙන්ම පෙන්වීමට හෝ සැඟවීමට පෙර (එනම් සිදුවීමට shown.bs.popover
හෝ hidden.bs.popover
සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ. මෙය popover හි "අත්පොත" අවුලුවන ලෙස සැලකේ.
$('#element').popover('toggle')
.popover('dispose')
මූලද්රව්යයක පොපෝවර් සඟවා විනාශ කරයි. නියෝජිතායතනය භාවිතා කරන Popovers ( විකල්පය භාවිතයෙන් සාදනු ලබනselector
) පැවත එන ප්රේරක මූලද්රව්ය මත තනි තනිව විනාශ කළ නොහැක.
$('#element').popover('dispose')
.popover('enable')
මූලද්රව්යයක popover පෙන්වීමට හැකියාව ලබා දෙයි. Popovers පෙරනිමියෙන් සබල කර ඇත.
$('#element').popover('enable')
.popover('disable')
මූලද්රව්යයක popover පෙන්වීමට ඇති හැකියාව ඉවත් කරයි. popover පෙන්විය හැක්කේ එය නැවත සබල කළහොත් පමණි.
$('#element').popover('disable')
.popover('toggleEnabled')
මූලද්රව්යයක popover පෙන්වීමට හෝ සැඟවීමට ඇති හැකියාව ටොගල් කරයි.
$('#element').popover('toggleEnabled')
.popover('update')
මූලද්රව්යයක popover තත්ත්වය යාවත්කාලීන කරයි.
$('#element').popover('update')
සිදුවීම්
සිදුවීම් වර්ගය | විස්තර |
---|---|
show.bs.popover | show නිදසුන් ක්රමය හැඳින්වූ විට මෙම සිදුවීම වහාම ක්රියාත්මක වේ. |
පෙන්වා ඇත.bs.popover | popover පරිශීලකයාට දෘශ්යමාන කළ විට මෙම සිදුවීම ක්රියාත්මක වේ (CSS සංක්රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත). |
hide.bs.popover | hide නිදසුන් ක්රමය කැඳවූ විට මෙම සිදුවීම වහාම ක්රියාත්මක වේ. |
සැඟවුණු.bs.popover | popover පරිශීලකයාගෙන් සඟවා අවසන් වූ විට මෙම සිදුවීම සිදු වේ (CSS සංක්රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත). |
ඇතුල් කරන ලදී.bs.popover | මෙම සිදුවීම show.bs.popover DOM වෙත popover අච්චුව එක් කළ විට සිදුවීමෙන් පසුව සිදු කෙරේ. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})