in English

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 wahusika wengine Popper kwa nafasi. Lazima ujumuishe popper.min.js kabla ya bootstrap.js au utumie bootstrap.bundle.min.js/ bootstrap.bundle.jsambayo ina Popper ili popover kufanya 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.
Kwa chaguomsingi, kipengee hiki hutumia kisafishaji cha maudhui kilichojengewa ndani, ambacho huondoa vipengele vyovyote vya HTML ambavyo haviruhusiwi kwa uwazi. Tazama sehemu ya sanitizer katika hati zetu za JavaScript kwa maelezo zaidi.
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="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>

Ondoa kwa kubofya ijayo

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

Lebo maalum 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)
Kuongeza kasi ya GPU

Popovers wakati mwingine huonekana kuwa na ukungu kwenye vifaa vya Windows 10 kwa sababu ya kuongeza kasi ya GPU na DPI ya mfumo iliyorekebishwa. Njia ya kurekebisha hii katika v4 ni kuzima uongezaji kasi wa GPU kama inavyohitajika kwenye popovers zako.

Marekebisho yaliyopendekezwa:

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

Kufanya popover kufanya kazi kwa watumiaji wa kibodi na teknolojia saidizi

Ili kuruhusu watumiaji wa kibodi kuwezesha popover zako, unapaswa kuziongeza tu kwenye vipengele vya HTML ambavyo kwa kawaida vinaweza kuangazia kibodi na shirikishi (kama vile viungo au vidhibiti vya fomu). Ingawa vipengele vya HTML vya kiholela (kama vile <span>s) vinaweza kuzingatiwa kwa kuongeza tabindex="0"sifa, hii itaongeza vichupo vinavyoweza kuudhi na kutatanisha kwenye vipengele visivyoingiliana kwa watumiaji wa kibodi, na teknolojia nyingi za usaidizi kwa sasa hazitangazi maudhui ya popover katika hali hii. . Zaidi ya hayo, usitegemee pekee hoverkama kichochezi cha popover zako, kwa kuwa hii itawafanya wasiweze kuwasha watumiaji wa kibodi.

Ingawa unaweza kuingiza HTML tajiri, iliyopangwa katika popover na htmlchaguo, tunapendekeza sana uepuke kuongeza maudhui mengi kupita kiasi. Jinsi popover hufanya kazi kwa sasa ni kwamba, mara tu zinapoonyeshwa, maudhui yao yanaunganishwa na kipengele cha trigger na aria-describedbysifa. Kwa hivyo, maudhui yote ya popover yatatangazwa kwa watumiaji wa teknolojia ya usaidizi kama mtiririko mmoja mrefu usiokatizwa.

Zaidi ya hayo, ingawa inawezekana pia kujumuisha vidhibiti shirikishi (kama vile vipengee vya fomu au viungo) kwenye popover yako (kwa kuongeza vipengele hivi kwenye whiteListau sifa na lebo zinazoruhusiwa), fahamu kwamba kwa sasa popover haidhibiti mpangilio wa ulengaji wa kibodi. Mtumiaji wa kibodi anapofungua popover, umakini hubaki kwenye kipengee cha kuamsha, na kwa vile popover kwa kawaida hafuati kichochezi mara moja katika muundo wa hati, hakuna hakikisho kwamba kusonga mbele/kubonyeza.TABitahamisha mtumiaji wa kibodi kwenye popover yenyewe. Kwa kifupi, kuongeza tu vidhibiti shirikishi kwenye popover kuna uwezekano wa kufanya vidhibiti hivi visifikiwe/kutotumika kwa watumiaji wa kibodi na watumiaji wa teknolojia saidizi, au angalau kufanya mpangilio wa umakini wa jumla usio na mantiki. Katika hali hizi, zingatia kutumia mazungumzo ya modal badala yake.

Chaguo

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

Kumbuka kuwa kwa sababu za usalama sanitize, sanitizeFnna whiteListchaguzi haziwezi kutolewa kwa kutumia sifa za data.
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 maalum. 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 | ruka | 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 .
fallbackPlacement kamba | safu 'pindua' Ruhusu kubainisha ni nafasi gani Popper itatumia kwenye njia mbadala. Kwa habari zaidi rejelea hati za tabia za Popper
customClass kamba | kazi ''

Ongeza madarasa kwenye popover inapoonyeshwa. Kumbuka kuwa madarasa haya yataongezwa pamoja na madarasa yoyote yaliyobainishwa kwenye kiolezo. Ili kuongeza madarasa mengi, yatenganishe na nafasi: 'a b'.

Unaweza pia kupitisha chaguo za kukokotoa ambazo zinapaswa kurudisha mfuatano mmoja ulio na majina ya ziada ya darasa.
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 .
safisha boolean kweli Washa au lemaza usafishaji. Ikiwashwa 'template', 'content'na 'title'chaguzi zitasafishwa. Tazama sehemu ya sanitizer katika hati zetu za JavaScript .
Orodha nyeupe kitu Thamani chaguomsingi Kitu ambacho kina sifa na lebo zinazoruhusiwa
safishaFn null | kazi null Hapa unaweza kusambaza kazi yako ya kusafisha. Hii inaweza kuwa muhimu ikiwa unapendelea kutumia maktaba maalum kutekeleza usafi wa mazingira.
popperConfig null | kitu null Ili kubadilisha usanidi chaguo-msingi wa Bootstrap wa Popper, angalia usanidi wa Popper

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 ya popover kuonyeshwa (yaani kabla ya shown.bs.popovertukio kutokea). Hii inachukuliwa kuwa "mwongozo" wa kuchochea wa popover. Popovers ambao mada na maudhui yao ni ya urefu wa sufuri kamwe hayaonyeshwi.

$('#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...
})