Source

Popovers

Nyaraka na mifano ya kuongeza popover za Bootstrap, kama zile zinazopatikana katika iOS, kwa kipengele chochote kwenye tovuti yako.

Muhtasari

Mambo ya kujua unapotumia programu-jalizi ya popover:

  • Popovers wanategemea maktaba ya watu wengine Popper.js kwa nafasi. Ni lazima ujumuishe popper.min.js kabla ya bootstrap.js au utumie bootstrap.bundle.min.js/ bootstrap.bundle.jsambayo ina Popper.js ili popover zifanye kazi!
  • Popover zinahitaji programu- jalizi ya kidokezo kama tegemezi.
  • Ikiwa unaunda JavaScript yetu kutoka kwa chanzo, inahitajiutil.js .
  • Popover wamejijumuisha kwa sababu za utendakazi, kwa hivyo ni lazima uanzishe wewe mwenyewe .
  • Urefu wa sifuri titlena contentmaadili hayatawahi kuonyesha popover.
  • Bainisha container: 'body'ili kuepuka kutoa matatizo katika vipengele changamano zaidi (kama vile vikundi vyetu vya ingizo, vikundi vya vitufe, n.k).
  • Kuanzisha popover kwenye vipengee vilivyofichwa haitafanya kazi.
  • Popovers kwa .disabledau disabledvipengele lazima kuanzishwa kwenye kipengele wrapper.
  • Inapoanzishwa kutoka kwa nanga zinazozunguka mistari mingi, popover zitawekwa katikati kati ya upana wa jumla wa nanga. Tumia .text-nowrapkwenye yako <a>ili kuepuka tabia hii.
  • Watu masikini lazima wafichwe kabla vipengele vyao vinavyolingana viondolewe kwenye DOM.
  • Popovers inaweza kuanzishwa shukrani kwa kipengele ndani ya kivuli DOM.

Athari ya uhuishaji ya kipengele hiki inategemea prefers-reduced-motionhoja ya midia. Tazama sehemu ya mwendo iliyopunguzwa ya hati zetu za ufikivu .

Endelea kusoma ili kuona jinsi popover hufanya kazi na baadhi ya mifano.

Mfano: Washa popover kila mahali

Njia moja ya kuanzisha popover zote kwenye ukurasa itakuwa kuzichagua kulingana na data-togglesifa zao:

$(function () {
  $('[data-toggle="popover"]').popover()
})

Mfano: Kutumia containerchaguo

Unapokuwa na mitindo fulani kwenye kipengee kikuu ambacho huingilia popover, utataka kubainisha desturi containerili HTML ya popover ionekane ndani ya kipengele hicho badala yake.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Mfano

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

Maelekezo manne

Chaguzi nne zinapatikana: juu, kulia, chini, na kushoto iliyokaa.

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

Ondoa kwa kubofya ijayo

Tumia focuskichochezi ili kuondoa popover kwenye mbofyo unaofuata wa mtumiaji wa kipengele tofauti na kipengele cha kugeuza.

Lebo mahususi inahitajika kwa ajili ya kuondoa-on-ifuatayo

Kwa tabia sahihi ya kivinjari na jukwaa-tofauti, lazima utumie <a>lebo, sio lebo <button>, na lazima pia ujumuishe tabindexsifa.

popover inayoondolewa 
<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'
})

Vipengele vilivyozimwa

Vipengele vilivyo na disabledsifa havitumiki, kumaanisha kuwa watumiaji hawawezi kuelea au kuvibofya ili kuanzisha popover (au kidokezo). Kama suluhisho, utataka kuibua popover kutoka kwa kanga <div>au <span>na ubatilishe pointer-eventskwenye kipengee kilichozimwa.

Kwa vichochezi vya popover vilivyozimwa, unaweza pia kupendelea data-trigger="hover"ili popover ionekane kama maoni ya papo hapo kwa watumiaji wako kwani hawatarajii kubofya kipengele kilichozimwa.

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

Matumizi

Washa popover kupitia JavaScript:

$('#example').popover(options)

Chaguo

Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-, kama katika data-animation="".

Jina Aina Chaguomsingi Maelezo
uhuishaji boolean kweli Tumia mpito wa kufifisha wa CSS kwenye popover
chombo kamba | kipengele | uongo uongo

Huongeza popover kwa kipengele maalum. Mfano container: 'body':. Chaguo hili ni muhimu sana kwa kuwa hukuruhusu kuweka popover katika mtiririko wa hati karibu na kipengee cha kuchochea - ambayo itazuia popover kuelea kutoka kwa kipengele cha kuchochea wakati wa kubadilisha ukubwa wa dirisha.
maudhui kamba | kipengele | kazi ''

Thamani chaguo-msingi ya maudhui ikiwa data-contentsifa haipo.

Ikiwa kipengele cha kukokotoa kitatolewa, kitaitwa na thismarejeleo yake yamewekwa kwa kipengele ambacho popover imeambatishwa.
kuchelewa nambari | kitu 0

Kuchelewesha kuonyesha na kuficha popover (ms) - haitumiki kwa aina ya kichochezi cha mwongozo

Nambari ikitolewa, ucheleweshaji unatumika kwa Ficha/onyesho zote mbili

Muundo wa kitu ni:delay: { "show": 500, "hide": 100 }
html boolean uongo Ingiza HTML kwenye popover. Ikiwa sivyo, textmbinu ya jQuery itatumika kuingiza maudhui kwenye DOM. Tumia maandishi ikiwa una wasiwasi kuhusu mashambulizi ya XSS.
uwekaji kamba | kazi 'haki'

Jinsi ya kuweka popover - otomatiki | juu | chini | kushoto | haki.
Wakati autoimebainishwa, itaelekeza upya popover kwa nguvu.

Chaguo za kukokotoa zinapotumiwa kubainisha uwekaji, huitwa na nodi ya popover DOM kama hoja yake ya kwanza na kipengele cha kuanzisha nodi ya DOM kama ya pili. thisMuktadha umewekwa kwa mfano wa popover .
kiteuzi kamba | uongo uongo Iwapo kiteuzi kitatolewa, vipengee vya popover vitakabidhiwa kwa malengo yaliyobainishwa. Kwa vitendo, hii inatumika kuwezesha maudhui ya HTML yanayobadilika ili kuongezwa popover. Tazama hii na mfano wa kuelimisha .
kiolezo kamba '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

HTML msingi ya kutumia wakati wa kuunda popover.

popover's titleitakuwa hudungwa katika .popover-header.

popover's contentitakuwa hudungwa katika .popover-body.

.arrowitakuwa mshale wa popover.

Kipengele cha kanga cha nje kinapaswa kuwa na .popoverdarasa.
kichwa kamba | kipengele | kazi ''

Thamani chaguo-msingi ya kichwa ikiwa titlesifa haipo.

Ikiwa kipengele cha kukokotoa kitatolewa, kitaitwa na thismarejeleo yake yamewekwa kwa kipengele ambacho popover imeambatishwa.
kichochezi kamba 'bonyeza' Jinsi popover inavyoanzishwa - bofya | tembea | kuzingatia | mwongozo. Unaweza kupitisha vichochezi vingi; kuwatenganisha na nafasi. manualhaiwezi kuunganishwa na kichochezi kingine chochote.
kukabiliana nambari | kamba 0 Kukabiliana na popover kuhusiana na lengo lake. Kwa maelezo zaidi rejelea hati za kukabiliana na Popper.js .
fallbackPlacement kamba | safu 'pindua' Ruhusu kubainisha ni nafasi gani Popper itatumia kwenye njia mbadala. Kwa habari zaidi rejelea hati za tabia za Popper.js
mpaka kamba | kipengele 'scrollParent' Kizuizi cha kufurika kikomo cha popover. Hukubali thamani za 'viewport', 'window', 'scrollParent', au rejeleo la Kipengele cha HTML (JavaScript pekee). Kwa maelezo zaidi rejelea hati za preventOverflow za Popper.js .

Sifa za data kwa popovers binafsi

Chaguo za popover binafsi zinaweza kubainishwa kwa kutumia sifa za data, kama ilivyoelezwa hapo juu.

Mbinu

Njia za Asynchronous na mabadiliko

Njia zote za API ni za asynchronous na zinaanzisha mpito . Wanarudi kwa mpigaji mara tu mpito unapoanza lakini kabla haujaisha . Kwa kuongeza, simu ya mbinu kwenye sehemu ya mpito itapuuzwa .

Tazama hati zetu za JavaScript kwa maelezo zaidi .

$().popover(options)

Huanzisha popover kwa mkusanyiko wa vipengele.

.popover('show')

Hufichua popover ya kipengele. Hurejesha kwa mpigaji simu kabla popover haijaonyeshwa (yaani kabla ya shown.bs.popovertukio kutokea). Hii inachukuliwa kuwa "mwongozo" wa kuchochea wa popover. Popovers ambao mada na maudhui yao ni sifuri kamwe hawaonyeshwi.

$('#element').popover('show')

.popover('hide')

Huficha popover ya kipengele. Hurejesha kwa mpigaji simu kabla popover haijafichwa (yaani kabla ya hidden.bs.popovertukio kutokea). Hii inachukuliwa kuwa "mwongozo" wa kuchochea wa popover.

$('#element').popover('hide')

.popover('toggle')

Hugeuza popover ya kipengele. Hurejesha kwa mpigaji simu kabla popover haijaonyeshwa au kufichwa (yaani kabla ya tukio shown.bs.popoverau hidden.bs.popovertukio). Hii inachukuliwa kuwa "mwongozo" wa kuchochea wa popover.

$('#element').popover('toggle')

.popover('dispose')

Huficha na kuharibu popover ya kipengele. Popovers zinazotumia utumaji kaumu (ambazo zinaundwa kwa kutumia chaguo )selector haziwezi kuharibiwa kibinafsi kwenye vipengele vya vichochezi vya kizazi.

$('#element').popover('dispose')

.popover('enable')

Huipa popover ya kipengele uwezo wa kuonyeshwa. Popover huwezeshwa kwa chaguo-msingi.

$('#element').popover('enable')

.popover('disable')

Huondoa uwezo wa popover ya kipengele kuonyeshwa. Popover itaweza tu kuonyeshwa ikiwa imewashwa tena.

$('#element').popover('disable')

.popover('toggleEnabled')

Hugeuza uwezo wa popover ya kipengele kuonyeshwa au kufichwa.

$('#element').popover('toggleEnabled')

.popover('update')

Inasasisha nafasi ya popover ya kipengele.

$('#element').popover('update')

Matukio

Aina ya Tukio Maelezo
onyesha.bs.umasikini Tukio hili huwaka mara moja wakati shownjia ya mfano inaitwa.
imeonyeshwa.bs.umasikini Tukio hili linafutwa wakati popover imefanywa kuonekana kwa mtumiaji (itasubiri mabadiliko ya CSS kukamilika).
ficha.bs.umasikini Tukio hili linafutwa mara moja wakati hidenjia ya mfano imeitwa.
siri.bs. popover Tukio hili linafutwa wakati popover imekamilika kufichwa kutoka kwa mtumiaji (itasubiri mabadiliko ya CSS kukamilika).
imeingizwa.bs.popover Tukio hili limefutwa baada ya show.bs.popovertukio wakati kiolezo cha popover kimeongezwa kwenye DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})