Popovers
Dokumentacija i primjeri za dodavanje Bootstrap skočnih prozora, poput onih koji se nalaze u iOS-u, bilo kojem elementu na vašoj web-lokaciji.
Pregled
Stvari koje treba znati kada koristite popover dodatak:
- Popovers se oslanjaju na biblioteku treće strane Popper za pozicioniranje. Morate uključiti popper.min.js prije bootstrap.js ili koristiti
bootstrap.bundle.min.js
/bootstrap.bundle.js
koji sadrži Popper kako bi popoveri radili! - Popovi zahtijevaju plugin tooltip kao ovisnost.
- Ako gradite naš JavaScript iz izvora, to zahtijeva
util.js
. - Popoveri su opt-in zbog performansi, pa ih morate sami pokrenuti .
- Nulta duljina
title
icontent
vrijednosti nikada neće prikazati skočni prikaz. - Navedite
container: 'body'
kako biste izbjegli probleme s generiranjem u složenijim komponentama (poput naših ulaznih grupa, grupa gumba itd.). - Pokretanje skočnih prozora na skrivenim elementima neće raditi.
- Skočni prozori za elemente
.disabled
ilidisabled
moraju se pokrenuti na elementu omotača. - Kada se pokreću iz sidrišta koja se prelamaju preko više linija, skočni prozori bit će centrirani između ukupne širine sidrišta. Koristite
.text-nowrap
na svom<a>
s kako biste izbjegli ovakvo ponašanje. - Skočni prozori moraju biti skriveni prije nego što se njihovi odgovarajući elementi uklone iz DOM-a.
- Popoveri se mogu pokrenuti zahvaljujući elementu unutar DOM-a u sjeni.
prefers-reduced-motion
medijskom upitu. Pogledajte odjeljak
smanjenog kretanja u našoj dokumentaciji o pristupačnosti .
Nastavite čitati da vidite kako skočni prozori funkcioniraju s nekim primjerima.
Primjer: Omogućite skočne prozore posvuda
Jedan od načina da inicijalizirate sve skočne prozore na stranici bio bi da ih odaberete prema njihovom data-toggle
atributu:
$(function () {
$('[data-toggle="popover"]').popover()
})
Primjer: Korištenje container
opcije
Kada imate neke stilove na nadređenom elementu koji ometaju skočni prozor, trebali biste navesti prilagođeni container
tako da se HTML skočnog prozora pojavljuje unutar tog elementa.
$(function () {
$('.example-popover').popover({
container: 'body'
})
})
Primjer
<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>
Četiri smjera
Dostupne su četiri opcije: gore, desno, dolje i lijevo poravnato.
<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>
Odbaci pri sljedećem kliku
Upotrijebite focus
okidač za odbacivanje skočnih prozora pri sljedećem korisnikovom kliku na element različit od preklopnog elementa.
Za odbacivanje pri sljedećem kliku potrebna je posebna oznaka
Za ispravno ponašanje između preglednika i platformi, morate koristiti <a>
oznaku, a ne oznaku <button>
, a također morate uključiti tabindex
atribut.
<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'
})
Onemogućeni elementi
Elementi s disabled
atributom nisu interaktivni, što znači da korisnici ne mogu lebdjeti pokazivačem ili kliknuti na njih da bi pokrenuli skočni prozor (ili opis). Kao zaobilazno rješenje, htjet ćete pokrenuti skočni prozor iz omotača <div>
ili <span>
nadjačati pointer-events
element na onemogućenom elementu.
Za onemogućene okidače skočnog prozora možda biste radije željeli data-trigger="hover"
da se skočni prozor pojavi kao neposredna vizualna povratna informacija vašim korisnicima jer možda neće očekivati da će kliknuti na onemogućeni 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>
Korištenje
Omogući skočne prozore putem JavaScripta:
$('#example').popover(options)
GPU ubrzanje
Skočni prozori ponekad izgledaju mutno na uređajima sa sustavom Windows 10 zbog ubrzanja GPU-a i modificiranog DPI-ja sustava. Zaobilazno rješenje za ovo u v4 je onemogućiti GPU ubrzanje prema potrebi na vašim skočnim prozorima.
Predloženi popravak:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
Učinite da skočni prozori rade za korisnike tipkovnice i pomoćne tehnologije
Da biste omogućili korisnicima tipkovnice da aktiviraju vaše skočne prozore, trebali biste ih dodati samo u HTML elemente koji su tradicionalno fokusirani na tipkovnici i koji su interaktivni (kao što su veze ili kontrole obrazaca). Iako proizvoljni HTML elementi (kao što <span>
je s) mogu biti fokusirani dodavanjem tabindex="0"
atributa, to će dodati potencijalno neugodna i zbunjujuća zaustavljanja kartice na neinteraktivnim elementima za korisnike tipkovnice, a većina pomoćnih tehnologija trenutno ne najavljuje sadržaj skočnog prozora u ovoj situaciji . Osim toga, nemojte se oslanjati samo na hover
njega kao na okidač za svoje skočne prozore, jer će to onemogućiti njihovo pokretanje za korisnike tipkovnice.
Iako možete umetnuti bogati, strukturirani HTML u skočne prozore s ovom html
opcijom, toplo preporučujemo da izbjegavate dodavanje pretjerane količine sadržaja. Način na koji skočni prozori trenutno funkcioniraju jest da se njihov sadržaj, nakon što se prikažu, povezuje s elementom okidača s aria-describedby
atributom. Kao rezultat toga, cjelokupni sadržaj Popovera bit će najavljen korisnicima pomoćne tehnologije kao jedan dugi, neprekinuti tok.
Osim toga, iako je moguće također uključiti interaktivne kontrole (kao što su elementi obrasca ili veze) u vaš skočni prozor (dodavanjem ovih elemenata u whiteList
ili dopuštene atribute i oznake), imajte na umu da trenutno skočni prozor ne upravlja redoslijedom fokusa tipkovnice. Kada korisnik tipkovnice otvori skočni prozor, fokus ostaje na elementu okidača, a kako skočni prozor obično ne slijedi odmah okidač u strukturi dokumenta, nema jamstva da će pomicanje naprijed/pritisakTABpremjestit će korisnika tipkovnice u sam skočni prozor. Ukratko, jednostavno dodavanje interaktivnih kontrola skočnom prozoru vjerojatno će te kontrole učiniti nedostupnima/neupotrebljivima za korisnike tipkovnice i korisnike pomoćnih tehnologija ili će u najmanju ruku stvoriti nelogičan ukupni redoslijed fokusa. U tim slučajevima razmislite o korištenju modalnog dijaloškog okvira.
Mogućnosti
Opcije se mogu proslijediti putem atributa podataka ili JavaScripta. Za atribute podataka dodajte naziv opcije u data-
, kao u data-animation=""
.
sanitize
,
sanitizeFn
i
whiteList
ne mogu isporučiti pomoću atributa podataka.
Ime | Tip | Zadano | Opis |
---|---|---|---|
animacija | Booleov | pravi | Primijenite CSS fade prijelaz na skočni prozor |
spremnik | niz | element | lažno | lažno | Dodaje skočni prozor određenom elementu. Primjer: |
sadržaj | niz | element | funkcija | '' | Zadana vrijednost sadržaja ako Ako je dana funkcija, bit će pozvana s |
odgoditi | broj | objekt | 0 | Odgoda prikazivanja i skrivanja skočnog prozora (ms) - ne odnosi se na vrstu ručnog okidača Ako je naveden broj, odgoda se primjenjuje na skrivanje/prikazivanje Struktura objekta je: |
html | Booleov | lažno | Umetnite HTML u skočni prozor. Ako je false, jQueryjeva text metoda koristit će se za umetanje sadržaja u DOM. Upotrijebite tekst ako ste zabrinuti zbog XSS napada. |
plasman | niz | funkcija | 'pravo' | Kako postaviti popover - automatski | vrh | dno | lijevo | pravo. Kada se funkcija koristi za određivanje položaja, poziva se s skočnim DOM čvorom kao prvim argumentom i DOM čvorom pokretačkog elementa kao drugim. Kontekst |
selektor | niz | lažno | lažno | Ako je selektor osiguran, skočni objekti bit će delegirani navedenim ciljevima. U praksi se ovo koristi za omogućavanje dodavanja skočnih prozora za dinamički HTML sadržaj. Pogledajte ovo i informativan primjer . |
šablona | niz | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Osnovni HTML za korištenje pri stvaranju skočnog prozora. Popover Popover
Najudaljeniji element omotača trebao bi imati |
titula | niz | element | funkcija | '' | Zadana vrijednost naslova ako Ako je dana funkcija, bit će pozvana s |
okidač | niz | 'klik' | Kako se pokreće popover - kliknite | lebdjeti | fokus | priručnik. Možete proći više okidača; odvojite ih razmakom. manual ne može se kombinirati ni s jednim drugim okidačem. |
pomaknuti | broj | niz | 0 | Pomak popover-a u odnosu na cilj. Za više informacija pogledajte Popperovu offset dokumentaciju . |
zamjenaPlacement | niz | niz | 'okrenuti' | Omogućuje određivanje pozicije koju će Popper koristiti pri povratku. Za više informacija pogledajte Popperovu dokumentaciju o ponašanju |
customClass | niz | funkcija | '' | Dodajte klase skočnom prozoru kada se prikaže. Imajte na umu da će ove klase biti dodane uz sve klase navedene u predlošku. Za dodavanje više klasa, odvojite ih razmacima: Također možete proslijediti funkciju koja bi trebala vratiti jedan niz koji sadrži dodatna imena klasa. |
granica | niz | element | 'scrollParent' | Granica ograničenja prelijevanja skočnog prozora. Prihvaća vrijednosti 'viewport' , 'window' , 'scrollParent' ili HTMLElement reference (samo JavaScript). Za više informacija pogledajte Popper's preventOverflow dokumente . |
sanirati | Booleov | pravi | Omogućite ili onemogućite dezinfekciju. Ako je aktivirano 'template' , 'content' i 'title' opcije će biti očišćene. Pogledajte odjeljak sanitizera u našoj JavaScript dokumentaciji . |
bijeliList | objekt | Zadana vrijednost | Objekt koji sadrži dopuštene atribute i oznake |
dezinficiratiFn | nula | funkcija | ništavan | Ovdje možete ponuditi vlastitu funkciju dezinfekcije. Ovo može biti korisno ako radije koristite namjensku knjižnicu za izvođenje dezinfekcije. |
popperConfig | nula | objekt | ništavan | Za promjenu Bootstrapove zadane Popper konfiguracije, pogledajte Popperovu konfiguraciju |
Atributi podataka za pojedinačne skočne prozore
Opcije za pojedinačne skočne prozore mogu se alternativno specificirati upotrebom atributa podataka, kao što je gore objašnjeno.
Metode
Asinkrone metode i prijelazi
Sve API metode su asinkrone i pokreću prijelaz . Vraćaju se pozivatelju čim prijelaz započne, ali prije nego što završi . Osim toga, poziv metode na prijelaznoj komponenti bit će zanemaren .
Pogledajte našu JavaScript dokumentaciju za više informacija .
$().popover(options)
Inicijalizira skočne prozore za zbirku elemenata.
.popover('show')
Otkriva popover elementa. Vraća se pozivatelju prije nego što se popover stvarno prikaže (tj. prije nego što se shown.bs.popover
događaj dogodi). Ovo se smatra "ručnim" pokretanjem popover-a. Skočni prozori čiji su naslov i sadržaj nulte duljine nikad se ne prikazuju.
$('#element').popover('show')
.popover('hide')
Skriva skočni prozor elementa. Vraća se pozivatelju prije nego što je popover zapravo skriven (tj. prije nego što se hidden.bs.popover
događaj dogodi). Ovo se smatra "ručnim" pokretanjem popover-a.
$('#element').popover('hide')
.popover('toggle')
Isključuje skočni prozor elementa. Vraća se pozivatelju prije nego što se popover stvarno prikaže ili sakrije (tj. prije nego što se dogodi događaj shown.bs.popover
ili ). hidden.bs.popover
Ovo se smatra "ručnim" pokretanjem popover-a.
$('#element').popover('toggle')
.popover('dispose')
Skriva i uništava popover elementa. Popoveri koji koriste delegiranje (koji se stvaraju pomoću opcije selector
) ne mogu se pojedinačno uništiti na okidačkim elementima potomcima.
$('#element').popover('dispose')
.popover('enable')
Daje mogućnost prikazivanja skočnog prozora elementa. Skočni prozori omogućeni su prema zadanim postavkama.
$('#element').popover('enable')
.popover('disable')
Uklanja mogućnost prikazivanja skočnog prozora elementa. Popover će se moći prikazati samo ako je ponovno omogućen.
$('#element').popover('disable')
.popover('toggleEnabled')
Isključuje mogućnost prikazivanja ili sakrivanja skočnog prozora elementa.
$('#element').popover('toggleEnabled')
.popover('update')
Ažurira položaj skočnog prozora elementa.
$('#element').popover('update')
Događaji
Vrsta događaja | Opis |
---|---|
pokazati.bs.popover | Ovaj događaj aktivira se odmah kada show se pozove metoda instance. |
prikazano.bs.popover | Ovaj se događaj pokreće kada je popover vidljiv korisniku (pričekat će se da se CSS prijelazi završe). |
sakriti.bs.popover | Ovaj se događaj aktivira odmah nakon hide pozivanja metode instance. |
skriven.bs.popover | Ovaj se događaj pokreće kada popover više nije skriven od korisnika (pričekat će se da se dovrše CSS prijelazi). |
umetnuto.bs.popover | Ovaj se događaj pokreće nakon show.bs.popover događaja kada je skočni predložak dodan u DOM. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})