Source

Ama-Popovers

Amadokhumenti nezibonelo zokwengeza ama-popover e-Bootstrap, afana nalawo atholakala ku-iOS, kunoma iyiphi i-elementi kusayithi lakho.

Uhlolojikelele

Izinto okufanele uzazi uma usebenzisa i-plugin ye-popover:

  • Ama-Popovers athembele kulabhulali yenkampani yangaphandle i- Popper.js ukuze ibekwe. Kufanele ufake i -popper.min.js ngaphambi kwe-bootstrap.js noma usebenzise bootstrap.bundle.min.js/ bootstrap.bundle.jsequkethe i-Popper.js ukuze ama-popovers asebenze!
  • Ama-Popovers adinga i- plugin yethiphu yamathuluzi njengokuncika.
  • Uma wakha i-JavaScript yethu ngomthombo, idingautil.js .
  • Ama-Popovers angena ngenxa yezizathu zokusebenza, ngakho-ke kuzomele uwaqalise ngokwakho .
  • Ubude obuziro titlenamanani contentngeke kubonise i-popover.
  • Cacisa container: 'body'ukuze ugweme ukunikeza izinkinga ngezingxenye eziyinkimbinkimbi (njengamaqembu ethu okokufaka, amaqembu wezinkinobho, njll).
  • Ukucupha ama-popover ezintweni ezifihliwe ngeke kusebenze.
  • Ama-Popovers .disablednoma ama- disabledelementi kumele acushwe ku-elementi yokugoqa.
  • Uma icushwa kusukela kumahange agoqa emigqeni eminingi, ama-popover azobekwa phakathi phakathi kobubanzi bawo wonke amahange. Sebenzisa .text-nowrapkweyakho <a>ukugwema lokhu kuziphatha.
  • Ama-Popovers kumele afihlwe ngaphambi kokuthi kukhishwe izici ezihambisanayo ku-DOM.
  • Ama-Popovers angaqalwa ngenxa yento engaphakathi kwesithunzi se-DOM.

Umthelela wokugqwayiza wale ngxenye uncike prefers-reduced-motionembuzweni wemidiya. Bona ingxenye yokunyakaza encishisiwe yemibhalo yethu yokufinyeleleka .

Qhubeka ufunda ukuze ubone ukuthi ama-popover asebenza kanjani ngezinye izibonelo.

Isibonelo: Nika amandla ama-popovers yonke indawo

Enye indlela yokuqalisa wonke ama-popover ekhasini kungaba ukuwakhetha ngesibaluli sawo data-toggle:

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

Isibonelo: Ukusebenzisa containerinketho

Uma unezitayela ezithile kusici somzali eziphazamisa i-popover, uzofuna ukucacisa inkambiso containerukuze i-HTML ye-popover ivele ngaphakathi kwaleyo element esikhundleni.

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

Isibonelo

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

Izikhombisi-ndlela ezine

Kunezinketho ezine ezitholakalayo: kuqondaniswe phezulu, kwesokudla, phansi, nesobunxele.

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

Cashisa ngokuchofoza okulandelayo

Sebenzisa i- focustrigger ukuze ucashise ama-popovers ekuchofozeni okulandelayo komsebenzisi kwento ehlukile kunento yokuguqula.

Imakhaphu eqondile iyadingeka ukuze kuchithwe ngokuchofoza okulandelayo

Ukuze uthole ukuziphatha okufanele kwesiphequluli esiphambene nenkundla, kufanele usebenzise <a>umaka, hhayi umaka <button>, futhi kufanele ufake tabindexisibaluli.

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

Izakhi ezikhutshaziwe

Izinto disabledezinesibaluli azihlangani, okusho ukuthi abasebenzisi abakwazi ukuhambisa phezulu noma ukuzichofoza ukuze bacuphe i-popover (noma ithiphu yamathuluzi). Njengendlela yokusebenza, uzofuna ukuqalisa i-popover kusuka esonga <div>noma <span>bese ubhala pointer-eventsphezu kwento ekhubazekile.

Ezibangeli ze- popover ezikhutshaziwe, ungase futhi data-trigger="hover"uncamele ukuthi i-popover ibonakale njengempendulo esheshayo ebonakalayo kubasebenzisi bakho njengoba bangase bangalindeli ukuchofoza into ekhutshaziwe.

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

Ukusetshenziswa

Nika amandla ama-popovers nge-JavaScript:

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

Ukwenza ama-popover asebenzele abasebenzisi bekhibhodi nobuchwepheshe obusizayo

Ukuze uvumele abasebenzisi bekhibhodi ukuthi benze ama-popover akho asebenze, kufanele uwangeze kuphela ezintweni ze-HTML ngokuvamile ezigxile kukhibhodi futhi ezisebenzisanayo (njengezixhumanisi noma izilawuli zefomu). Nakuba izakhi ze-HTML ezingafanele (ezifana no- <span>s) zingenziwa zigxile ngokwengeza tabindex="0"isibaluli, lokhu kuzongeza izitobhi zethebhu ezingase zicasule futhi zidideke ezintweni ezingahlangani kubasebenzisi bekhibhodi, futhi ubuchwepheshe obusiza obuningi okwamanje abumemezeli okuqukethwe kwe-popover kulesi simo. . Ukwengeza, unganciki kuphela hovernjengesicuphi se-popover yakho, njengoba lokhu kuzobenza bangakwazi ukucupha abasebenzisi bekhibhodi.

Nakuba ungakwazi ukufaka i-HTML ecebile, ehlelekile kuma-popover htmlngenketho, sincoma ngokuqinile ukuthi ugweme ukungeza inani elidlulele lokuqukethwe. Indlela ama-popovers asebenza ngayo njengamanje ukuthi, uma sekubonisiwe, okuqukethwe kwawo kuhlanganiswe nesici sokuqala aria-describedbynesibaluli. Njengomphumela, konke okuqukethwe kwe-popover kuzomenyezelwa kubasebenzisi bobuchwepheshe obusizayo njengokusakaza okukodwa okude, okungaphazamiseki.

Ukwengeza, nakuba kungenzeka futhi ufake izilawuli ezisebenzisanayo (njengezinto zefomu noma izixhumanisi) ku-popover yakho (ngokwengeza lezi zakhi kuzibaluli whiteListnamathegi avunyelwe), qaphela ukuthi okwamanje i-popover ayilawuli ukuhleleka kokugxila kwekhibhodi. Uma umsebenzisi wekhibhodi evula i-popover, ukugxila kuhlala kusici esicuphayo, futhi njengoba i-popover ngokuvamile ingasilandeli ngokushesha isicuphi esakhiweni sedokhumenti, asikho isiqinisekiso sokuthi ukuya phambili/ukucindezela.TABizohambisa umsebenzisi wekhibhodi ku-popover ngokwayo. Ngamafuphi, ukumane ungeze izilawuli ezisebenzisanayo ku-popover kungenzeka kwenze lezi zilawuli zingafinyeleleki/zingasetshenziswa kubasebenzisi bekhibhodi nabasebenzisi bobuchwepheshe obusizayo, noma okungenani kwenzele ukuhleleka kokugxila okuphelele okungenangqondo. Kulezi zimo, cabanga ukusebenzisa ingxoxo ye-modal esikhundleni salokho.

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-animation="".

Qaphela ukuthi ngenxa yezizathu zokuphepha i- sanitize, sanitizeFnkanye whiteListnezinketho azikwazi ukunikezwa kusetshenziswa izibaluli zedatha.

Igama Uhlobo Okuzenzakalelayo Incazelo
izithombe boolean iqiniso Faka inguquko ye-CSS fade ku-popover
isitsha umucu | into | amanga amanga

Yengeza i-popover kusici esithile. Isibonelo: container: 'body'. Le nketho iwusizo kakhulu ngoba ikuvumela ukuthi ubeke i-popover ekuhambeni kwedokhumenti eduze kwesici esicuphayo - okuzovimbela i-popover ekuntanteni isuke kusici esicuphayo ngesikhathi sokushintsha usayizi wewindi.
okuqukethwe umucu | into | umsebenzi ''

Inani lokuqukethwe elizenzakalelayo uma data-contentisibaluli singekho.

Uma umsebenzi unikiwe, uzobizwa thisnereferensi yawo esethwe ku-elementi i-popover enamathiselwe kuyo.
ukubambezela inombolo | into 0

Ukubambezeleka ukubonisa nokufihla i-popover (ms) - akusebenzi ohlotsheni lwe-trigger okwenziwa ngesandla

Uma inombolo inikezwa, ukubambezeleka kusetshenziswa kukho kokubili ukufihla/umbukiso

Isakhiwo sento sithi:delay: { "show": 500, "hide": 100 }
html boolean amanga Faka i-HTML ku-popover. Uma kungamanga, indlela ye-jQuery textizosetshenziswa ukufaka okuqukethwe ku-DOM. Sebenzisa umbhalo uma ukhathazekile ngokuhlaselwa kwe-XSS.
ukubekwa umucu | umsebenzi 'kwesokudla'

Indlela yokubeka i-popover - auto | phezulu | phansi | kwesokunxele | kwesokudla.
Uma autokucacisiwe, izoqondisa kabusha i-popover ngamandla.

Uma umsebenzi usetshenziswa ukunquma ukubekwa, ubizwa nge-popover node ye-DOM njenge-agumenti yayo yokuqala kanye nenodi yesici esicuphayo esithi DOM njengesibili. Umongo thisusethelwe kusibonelo se-popover.
isikhethi umucu | amanga amanga Uma kunikezwa isikhethi, izinto ze-popover zizothunyelwa kokuhlosiwe okucacisiwe. Empeleni, lokhu kusetshenziselwa ukunika amandla okuqukethwe kwe-HTML okuguquguqukayo ukuze kwengezwe ama-popover. Bheka lokhu kanye nesibonelo esifundisayo .
isifanekiso umucu '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Isisekelo se-HTML ongasisebenzisa lapho udala i-popover.

Ama-popover titleazofakwa ku- .popover-header.

Ama-popover contentazofakwa ku- .popover-body.

.arrowizoba umcibisholo we-popover.

I-elementi yokugoqa engaphandle kufanele ibe .popovernekilasi.
isihloko umucu | into | umsebenzi ''

Inani lesihloko elizenzakalelayo uma titleisibaluli singekho.

Uma umsebenzi unikiwe, uzobizwa thisnereferensi yawo esethwe ku-elementi i-popover enamathiselwe kuyo.
inhlamvu umucu 'chofoza' I-popover iqalwa kanjani - chofoza | hamba | gxila | imanuwali. Ungadlula izibangeli eziningi; abahlukanise ngesikhala. manualayikwazi ukuhlanganiswa nanoma yisiphi esinye isiqhumiso.
offset inombolo | umucu 0 I-offset ye-popover ehlobene nokuhlosiwe kwayo. Ukuze uthole ulwazi olwengeziwe bheka ku-Popper.js's offset docs .
FallbackPlacement umucu | uhlu 'phenya' Vumela ukucacisa ukuthi iyiphi indawo ezosetshenziswa u-Popper ekubuyiseleni emuva. Ukuze uthole ulwazi olwengeziwe bheka amadokhumenti okuziphatha ka-Popper.js
umngcele umucu | isici 'scrollParent' Umkhawulo womkhawulo wokuchichima we-popover. Yamukela amanani we- 'viewport', 'window', 'scrollParent', noma ireferensi ye-HTMLElement (JavaScript kuphela). Ukuze uthole ulwazi olwengeziwe bheka ku-Popper.js's preventOverflow amadokhumenti .
hlanza boolean iqiniso Nika amandla noma vala ukukhucululwa kwendle. Uma yenziwe yasebenza 'template', 'content'futhi 'title'izinketho zizohlanzwa.
I-whiteList into Inani elizenzakalelayo Into equkethe izibaluli namathegi avunyelwe
sanitizeFn null | umsebenzi null Lapha ungakwazi ukunikeza umsebenzi wakho we-sanitize. Lokhu kungaba usizo uma ukhetha ukusebenzisa umtapo wolwazi ozinikele ukwenza ukukhucululwa kwendle.
popperConfig null | into null Ukuze uguqule ukucushwa kwe-Bootstrap okuzenzakalelayo kwe-Popper.js, bona ukucushwa kwe-Popper.js

Izibaluli zedatha ze-popover ngayinye

Izinketho ze-popover ngayinye zingacaciswa ngokusebenzisa izibaluli zedatha, njengoba kuchazwe ngenhla.

Izindlela

Izindlela ze-Asynchronous kanye noshintsho

Zonke izindlela ze-API azivumelanisi futhi ziqala inguquko . Babuyele kofonayo uma sekuqalwa uguquko kodwa lungakapheli . Ngokungeziwe, ikholi yendlela engxenyeni yoshintsho izozitshwa .

Bheka imibhalo yethu ye-JavaScript ukuze uthole ulwazi olwengeziwe .

$().popover(options)

Iqalisa ama-popover eqoqo le-elementi.

.popover('show')

Iveza i-popover yento. Ibuyela kofonayo ngaphambi kokuthi i-popover iboniswe (okungukuthi ngaphambi kokuba shown.bs.popoverumcimbi wenzeke). Lokhu kuthathwa njengokuqalwa "ngesandla" kwe-popover. Ama-Popovers isihloko nokuqukethwe kwawo kokubili okuwuziro-ubude akukaze kuboniswe.

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

.popover('hide')

Ifihla i-popover yento. Ibuyela kofonayo ngaphambi kokuthi i-popover ifihlekile (okungukuthi ngaphambi kokuba hidden.bs.popoverumcimbi wenzeke). Lokhu kuthathwa njengokuqalwa "ngesandla" kwe-popover.

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

.popover('toggle')

Iguqula i-popover yento. Ibuyela kofonayo ngaphambi kokuthi i-popover iboniswe noma ifihlwe (okungukuthi ngaphambi kokuthi kwenzeke shown.bs.popovernoma hidden.bs.popoverkwenzeke). Lokhu kuthathwa njengokuqalwa "ngesandla" kwe-popover.

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

.popover('dispose')

Ifihla futhi icekele phansi i-popover yento. Ama-Popovers asebenzisa ukuthunyelwa (okudalwe kusetshenziswa inkethoselector ) awakwazi ukucekelwa phansi ngamanye ezintweni ezibangela inzalo .

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

.popover('enable')

Inikeza i-popover yento ikhono lokuboniswa. Ama-Popovers anikwe amandla ngokuzenzakalela.

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

.popover('disable')

Isusa amandla okuthi i-popover ye-elementi iboniswe. I-popover izokwazi ukuboniswa kuphela uma inikwe amandla kabusha.

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

.popover('toggleEnabled')

Iguqula ikhono le-popover yento ukuthi iboniswe noma ifihlwe.

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

.popover('update')

Ibuyekeza indawo ye-popover yento.

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

Imicimbi

Uhlobo Lomcimbi Incazelo
show.bs.popover Lo mcimbi uvutha ngokushesha lapho showindlela yesibonelo ibizwa.
kubonisiwe.bs.popover Lo mcimbi uxoshwa lapho i-popover yenziwe yabonakala kumsebenzisi (izolinda ukuthi izinguquko ze-CSS ziqedele).
fihla.bs.popover Lo mcimbi uxoshwa ngokushesha lapho hideindlela yesibonelo ibizwa.
kufihliwe.bs.popover Lo mcimbi uyaxoshwa uma i-popover isiqedile ukufihlwa kumsebenzisi (izolinda ukuthi izinguquko ze-CSS ziqedele).
kufakiwe.bs.popover Lo mcimbi uxoshwa ngemva show.bs.popoverkomcimbi lapho isifanekiso se-popover sengeziwe ku-DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})