Popovers
Dokumentacija i primjeri za dodavanje Bootstrap skočnih prozora, poput onih u iOS-u, na bilo koji element na vašoj web-lokaciji.
Pregled
Stvari koje trebate znati kada koristite dodatak za popover:
- Popovers se oslanjaju na Popper biblioteku treće strane za pozicioniranje. Morate uključiti popper.min.js prije bootstrap.js ili koristiti
bootstrap.bundle.min.js
/bootstrap.bundle.js
koji sadrži Popper da bi popovers radili! - Popovers zahtijevaju dodatak za opis alata kao ovisnost.
- Ako gradite naš JavaScript iz izvora, on zahtijeva
util.js
. - Popovers su uključeni iz razloga performansi, tako da ih morate sami inicijalizirati .
- Nulta dužina
title
icontent
vrijednosti nikada neće prikazati iskakanje. - Navedite
container: 'body'
kako biste izbjegli probleme s prikazivanjem u složenijim komponentama (kao što su naše grupe za unos, grupe dugmadi, itd.). - Pokretanje iskačućih prikaza na skrivenim elementima neće raditi.
- Skočni prozori za
.disabled
ilidisabled
elemente moraju se pokrenuti na elementu omotača. - Kada se aktiviraju iz sidra koja se premotaju preko više linija, skočni prozori će biti centrirani između ukupne širine sidra. Koristite
.text-nowrap
na vašem<a>
s da biste izbjegli ovo ponašanje. - Popovers moraju biti skriveni prije nego što se njihovi odgovarajući elementi uklone iz DOM-a.
- Popovers se mogu pokrenuti zahvaljujući elementu unutar DOM-a u sjeni.
prefers-reduced-motion
medijskom upitu. Pogledajte odjeljak o
smanjenom pokretu u našoj dokumentaciji o pristupačnosti .
Nastavite čitati kako biste vidjeli kako iskočnici rade s nekim primjerima.
Primjer: Omogućite iskačuće prikaze svuda
Jedan od načina da se inicijaliziraju svi skočni prozori 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 roditeljskom elementu koji ometaju iskačući prikaz, htjet ćete navesti prilagođeni container
tako da se HTML iskačućeg elementa umjesto toga 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 pravca
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>
Odbacite sljedećim klikom
Upotrijebite focus
okidač da odbacite iskačuće prikaze pri sljedećem kliku korisnika na element koji se razlikuje od elementa za prebacivanje.
Posebne oznake potrebne za odbacivanje pri sljedećem kliku
Za pravilno ponašanje među pretraživačima i platformama, 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 preći pokazivačem miša ili kliknuti na njih da bi pokrenuli skočni prozor (ili opis alata). Kao zaobilazno rešenje, želećete da pokrenete iskačući prozor iz omotača <div>
ili <span>
i nadjačate pointer-events
on disabled element.
Za onemogućene okidače iskačućeg prikaza, možda ćete više voljeti data-trigger="hover"
da se iskačući prikaz prikaže kao neposredna vizualna povratna informacija vašim korisnicima jer možda ne očekuju 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>
Upotreba
Omogućite popovers putem JavaScripta:
$('#example').popover(options)
GPU ubrzanje
Popovers ponekad izgledaju mutno na Windows 10 uređajima zbog GPU ubrzanja i modificiranog DPI sistema. Zaobilazno rješenje za ovo u v4 je da onemogućite GPU ubrzanje po potrebi na vašim iskačućim prozorima.
Predloženi popravak:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
Omogućavanje rada iskakanja za korisnike tastature i pomoćne tehnologije
Da biste omogućili korisnicima tastature da aktiviraju vaše skočne prozore, trebali biste ih dodati samo u HTML elemente koji su tradicionalno fokusirani na tipkovnicu i interaktivni (kao što su veze ili kontrole obrasca). Iako se proizvoljni HTML elementi (kao što je <span>
s) mogu fokusirati dodavanjem tabindex="0"
atributa, ovo će dodati potencijalno dosadne i zbunjujuće tab stope na neinteraktivnim elementima za korisnike tastature, 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
okidač za vaše iskačuće poruke, jer će to onemogućiti njihovo pokretanje za korisnike tipkovnice.
Iako možete umetnuti bogat, strukturiran HTML u skočne prozore pomoću html
opcije, toplo preporučujemo da izbjegavate dodavanje prevelike količine sadržaja. Način na koji iskačući oglasi trenutno funkcionišu je da, kada se jednom prikažu, njihov sadržaj je vezan za element okidača sa aria-describedby
atributom. Kao rezultat toga, cjelokupni sadržaj popovera bit će najavljen korisnicima pomoćne tehnologije kao jedan dugi, neprekinuti stream.
Osim toga, iako je moguće uključiti interaktivne kontrole (kao što su elementi obrasca ili veze) u vaš skočni prozor (dodavanjem ovih elemenata u whiteList
ili dozvoljene atribute i oznake), imajte na umu da trenutno skočni prozor ne upravlja redoslijedom fokusa na tastaturi. Kada korisnik tastature otvori skočni prozor, fokus ostaje na elementu okidača, a kako iskakanje obično ne slijedi odmah iza okidača u strukturi dokumenta, ne postoji garancija da će se pomicanje naprijed/pritisakTABće premjestiti korisnika tastature u sam skočni prozor. Ukratko, jednostavno dodavanje interaktivnih kontrola u skočni prozor će vjerovatno učiniti ove kontrole nedostižnim/neupotrebljivim za korisnike tastature i pomoćne tehnologije, ili će u najmanju ruku stvoriti nelogičan opći redoslijed fokusa. U ovim slučajevima, razmislite o korištenju modalnog dijaloga.
Opcije
Opcije se mogu proslijediti putem atributa podataka ili JavaScripta. Za atribute podataka, dodajte naziv opcije u data-
, kao u data-animation=""
.
sanitize
i
ne mogu dostaviti korištenjem atributa podataka.
sanitizeFn
whiteList
Ime | Tip | Default | Opis |
---|---|---|---|
animacija | boolean | tačno | Primijenite CSS fade prijelaz na skočni prozor |
kontejner | string | element | false | false | Dodaje skočni prozor određenom elementu. Primjer: |
sadržaj | string | element | funkcija | '' | Zadana vrijednost sadržaja ako Ako je data funkcija, ona će biti pozvana sa svojom |
kašnjenje | broj | objekt | 0 | Kašnjenje prikazivanja i sakrivanja iskakanja (ms) - ne odnosi se na tip ručnog okidača Ako je naveden broj, kašnjenje se primjenjuje i na sakrivanje/prikaži Struktura objekta je: |
html | boolean | false | Umetnite HTML u skočni prozor. Ako je netačno, jQuery text metoda će se koristiti za umetanje sadržaja u DOM. Koristite tekst ako ste zabrinuti zbog XSS napada. |
plasman | string | funkcija | 'tačno' | Kako postaviti popover - auto | vrh | dno | lijevo | u pravu. Kada se funkcija koristi za određivanje položaja, ona se poziva sa DOM čvorom koji se pojavljuje kao prvim argumentom i pokretačkim elementom DOM čvorom kao drugim. Kontekst |
selektor | string | false | false | Ako je osiguran selektor, iskačući objekti će biti delegirani navedenim ciljevima. U praksi, ovo se koristi za omogućavanje dodavanja iskačućih sadržaja dinamičkom HTML sadržaju. Pogledajte ovo i informativni primjer . |
šablon | string | '<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 prilikom kreiranja skočnog prozora. Popover's Popover's
Najudaljeniji element omotača trebao bi imati |
naslov | string | element | funkcija | '' | Zadana vrijednost naslova ako Ako je data funkcija, ona će biti pozvana sa svojom |
okidač | string | 'klik' | Kako se popover pokreće - kliknite | lebdjeti | fokus | priručnik. Možete proslijediti više okidača; odvojite ih razmakom. manual ne može se kombinovati ni sa jednim drugim okidačem. |
offset | broj | string | 0 | Pomak skočnog prikaza u odnosu na cilj. Za više informacija pogledajte Popperove ofset dokumente . |
backbackPlacement | string | niz | 'okrenuti' | Dozvolite da odredite koju će poziciju Popper koristiti na rezervnom. Za više informacija pogledajte Popperove dokumente o ponašanju |
customClass | string | funkcija | '' | Dodajte klase u skočni prozor kada se prikaže. Imajte na umu da će ove klase biti dodane kao dodatak svim klasama navedenim u predlošku. Da dodate više klasa, razdvojite ih razmacima: Također možete proslijediti funkciju koja bi trebala vratiti jedan string koji sadrži dodatna imena klasa. |
granica | string | element | 'scrollParent' | Granica ograničenja preljeva skočnog prozora. Prihvata vrijednosti 'viewport' , 'window' , 'scrollParent' , ili reference HTMLElementa (samo JavaScript). Za više informacija pogledajte Popperove preventOverflow dokumente . |
sanirati | boolean | tačno | Omogućite ili onemogućite dezinfekciju. Ako je aktivirano 'template' , 'content' i 'title' opcije će biti sanirane. Pogledajte odjeljak za dezinfekciju u našoj JavaScript dokumentaciji . |
whiteList | objekt | Zadana vrijednost | Objekt koji sadrži dozvoljene atribute i oznake |
sanitizeFn | null | funkcija | null | Ovdje možete ponuditi vlastitu funkciju dezinfekcije. Ovo može biti korisno ako više volite koristiti namjensku biblioteku za dezinfekciju. |
popperConfig | null | objekt | null | Da biste promijenili Bootstrap-ovu zadanu Popper konfiguraciju, pogledajte Popperovu konfiguraciju |
Atributi podataka za pojedinačne iskačuće
Opcije za pojedinačne iskačuće opcije mogu se alternativno specificirati korištenjem atributa podataka, kao što je objašnjeno gore.
Metode
Asinhrone metode i prijelazi
Sve API metode su asinhrone i pokreću tranziciju . Oni se vraćaju pozivaocu čim prijelaz započne, ali prije nego što se završi . Osim toga, poziv metode na prelaznu komponentu će biti zanemaren .
Pogledajte našu JavaScript dokumentaciju za više informacija .
$().popover(options)
Inicijalizira skočne prozore za kolekciju elemenata.
.popover('show')
Otkriva iskakanje elementa. Vraća se pozivaocu prije nego što je iskačući dio stvarno prikazan (tj. prije nego što se shown.bs.popover
događaj dogodi). Ovo se smatra "ručnim" pokretanjem iskačućeg prozora. Skočni prozori čiji su naslov i sadržaj nulte dužine nikada se ne prikazuju.
$('#element').popover('show')
.popover('hide')
Sakriva skočni prozor elementa. Vraća se pozivaocu prije nego što je iskačući dio stvarno skriven (tj. prije nego što se hidden.bs.popover
događaj dogodi). Ovo se smatra "ručnim" pokretanjem iskačućeg prozora.
$('#element').popover('hide')
.popover('toggle')
Prebacuje iskačući prozor elementa. Vraća se pozivaocu prije nego što je iskačući dio zapravo prikazan ili skriven (tj. prije nego se dogodi događaj shown.bs.popover
ili ). hidden.bs.popover
Ovo se smatra "ručnim" pokretanjem iskačućeg prozora.
$('#element').popover('toggle')
.popover('dispose')
Sakriva i uništava iskačući prikaz elementa. Skočni prozori koji koriste delegiranje (koji se kreiraju pomoću opcije selector
) ne mogu se pojedinačno uništiti na elementima okidača potomaka.
$('#element').popover('dispose')
.popover('enable')
Daje mogućnost prikaza skočnog prikaza elementa. Popovers su podrazumevano omogućeni.
$('#element').popover('enable')
.popover('disable')
Uklanja mogućnost da se iskačući prozor elementa prikaže. Popover će se moći prikazati samo ako je ponovo omogućen.
$('#element').popover('disable')
.popover('toggleEnabled')
Prebacuje mogućnost da se skočni prozor elementa prikaže ili sakrije.
$('#element').popover('toggleEnabled')
.popover('update')
Ažurira poziciju iskačućeg elementa.
$('#element').popover('update')
Događaji
Vrsta događaja | Opis |
---|---|
show.bs.popover | Ovaj događaj se aktivira odmah kada show se pozove metoda instance. |
prikazano.bs.popover | Ovaj događaj se pokreće kada skočni prozor postane vidljiv korisniku (sačekaće da se CSS tranzicije dovrše). |
hide.bs.popover | Ovaj događaj se pokreće odmah kada se hide pozove metoda instance. |
hidden.bs.popover | Ovaj događaj se pokreće kada skočni prozor završi sa sakrivanjem od korisnika (će sačekati da se CSS tranzicije dovrše). |
inserted.bs.popover | Ovaj događaj se pokreće nakon show.bs.popover događaja kada je predložak iskakanja dodan u DOM. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})