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 white-space: nowrap;kwi yakho <a>ukunqanda le ukuziphatha.
  • Iipopovers mazifihlwe phambi kokuba izinto ezihambelanayo zisuswe kwiDOM.

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)

Iinketho

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

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. Ungadlula ezininzi izichukumisi; bahlule ngesithuba. `incwadana` ayinakudityaniswa 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 .

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 onguziro-ubude 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…
})