Popovers

ඔබගේ වෙබ් අඩවියේ ඇති ඕනෑම මූලද්‍රව්‍යයකට iOS හි ඇති ඒවා වැනි Bootstrap popovers එකතු කිරීම සඳහා ප්‍රලේඛනය සහ උදාහරණ.

දළ විශ්ලේෂණය

popover ප්ලගිනය භාවිතා කරන විට දැනගත යුතු දේවල්:

Popovers ස්ථානගත කිරීම සඳහා 3වන පාර්ශ්ව පුස්තකාලය Popper.js මත රඳා පවතී . ඔබ bootstrap.js වලට පෙර popper.min.js ඇතුළත් කළ යුතුය හෝ popover ක්‍රියා කිරීම සඳහා Popper.js අඩංගු bootstrap.bundle.min.js/ භාවිතා කළ යුතුය!bootstrap.bundle.js
Popovers මත යැපීම ලෙස මෙවලම් ඉඟි ප්ලගිනය අවශ්‍ය වේ.
ඔබ අපගේ ජාවාස්ක්‍රිප්ට් නිර්මාණය කරන්නේ මූලාශ්‍රයෙන් නම්, එයට අවශ්‍ය වේutil.js .
Popovers කාර්ය සාධන හේතූන් මත තෝරාගෙන ඇත, එබැවින් ඔබ විසින්ම ඒවා ආරම්භ කළ යුතුය .
ශුන්‍ය-දිග titleසහ contentඅගයන් කිසිවිටෙක උත්ප්‍රාප්තිය නොපෙන්වයි.
container: 'body'වඩාත් සංකීර්ණ සංරචකවල (අපගේ ආදාන කණ්ඩායම්, බොත්තම් කණ්ඩායම්, ආදිය) විදැහුම්කරණ ගැටළු වළක්වා ගැනීමට සඳහන් කරන්න .
සැඟවුණු මූලද්‍රව්‍ය මත popovers අවුලුවාලීම ක්‍රියා නොකරනු ඇත.
පොපෝවර් .disabledහෝ disabledමූලද්‍රව්‍ය දවටන මූලද්‍රව්‍යයක් මත ක්‍රියාරම්භ කළ යුතුය.
රේඛා කිහිපයක් හරහා ඔතා ඇති නැංගුරම් වලින් ක්‍රියාරම්භ කරන විට, popovers නැංගුරම් වල සමස්ත පළල අතර කේන්ද්‍රගත වේ. මෙම හැසිරීම වළක්වා ගැනීමට white-space: nowrap;ඔබේ s මත භාවිතා කරන්න .<a>
ඒවායේ අනුරූප මූලද්‍රව්‍ය DOM වෙතින් ඉවත් කිරීමට පෙර Popovers සැඟවිය යුතුය.

සමහර උදාහරණ සමඟ 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="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

ඊළඟ ක්ලික් කිරීම මත ඉවතලන්න

focusටොගල් මූලද්‍රව්‍යයට වඩා වෙනස් මූලද්‍රව්‍යයක පරිශීලකයාගේ මීළඟ ක්ලික් කිරීම මත popovers ඉවත දැමීමට ප්‍රේරකය භාවිතා කරන්න .

ඊළඟ-ක්ලික් කිරීම මත ඉවත් කිරීම සඳහා නිශ්චිත සලකුණු කිරීම අවශ්‍ය වේ

නිවැරදි හරස් බ්‍රවුසරය සහ හරස් වේදිකා හැසිරීම සඳහා, ඔබ ටැගය භාවිතා කළ යුතුය, ටැගය<a> භාවිතා කළ යුතු අතර , ඔබ ගුණාංගයක් ද ඇතුළත් කළ යුතුය .<button>tabindex

ඉවත දැමිය හැකි popover

<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)

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-animation="".

නම	ටයිප් කරන්න	පෙරනිමිය	විස්තර
සජීවිකරණය	බූලියන්	සැබෑ	Popover වෙත CSS ෆේඩ් සංක්‍රාන්තියක් යොදන්න
බහාලුම්	තන්තුව \| මූලද්රව්යය \| බොරු	බොරු	විශේෂිත මූලද්‍රව්‍යයකට popover එකතු කරයි. උදාහරණය `container: 'body'`:. මෙම විකල්පය විශේෂයෙන් ප්‍රයෝජනවත් වන්නේ එය ප්‍රේරක මූලද්‍රව්‍ය අසල ලේඛනයේ ප්‍රවාහයේ popover ස්ථානගත කිරීමට ඔබට ඉඩ සලසයි - එමඟින් කවුළුව ප්‍රමාණය වෙනස් කිරීමේදී ප්‍රේරක මූලද්‍රව්‍යයෙන් ඉවතට පාවීම වළක්වයි.
අන්තර්ගතය	තන්තුව \| මූලද්රව්යය \| කාර්යය	''	`data-content`ගුණාංගය නොමැති නම් පෙරනිමි අන්තර්ගත අගය . ශ්‍රිතයක් ලබා දෙන්නේ නම්, එය `this`popover අමුණා ඇති මූලද්‍රව්‍යයට එහි යොමු කට්ටලය සමඟ කැඳවනු ලැබේ.
ප්රමාදය	අංකය \| වස්තුව	0	popover (ms) පෙන්වීම සහ සැඟවීම ප්‍රමාද කිරීම - අතින් ප්‍රේරක වර්ගයට අදාළ නොවේ අංකයක් සපයා ඇත්නම්, සැඟවීම/පෙන්වීම යන දෙකටම ප්‍රමාදය යෙදේ වස්තු ව්යුහය යනු:`delay: { "show": 500, "hide": 100 }`
html	බූලියන්	බොරු	popover වෙත HTML ඇතුළු කරන්න. අසත්‍ය නම්, `text`DOM වෙත අන්තර්ගතය ඇතුළු කිරීමට jQuery හි ක්‍රමය භාවිතා කරනු ඇත. ඔබ XSS ප්‍රහාර ගැන කනස්සල්ලෙන් සිටින්නේ නම් පෙළ භාවිතා කරන්න.
ස්ථානගත කිරීම	තන්තුව \| කාර්යය	'හරි'	popover ස්ථානගත කරන්නේ කෙසේද - auto \| ඉහළ \| පහළ \| ඉතිරි \| හරි. නිශ්චිතව දක්වා ඇති විට `auto`, එය popover ගතිකව නැවත දිශානතියට පත් කරයි. ස්ථානගත කිරීම තීරණය කිරීම සඳහා ශ්‍රිතයක් භාවිතා කරන විට, එය එහි පළමු තර්කය ලෙස popover DOM නෝඩය සහ ප්‍රේරක මූලද්‍රව්‍ය DOM නෝඩය එහි දෙවැන්න ලෙස හැඳින්වේ. `this`සන්දර්භය popover අවස්ථාවට සකසා ඇත .
තේරීම්කරු	තන්තුව \| බොරු	බොරු	තේරීම්කාරකයක් සපයා තිබේ නම්, 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. පොපෝවර් `title`එන්නත් කරනු ලැබේ `.popover-header`. පොපෝවර් `content`එන්නත් කරනු ලැබේ `.popover-body`. `.arrow`popover ගේ ඊතලය බවට පත් වනු ඇත. පිටතම දවටන මූලද්රව්යයේ `.popover`පන්තිය තිබිය යුතුය.
ශීර්ෂය	තන්තුව \| මූලද්රව්යය \| කාර්යය	''	`title`ගුණාංගය නොමැති නම් පෙරනිමි මාතෘකා අගය . ශ්‍රිතයක් ලබා දෙන්නේ නම්, එය `this`popover අමුණා ඇති මූලද්‍රව්‍යයට එහි යොමු කට්ටලය සමඟ කැඳවනු ලැබේ.
අවුලුවාලීම	නූල්	'ක්ලික් කරන්න'	popover අවුලුවන ආකාරය - ක්ලික් කරන්න \| සැරිසරනවා \| අවධානය \| අත්පොත. ඔබට ප්‍රේරක කිහිපයක් සමත් විය හැක; අවකාශය සමඟ ඒවා වෙන් කරන්න. 'අත්පොත' වෙනත් ප්‍රේරකයක් සමඟ ඒකාබද්ධ කළ නොහැක.
ඕෆ්සෙට්	අංකය \| නූල්	0	එහි ඉලක්කයට සාපේක්ෂව පොපෝවර් හි හිලව් කිරීම. වැඩි විස්තර සඳහා Popper.js හි ඕෆ්සෙට් ලේඛන වෙත යොමු වන්න .
පහත වැටීම ස්ථානගත කිරීම	තන්තුව \| අරාව	'පෙරළන්න'	පසුබැසීමේදී Popper භාවිතා කරන්නේ කුමන ස්ථානයද යන්න සඳහන් කිරීමට ඉඩ දෙන්න. වැඩි විස්තර සඳහා Popper.js හි හැසිරීම් ලේඛන වෙත යොමු වන්න
මායිම	තන්තුව \| මූලද්රව්යය	'scrollParent'	පොපෝවර් හි පිටාර ගැලීමේ සීමාව. `'viewport'`, `'window'`, `'scrollParent'`, හෝ HTMLElement යොමු (JavaScript පමණි) අගයන් පිළිගනී. වැඩි විස්තර සඳහා Popper.js's preventOverflow docs වෙත යොමු වන්න .

තනි පුද්ගල popovers සඳහා දත්ත ගුණාංග

ඉහත පැහැදිලි කර ඇති පරිදි, තනි පුද්ගල popovers සඳහා විකල්ප විකල්ප වශයෙන් දත්ත ගුණාංග භාවිතයෙන් නියම කළ හැක.

ක්රම

අසමමුහුර්ත ක්රම සහ සංක්රාන්ති

සියලුම API ක්‍රම අසමමුහුර්ත වන අතර සංක්‍රාන්තියක් ආරම්භ කරන්න . සංක්‍රාන්තිය ආරම්භ වූ වහාම නමුත් එය අවසන් වීමට පෙර ඔවුන් නැවත අමතන්නා වෙත පැමිණේ . ඊට අමතරව, සංක්‍රාන්ති සංරචකයක ක්‍රම ඇමතුමක් නොසලකා හරිනු ඇත .

වැඩි විස්තර සඳහා අපගේ JavaScript ලේඛන බලන්න.

`$().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…
})