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 lesithathu lePopper ngokubekwa . Kufuneka ubandakanye i -popper.min.js phambi kwe-bootstrap.js okanye usebenzise bootstrap.bundle.min.js/ bootstrap.bundle.jsequlethe iPopper 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 lo kuziphatha.
• Iipopovers mazifihlwe phambi kokuba izinto ezihambelanayo zisuswe kwiDOM.
• Iipopovers zinokuvuswa enkosi kwinto engaphakathi kwesithunzi se-DOM.

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

Lahla ngokucofa okulandelayo

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

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

Kwiziphembeli zepopover 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)

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

Iinketho

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

Iindlela

$().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 (eziyilwe kusetyenziswa ukhetho selector) 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

$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})