Source

Iipopovers

Amaxwebhu kunye nemizekelo yokongezwa kweBootstrap poppovers, njengaleyo ifumaneka kwi-iOS, kuyo nayiphi na into ekwisiza sakho.

Isishwankathelo

Izinto omawuzazi xa usebenzisa iplagi yepopover:

  • Abantu abadumileyo baxhomekeke kwithala leencwadi le-3rd Popper.js ngokubekwa . Kufuneka uquke i -popper.min.js phambi kwe-bootstrap.js okanye usebenzise bootstrap.bundle.min.js/ bootstrap.bundle.jsequlethe i-Popper.js ukuze i-popovers isebenze!
  • IiPopovers zifuna iplagi yesixhobo njengesixhobo sokuxhomekeka.
  • Ukuba wakha iJavaScript yethu kwimvelaphi, kufunautil.js .
  • IiPopovers zingenile ngenxa yezizathu zokusebenza, ke kufuneka uziqalise ngokwakho .
  • Ubude obuziro titlekunye contentnamaxabiso asoze abonise ipopover.
  • Cacisa container: 'body'ukunqanda unikezelo lweengxaki kumacandelo antsokothileyo (njengamaqela ethu egalelo, amaqela amaqhosha, njl.njl).
  • Ukuxhokonxa iipopovers kwizinto ezifihlakeleyo aziyi kusebenza.
  • Iipopovers ze .disabledokanye ielementi kufuneka zivuswe kwinto esongelwayo disabled.
  • Xa isenziwa ukusuka kwii-ankile ezisonga kwimigca emininzi, iipopovers ziya kugxininiswa phakathi kobubanzi beankile ngokubanzi. Sebenzisa .text-nowrapkwi yakho <a>ukunqanda le ukuziphatha.
  • Iipopovers mazifihlwe phambi kokuba izinto ezihambelanayo zisuswe kwiDOM.
  • Iipopovers zinokuvuswa enkosi kwinto engaphakathi kwesithunzi se-DOM.

Isiphumo soopopayi seli candelo sixhomekeke prefers-reduced-motionkumbuzo wemidiya. Jonga icandelo leentshukumo ezincitshisiweyo kuxwebhu lwethu lofikelelo .

Qhubeka ufunda ukuze ubone indlela iipopovers ezisebenza ngayo neminye imizekelo.

Umzekelo: Vumela iipopovers kuyo yonke indawo

Enye indlela yokuqalisa zonke iipopovers kwiphepha inokuba kukukhetha ngophawu lwazo data-toggle:

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

Umzekelo: Ukusebenzisa containerukhetho

Xa unezinye izimbo kwinto yomzali ephazamisana ne-popover, uya kufuna ukukhankanya isiko containerukuze i-HTML ye-popover ivele ngaphakathi kweso siqalelo endaweni yoko.

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

Umzekelo

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

Iindlela ezine

Zine iinketho ezikhoyo: phezulu, ekunene, ezantsi, nasekhohlo zilungelelanisiwe.

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

Lahla ngokucofa okulandelayo

Sebenzisa i- focustrigger ukugxotha iipopovers kunqakrazo olulandelayo lomsebenzisi lwento eyahlukileyo kunento yokuguqula.

Uphawulo oluthile luyafuneka ukuze ugxothe-ngokucofa-okulandelayo

Kwibrowser echanekileyo kunye nokuziphatha kweqonga, kufuneka usebenzise <a>ithegi, hayi ithegi , <button>kwaye kufuneka uquke tabindexuphawu loyelelwano.

Ipover egxothiweyo 
<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'
})

Izinto ezikhubazekileyo

Izinto disabledezinophawu azisebenzi, oku kuthetha ukuba abasebenzisi abanako ukushukuma okanye ukucofa ukuze baqalise ipopover (okanye inqaku lesixhobo). Njengomsebenzi wokusebenza, uya kufuna ukwenza i-popover kwi-wrapper <div>okanye <span>kwaye ubhale ngaphezulu pointer-eventskwinto ekhubazekileyo.

Kwiziphembeleli ze-popover ezikhubazekileyo, unokukhetha kwakhona data-trigger="hover"ukuze i-popover ibonakale njengengxelo ebonwayo kwangoko kubasebenzisi bakho njengoko bengenakulindela ukucofa into ekhubazekileyo.

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

Ukusetyenziswa

Vumela iipopovers ngeJavaScript:

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

Ukwenza iipopovers zisebenzele ikhibhodi kunye nabasebenzisi betekhnoloji abancedisayo

Ukuvumela abasebenzisi bebhodi yezitshixo ukuba bavule iipopovers zakho, kufuneka ubongeze kuphela kwizinto ze-HTML eziqhelekileyo ezijolise kwikhibhodi kwaye ziyasebenzisana (ezifana namakhonkco okanye ulawulo lwefom). Nangona izinto ze-HTML ezingenamkhethe (ezinje <span>s) zinokwenziwa ziqwalaselwe ngokongeza tabindex="0"uphawu, oku kuyakongeza ukumisa okunokucaphukisa kunye nokubhidanisa ithebhu kwizinto ezingasebenzisaniyo kubasebenzisi bebhodi yezitshixo, kwaye uninzi lweetekhnoloji ezincedisayo okwangoku azibhengezi umxholo we popover kule meko. . Ukongeza, ungathembeli kuphela hovernjengesixhobo se-popovers zakho, njengoko oku kuya kubenza bangakwazi ukuqalisa abasebenzisi bebhodi yezitshixo.

Ngelixa unokufaka i-HTML etyebileyo, ecwangcisiweyo kwiipopovers kunye htmlnokhetho, sicebisa ngamandla ukuba ukunqande ukongeza umthamo ogqithisileyo womxholo. Indlela i-popovers esebenza ngayo ngoku yeyokuba, xa sele ibonisiwe, umxholo wabo ubotshelelwe kwinto yokuqalisa kunye aria-describedbynophawu. Ngenxa yoko, yonke imixholo ye-popover iya kubhengezwa kubasebenzisi betekhnoloji abancedisayo njengomjelo omde, ongaphazanyiswa.

Ukongeza, ngelixa kunokwenzeka ukubandakanya ulawulo olusebenzisanayo (olufana nezinto zefom okanye amakhonkco) kwi-popover yakho (ngokongeza ezi zinto kwiimpawu whiteListokanye kwiithegi ezivunyelweyo), qaphela ukuba okwangoku i-popover ayilawuli i-keyboard ekugxilwe kuyo. Xa umsebenzisi webhodi yezitshixo evula i-popover, ingqwalasela ihlala kwi-triggering element, kwaye njengoko i-popover idla ngokungalandeli ngokukhawuleza i-trigger kwisakhiwo soxwebhu, akukho siqinisekiso sokuba ukuya phambili / ukucinezela.TABizakuhambisa umsebenzisi webhodi yezitshixo kwi popover ngokwayo. Ngokufutshane, ukongeza ngokulula izilawuli ezisebenzisanayo kwi-popover kunokwenza olu lawulo lufikeleleke/ lungasebenziseki kubasebenzisi bebhodi yezitshixo kunye nabasebenzisi betekhnoloji encedisayo, okanye ubuncinci yenzela ulungelelwaniso lokugxila ngokubanzi olungekho ngqiqweni. Kwezi meko, cinga ukusebenzisa incoko yababini yemodal endaweni yoko.

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-animation="".

Qaphela ukuba ngenxa yezizathu zokhuseleko sanitize, sanitizeFnkwaye whiteListiinketho azikwazi kunikezelwa kusetyenziswa iimpawu zedata.

Igama Uhlobo Ukuhlala kukho Inkcazo
oopopayi boolean yinyani Faka inguqu ye-CSS fade kwi-popover
isikhongozeli umtya | into | bubuxoki bubuxoki

Ifakela ipopover kwinto ethile. Umzekelo: container: 'body'. Olu khetho luluncedo kakhulu kuba lukuvumela ukuba ubeke ipopover ekuhambeni koxwebhu kufutshane nesiqalo - esizakunqanda i popover ekudadandeni kude nesiqalo ngexesha lefestile.
umxholo umtya | into | umsebenzi ''

Ixabiso lomxholo data-contentelihlala likhona ukuba uphawu loyelelwano alukho.

Ukuba umsebenzi unikiwe, uya kubizwa ngokuba thisnereferensi iseti kwinto edityaniswe nepopover.
ukulibazisa inombolo | into 0

Ukulibazisa ukubonisa kunye nokufihla i-popover (ms) - ayisebenzi kuhlobo lwe-trigger ye-manual

Ukuba inani linikiwe, ukulibaziseka kufakwa kuzo zombini ezifihla/umboniso

Ulwakhiwo lwento yile:delay: { "show": 500, "hide": 100 }
html boolean bubuxoki Faka i-HTML kwi-popover. Ukuba ayiyonyani, textindlela yejQuery izakusetyenziswa ukufaka umxholo kwiDOM. Sebenzisa umbhalo ukuba unexhala malunga nohlaselo lwe-XSS.
ukubekwa umtya | umsebenzi 'kunene'

Indlela yokubeka ipopover - auto | phezulu | emazantsi | ekhohlo | kunene.
Xa autoikhankanyiwe, izakuphinda ihlengahlengise i popover.

Xa umsebenzi usetyenziswa ukumisela indawo, ibizwa ngokuba yi-popover node ye-DOM njengengxoxo yayo yokuqala kunye nesiqalo se-DOM node njengesibini sayo. Umxholo thisumiselwe kumzekelo we popover.
umkhethi umtya | bubuxoki bubuxoki Ukuba umkhethi unikiwe, izinto ze popover ziya kunikezelwa kwiithagethi ezichaziweyo. Ngokwesiqhelo, oku kusetyenziselwa ukwenza umxholo weHTML oguquguqukayo ube neepopovers zongezwe. Bona oku kunye nomzekelo ofundisayo .
ithempleyithi umtya '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Isiseko se-HTML esinokusetyenziswa xa usenza ipopover.

I-popover's titleiya kugalelwa kwi- .popover-header.

I-popover's contentiya kugalelwa kwi- .popover-body.

.arrowiya kuba lutolo lwe popover.

Isiqalelo sokusonga sangaphandle kufuneka sibe .popoverneklasi.
isihloko umtya | into | umsebenzi ''

Ixabiso lesihloko esihlala sihleli ukuba titleuphawu loyelelwano alukho.

Ukuba umsebenzi unikiwe, uya kubizwa ngokuba thisnereferensi iseti kwinto edityaniswe nepopover.
ukuxhokonxa umtya 'cofa' Ivuswa njani ipopover - cofa | jonga | gxila | incwadi yesandla. Unokudlula izichukumisi ezininzi; bahlule ngesithuba. manualayinakudityaniswa naso nasiphi na esinye isiqhushumbisi.
i-offset inombolo | umtya 0 I-Offset ye-popover malunga nokujoliswe kuyo. Ngolwazi oluthe kratya jonga kwi-Popper.js's offset docs .
i-fallbackPlacement umtya | uluhlu 'jika' Vumela ukuxela ukuba yeyiphi indawo iPopper eza kusebenzisa xa ubuya umva. Ngolwazi oluthe vetshe bhekisa kuPopper.js's behaviour docs
umda umtya | isiqalelo 'skrolaMzali' Ukuphuphuma komda womda wepopover. Yamkela amaxabiso e- 'viewport', 'window', 'scrollParent', okanye i-HTMLElement ireferensi (iJavaScript kuphela). Ngolwazi oluthe vetshe bhekisa kuPopper.js's preventOverflow docs .
coceka boolean yinyani Yenza okanye uvale ucoceko. Ukuba ivuliwe 'template', 'content'kwaye 'title'iinketho ziyakuhlanjululwa.
Uluhlu olumhlophe into Ixabiso elimiselweyo Into equlathe iimpawu ezivumelekileyo kunye neethegi
sanizeFn null | umsebenzi null Apha ungabonelela ngomsebenzi wakho wokucoca. Oku kunokuba luncedo ukuba ukhetha ukusebenzisa ithala leencwadi elizinikeleyo ukwenza ucoceko.
popperConfig null | into null Ukutshintsha uqwalaselo olungagqibekanga lweBootstrap lwePopper.js, bona uqwalaselo lwePopper.js

Iimpawu zedatha yepopovers nganye

Ukhetho lwepopovers nganye lunokuchazwa ngokusetyenziswa kweempawu zedatha, njengoko kucacisiwe ngasentla.

Iindlela

Iindlela ze-Asynchronous kunye notshintsho

Zonke iindlela ze-API zi -asynchronous kwaye ziqala utshintsho . Babuyela kumnxeba ngokukhawuleza nje ukuba utshintsho luqalisiwe kodwa ngaphambi kokuba luphele . Ukongeza, ukufowunelwa kwendlela kwicandelo lenguquko kuya kuhoywa .

Jonga uxwebhu lwethu lweJavaScript ngolwazi olungakumbi .

$().popover(options)

Uqalisa iipopovers zengqokelela yezinto.

.popover('show')

Ityhila ukuvela kwento ethile. Ibuyisela kumnxeba phambi kokuba i-popover iboniswe (okt phambi kokuba shown.bs.popoverisiganeko senzeke). Oku kuthathwa njenge "manual" yokuqalisa i-popover. Iipopovers ezinesihloko kunye nomxholo wazo zombini ubude obungu-zero azizange ziboniswe.

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

.popover('hide')

Ifihla imvelaphi yento. Ibuyisela kumnxeba phambi kokuba i-popover ifihliwe (okt phambi kokuba hidden.bs.popoverisiganeko senzeke). Oku kuthathwa njenge "manual" yokuqalisa i-popover.

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

.popover('toggle')

Itshintsha ipopover yesiqalelo. Ibuyisela kumnxeba phambi kokuba i-popover iboniswe okanye ifihliwe (okt phambi kokuba isiganeko shown.bs.popoverokanye hidden.bs.popoverisiganeko senzeke). Oku kuthathwa njenge "manual" yokuqalisa i-popover.

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

.popover('dispose')

Ifihla kwaye itshabalalise i-element's popover. Iipopovers ezisebenzisa unikezelo (okuyilwe kusetyenziswa ukhethoselector ) azinakutshatyalaliswa zizodwa kwinzala yezinto ezibangelayo .

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

.popover('enable')

Inika i- element's popover isakhono sokuboniswa. Iipopovers zenziwe ngokuzenzekelayo.

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

.popover('disable')

Isusa isakhono se popover yesiqalelo esizakuboniswa. I-popover iya kuboniswa kuphela ukuba ivuliwe kwakhona.

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

.popover('toggleEnabled')

Iguqulela isakhono se-popover yesiqalelo esiboniswa okanye sifihlwe.

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

.popover('update')

Ihlaziya indawo ye popover yento.

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

Iziganeko

Uhlobo loMnyhadala Inkcazo
bonisa.bs.popover Esi siganeko sivutha ngokukhawuleza xa showkubizwa indlela yomzekelo.
ibonisiwe.bs.popover Esi siganeko sigxothwa xa i-popover yenziwe yabonakala kumsebenzisi (iya kulinda iinguqu zeCSS ukuba zigqibe).
fihla.bs.popover Esi siganeko sigxothwa ngokukhawuleza xa hideindlela yomzekelo ibiziwe.
efihliweyo.bs.popover Esi siganeko sigxothwa xa i-popover igqibile ukufihlwa kumsebenzisi (iya kulinda iinguqu zeCSS ukuba zigqibe).
ifakiwe.bs.popover Esi siganeko sigxothwa emva show.bs.popoverkwesiganeko xa i-template ye-popover yongezwa kwi-DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})