Popoverji

Dokumentacija in primeri za dodajanje pojavnih oken Bootstrap, kot so tisti v iOS-u, kateremu koli elementu na vašem spletnem mestu.

Pregled

Stvari, ki jih morate vedeti pri uporabi vtičnika Popover:

• Popovers se za pozicioniranje zanašajo na knjižnico tretjih oseb Popper . Morate vključiti popper.min.js pred bootstrap.js ali uporabiti bootstrap.bundle.min.js/ bootstrap.bundle.js, ki vsebuje Popper, da bodo popoveri delovali!
• Popovers zahtevajo vtičnik orodnih namigov kot odvisnost.
• Če gradite naš JavaScript iz izvorne kode, zahtevautil.js .
• Popovers so opt-in zaradi učinkovitosti, zato jih morate inicializirati sami .
• Ničelna dolžina titlein contentvrednosti ne bodo nikoli prikazale pojavnega pojava.
• Določite container: 'body', da se izognete težavam z upodabljanjem v kompleksnejših komponentah (kot so naše vnosne skupine, skupine gumbov itd.).
• Sprožitev popoverjev na skritih elementih ne bo delovala.
• Popover za .disabledali disabledelemente je treba sprožiti na ovojnem elementu.
• Ko se sprožijo iz sider, ki se prepletajo čez več črt, bodo popoverji centrirani med celotno širino sider. Uporabite .text-nowrapna svojem <a>s, da se izognete temu vedenju.
• Popoverja je treba skriti, preden so njihovi ustrezni elementi odstranjeni iz DOM.
• Popoverje je mogoče sprožiti zahvaljujoč elementu znotraj senčnega DOM.

Nadaljujte z branjem in si oglejte, kako delujejo popoverji z nekaj primeri.

Primer: Povsod omogočite pojavna okna

Eden od načinov inicializacije vseh pojavnih oken na strani bi bil, da jih izberete po njihovem data-toggleatributu:

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

Primer: Uporaba containermožnosti

Ko imate na nadrejenem elementu nekaj slogov, ki motijo ​​pojavni element, boste želeli določiti po meri container, tako da se bo HTML pojavnega elementa namesto tega pojavil znotraj tega elementa.

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

Primer

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

Štiri smeri

Na voljo so štiri možnosti: zgoraj, desno, spodaj in levo poravnano.

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

Opusti ob naslednjem kliku

Uporabite focussprožilec, da opustite pojavna okna ob naslednjem kliku uporabnika drugega elementa kot preklopni element.

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

Onemogočeni elementi

Elementi z disabledatributom niso interaktivni, kar pomeni, da jih uporabniki ne morejo premakniti ali klikniti, da bi sprožili pojavni prikaz (ali opis orodja). Kot rešitev boste želeli sprožiti popover iz ovoja <div>ali <span>preglasiti pointer-eventsonemogočen element.

Pri onemogočenih sprožilcih pojavnega pojavnega elementa boste morda želeli tudi data-trigger="hover", da se pojavni pojav prikaže kot takojšnja vizualna povratna informacija vašim uporabnikom, saj morda ne pričakujejo, da bodo kliknili onemogočen element.

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

Uporaba

Omogoči pojavna okna prek JavaScripta:

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

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

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-, kot v data-animation="".

Metode

$().popover(options)

Inicializira pojavna okna za zbirko elementov.

.popover('show')

Razkrije popover elementa. Vrne se k klicatelju, preden je pojavno okno dejansko prikazano (tj. preden shown.bs.popoverpride do dogodka). To velja za »ročno« sprožitev popoverja. Popoverji, katerih naslov in vsebina sta ničelne dolžine, niso nikoli prikazani.

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

.popover('hide')

Skrije pojavni element elementa. Vrne se k klicatelju, preden je bil popover dejansko skrit (tj. preden hidden.bs.popoverpride do dogodka). To velja za »ročno« sprožitev popoverja.

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

.popover('toggle')

Preklopi pojavni element elementa. Vrne se klicatelju, preden je pojavni element dejansko prikazan ali skrit (tj. preden pride do dogodka shown.bs.popoverali ). hidden.bs.popoverTo velja za »ročno« sprožitev popoverja.

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

.popover('dispose')

Skrije in uniči popover elementa. Popoverjev, ki uporabljajo delegiranje (ki so ustvarjeni z možnostjo selector) , ni mogoče posamično uničiti na podrejenih prožilnih elementih.

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

.popover('enable')

Omogoča prikaz pojavnega elementa. Popoverji so privzeto omogočeni.

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

.popover('disable')

Odstrani možnost prikaza pojavnega elementa. Popover bo lahko prikazan samo, če je ponovno omogočen.

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

.popover('toggleEnabled')

Preklopi možnost, da je pojavni element elementa prikazan ali skrit.

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

.popover('update')

Posodobi položaj pojavnega elementa.

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

Dogodki

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