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.

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.

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

Izinketho

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

Izindlela

$().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 kokubili isihloko nokuqukethwe kwawo kunguziro-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')

Hides and destroys an element’s popover. Popovers that use delegation (which are created using the selector option) cannot be individually destroyed on descendant trigger elements.

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

.popover('enable')

Gives an element’s popover the ability to be shown. Popovers are enabled by default.

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

.popover('disable')

Removes the ability for an element’s popover to be shown. The popover will only be able to be shown if it is re-enabled.

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

.popover('toggleEnabled')

Toggles the ability for an element’s popover to be shown or hidden.

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

.popover('update')

Updates the position of an element’s popover.

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

Events

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