Source

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.js . Popper.min.js morate vključiti pred bootstrap.js ali uporabiti bootstrap.bundle.min.js/ bootstrap.bundle.js, ki vsebuje Popper.js, 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 white-space: nowrap;na svojem <a>s, da se izognete temu vedenju.
  • Popoverja je treba skriti, preden so njihovi ustrezni elementi odstranjeni iz 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="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>

Opusti ob naslednjem kliku

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

Za opustitev ob naslednjem kliku je potrebna posebna oznaka

Za pravilno delovanje med brskalniki in platformami morate uporabiti <a>oznako, ne oznake <button>, vključiti pa morate tudi tabindexatribut.

Popover, ki ga je mogoče opustiti 
<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)

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

Ime Vrsta Privzeto Opis
animacija logično prav Uporabite prehod CSS zbledenja na pojavni element
posoda niz | element | lažno lažno

Popover doda določenemu elementu. Primer: container: 'body'. Ta možnost je še posebej uporabna, ker vam omogoča, da pojavni element postavite v tok dokumenta blizu sprožilnega elementa – kar bo preprečilo, da bi pojavni element med spreminjanjem velikosti okna lebdel stran od sprožilnega elementa.
vsebino niz | element | funkcijo ''

Privzeta vrednost vsebine, če data-contentatribut ni prisoten.

Če je podana funkcija, bo klicana s thissklicem, nastavljenim na element, na katerega je pritrjen popover.
zamuda številka | predmet 0

Zakasnitev prikaza in skrivanja pojavnega pojava (ms) - ne velja za tip ročnega proženja

Če je navedena številka, se zakasnitev uporabi za skrij/prikaži

Struktura objekta je:delay: { "show": 500, "hide": 100 }
html logično lažno V pojavno okno vstavite HTML. Če je nastavljeno na false, textbo za vstavljanje vsebine v DOM uporabljena metoda jQuery. Če vas skrbijo napadi XSS, uporabite besedilo.
umestitev niz | funkcijo 'prav'

Kako postaviti popover – samodejno | vrh | dno | levo | prav.
Ko autoje naveden, bo dinamično preusmeril pojavni element.

Ko se funkcija uporabi za določitev umestitve, se pokliče s pojavnim vozliščem DOM kot prvim argumentom in prožilnim elementom DOM vozliščem kot drugim. Kontekst thisje nastavljen na pojavni primerek.
selektor niz | lažno lažno Če je na voljo izbirnik, bodo pojavni objekti dodeljeni navedenim ciljem. V praksi se to uporablja za omogočanje dodajanja pojavnih oken dinamični vsebini HTML. Oglejte si to in informativen primer .
predlogo vrvica '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Osnovni HTML za uporabo pri ustvarjanju pojavnega okna.

Popoverji titlebodo vbrizgani v .popover-header.

Popoverji contentbodo vbrizgani v .popover-body.

.arrowbo postala popoverjeva puščica.

Zunanji ovojni element mora imeti .popoverrazred.
naslov niz | element | funkcijo ''

Privzeta vrednost naslova, če titleatribut ni prisoten.

Če je podana funkcija, bo klicana s thissklicem, nastavljenim na element, na katerega je pritrjen popover.
sprožilec vrvica 'klik' Kako se sproži popover - kliknite | lebdi | fokus | priročnik. Lahko prenesete več sprožilcev; ločite jih s presledkom. `manual` ni mogoče kombinirati z nobenim drugim sprožilcem.
odmik številka | vrvica 0 Odmik pojavnega elementa glede na cilj. Za več informacij si oglejte dokumente o odmiku Popper.js .
rezervna umestitev niz | niz 'flip' Dovolite, da določite, kateri položaj bo Popper uporabil pri nadomestni uporabi. Za več informacij glejte dokumente o obnašanju Popper.js
meja niz | element 'scrollParent' Meja omejitve prelivanja pojavnega elementa. Sprejema vrednosti 'viewport', 'window', 'scrollParent'ali sklic HTMLElement (samo JavaScript). Za več informacij glejte dokumentacijo PrevenOverflow za Popper.js .

Atributi podatkov za posamezne popoverje

Možnosti za posamezna pojavna okna se lahko določijo tudi z uporabo podatkovnih atributov, kot je razloženo zgoraj.

Metode

Asinhrone metode in prehodi

Vse metode API so asinhrone in začnejo prehod . K klicatelju se vrnejo takoj, ko se prehod začne, vendar preden se konča . Poleg tega bo prezrt klic metode prehodne komponente .

Za več informacij glejte našo dokumentacijo JavaScript.

$().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

Vrsta dogodka Opis
show.bs.popover Ta dogodek se sproži takoj, ko showse pokliče metoda primerka.
prikazano.bs.popover Ta dogodek se sproži, ko postane pojavni element viden uporabniku (počakal bo, da se zaključijo prehodi CSS).
hide.bs.popover Ta dogodek se sproži takoj, ko hideje bila poklicana metoda primerka.
hidden.bs.popover Ta dogodek se sproži, ko se pojavni pomik neha skriti pred uporabnikom (počakal bo, da se zaključijo prehodi CSS).
vstavljeno.bs.popover Ta dogodek se sproži po show.bs.popoverdogodku, ko je bila v DOM dodana popover predloga. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})