in English

Popovers

Dokumentácia a príklady pridávania kontextových okien Bootstrap, ako sú tie, ktoré sa nachádzajú v systéme iOS, do akéhokoľvek prvku na vašej lokalite.

Prehľad

Čo by ste mali vedieť pri používaní popover plugin:

  • Popovery sa pri polohovaní spoliehajú na knižnicu Popper tretej strany . Aby popover fungovali, musíte pred bootstrap.js vložiť popper.min.js alebo použiť bootstrap.bundle.min.js/ bootstrap.bundle.jsktorý obsahuje Popper!
  • Popovery vyžadujú doplnok tooltip ako závislosť.
  • Ak vytvárate náš JavaScript zo zdroja, vyžadujeutil.js .
  • Vyskakovacie okná sú aktivované z dôvodov výkonu, takže ich musíte inicializovať sami .
  • Nulová dĺžka titlea contenthodnoty nikdy nezobrazia kontextové okno.
  • Špecifikujte container: 'body', aby ste sa vyhli problémom s vykresľovaním v zložitejších komponentoch (ako sú naše vstupné skupiny, skupiny tlačidiel atď.).
  • Spustenie vyskakovacích okien na skrytých prvkoch nebude fungovať.
  • Vyskakovacie okná pre prvky .disabledalebo disabledprvky musia byť spustené na prvku obalu.
  • Pri spustení z kotiev, ktoré sa zalomia cez viacero riadkov, budú vyskakovacie okná vycentrované medzi celkovou šírkou kotiev. Použite .text-nowrapna <a>s, aby ste sa vyhli tomuto správaniu.
  • Vyskakovacie okná musia byť skryté pred odstránením príslušných prvkov z modelu DOM.
  • Popovery môžu byť spustené vďaka prvku vo vnútri tieňového DOM.
Tento komponent štandardne používa vstavaný dezinfekčný prostriedok na obsah, ktorý odstraňuje všetky prvky HTML, ktoré nie sú výslovne povolené. Ďalšie podrobnosti nájdete v sekcii dezinfekcie v našej dokumentácii JavaScript .
Animačný efekt tohto komponentu závisí od prefers-reduced-motionmediálneho dopytu. Pozrite si časť so zníženým pohybom v našej dokumentácii o prístupnosti .

Pokračujte v čítaní, aby ste videli, ako fungujú vyskakovacie okná s niektorými príkladmi.

Príklad: Povoliť vyskakovacie okná všade

Jedným zo spôsobov, ako inicializovať všetky kontextové okná na stránke, je vybrať ich podľa ich data-toggleatribútu:

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

Príklad: Použitie containermožnosti

Ak máte nejaké štýly v nadradenom prvku, ktoré zasahujú do kontextového okna, budete chcieť zadať vlastný container, aby sa namiesto toho v tomto prvku objavil kód HTML kontextového okna.

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

Príklad

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

Štyri smery

K dispozícii sú štyri možnosti: zarovnané hore, vpravo, dole a vľavo.

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

Zavrieť pri ďalšom kliknutí

Pomocou focusspúšťača zatvorte kontextové okná pri ďalšom kliknutí používateľa na iný prvok, než je prvok prepínača.

Na zatvorenie pri nasledujúcom kliknutí sa vyžaduje špecifická značka

Pre správne správanie medzi prehliadačmi a platformami musíte použiť <a>značku, nie značku <button>, a tiež musíte zahrnúť tabindexatribút.

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

Zakázané prvky

Prvky s disabledatribútom nie sú interaktívne, čo znamená, že používatelia na ne nemôžu umiestniť kurzor myši alebo na ne kliknúť, aby vyvolali kontextové okno (alebo popis). Ako riešenie budete chcieť spustiť kontextové okno z obalu <div>alebo <span>a prepísať pointer-eventsprvok na zakázanom prvku.

V prípade vypnutých spúšťačov kontextových okien môžete tiež uprednostniť data-trigger="hover", aby sa kontextové okno zobrazovalo vašim používateľom ako okamžitá vizuálna spätná väzba, pretože nemusia očakávať, že kliknú na zakázaný prvok.

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

Použitie

Povoliť vyskakovacie okná prostredníctvom JavaScriptu:

$('#example').popover(options)
GPU akcelerácia

Vyskakovacie okná sa niekedy na zariadeniach so systémom Windows 10 zobrazujú rozmazane kvôli zrýchleniu GPU a upravenému systémovému DPI. Riešením tohto problému vo verzii 4 je deaktivácia akcelerácie GPU podľa potreby vo vašich kontextových oknách.

Navrhovaná oprava:

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

Aby vyskakovacie okná fungovali pre používateľov klávesnice a asistenčných technológií

Aby ste umožnili používateľom klávesnice aktivovať vaše vyskakovacie okná, mali by ste ich pridať iba do prvkov HTML, ktoré sú tradične zamerané na klávesnicu a sú interaktívne (ako sú odkazy alebo ovládacie prvky formulárov). Hoci ľubovoľné prvky HTML (ako napríklad <span>s) môžu byť zaostriteľné pridaním tabindex="0"atribútu, používateľom klávesnice to pridajú potenciálne nepríjemné a mätúce zarážky tabulátora na neinteraktívnych prvkoch a väčšina asistenčných technológií v súčasnosti v tejto situácii neoznamuje obsah kontextového okna. . Okrem toho sa nespoliehajte iba na hoverspúšťač pre vaše kontextové okná, pretože to znemožní ich spustenie pre používateľov klávesnice.

Aj keď pomocou tejto možnosti môžete do kontextových okien vkladať bohatý, štruktúrovaný kód HTML html, dôrazne vám odporúčame vyhnúť sa pridávaniu nadmerného množstva obsahu. Popovery v súčasnosti fungujú tak, že po zobrazení je ich obsah spojený so spúšťacím prvkom s aria-describedbyatribútom. Výsledkom je, že celý obsah kontextového okna bude oznámený používateľom asistenčných technológií ako jeden dlhý, neprerušovaný stream.

Okrem toho, hoci je možné do kontextového okna zahrnúť aj interaktívne ovládacie prvky (ako sú prvky formulára alebo odkazy) (pridaním t��chto prvkov do whiteListalebo povolených atribútov a značiek), uvedomte si, že kontextové okno v súčasnosti nespravuje poradie zaostrenia klávesnice. Keď používateľ klávesnice otvorí kontextové okno, zameranie zostáva na spúšťací prvok, a keďže kontextové okno zvyčajne nenasleduje okamžite po spúšťači v štruktúre dokumentu, neexistuje žiadna záruka, že pohyb vpred/stlačenieTABpresunie používateľa klávesnice do samotného kontextového okna. Stručne povedané, jednoduché pridanie interaktívnych ovládacích prvkov do kontextového okna pravdepodobne spôsobí, že tieto ovládacie prvky budú nedostupné/nepoužiteľné pre používateľov klávesnice a používateľov asistenčných technológií, alebo prinajmenšom spôsobí nelogické celkové poradie zamerania. V týchto prípadoch zvážte použitie modálneho dialógu.

možnosti

Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-, ako v data-animation="".

Upozorňujeme, že z bezpečnostných dôvodov nie je možné zadať možnosti sanitize, sanitizeFna whiteListpomocou údajových atribútov.
názov Typ Predvolené Popis
animácie boolovská hodnota pravda Na vyskakovacie okno použite prechod zoslabovania CSS
kontajner reťazec | prvok | falošný falošný

Pripojí popover ku konkrétnemu prvku. Príklad: container: 'body'. Táto možnosť je užitočná najmä v tom, že vám umožňuje umiestniť vyskakovacie okno v toku dokumentu v blízkosti spúšťacieho prvku – čo zabráni tomu, aby sa vyskakovacie okno vznášalo preč od spúšťacieho prvku počas zmeny veľkosti okna.

obsahu reťazec | prvok | funkciu ''

data-contentAk atribút nie je prítomný, predvolená hodnota obsahu .

Ak je zadaná funkcia, bude volaná s thisnastavenou referenciou na prvok, ku ktorému je kontextové okno pripojené.

meškanie číslo | objekt 0

Oneskorenie zobrazenia a skrytia popoveru (ms) – netýka sa manuálneho typu spúšťania

Ak je zadané číslo, oneskorenie sa použije na skrytie/zobrazenie

Štruktúra objektu je:delay: { "show": 500, "hide": 100 }

html boolovská hodnota falošný Vložte HTML do kontextového okna. Ak je hodnota false, textna vloženie obsahu do DOM sa použije metóda jQuery. Ak sa obávate útokov XSS, použite text.
umiestnenie reťazec | funkciu 'správny'

Ako umiestniť popover - auto | hore | dole | vľavo | správny.
Keď autoje zadané, dynamicky sa zmení orientácia kontextového okna.

Keď sa funkcia používa na určenie umiestnenia, volá sa s popover uzlom DOM ako jej prvým argumentom a spúšťacím prvkom DOM uzlom ako jej druhým. Kontext thisje nastavený na inštanciu kontextového okna.

selektor reťazec | falošný falošný Ak je poskytnutý selektor, popover objekty budú delegované na špecifikované ciele. V praxi sa to používa na umožnenie pridávania vyskakovacích okien do dynamického obsahu HTML. Pozrite si tento a informatívny príklad .
šablóna reťazec '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Základné HTML, ktoré sa má použiť pri vytváraní kontextového okna.

Popover titlesa vstrekne do .popover-header.

Popover contentsa vstrekne do .popover-body.

.arrowsa stane šípkou vyskakovacieho okna.

Prvok vonkajšieho obalu by mal mať .popovertriedu.

titul reťazec | prvok | funkciu ''

Predvolená hodnota názvu, ak titleatribút nie je prítomný.

Ak je zadaná funkcia, bude volaná s thisnastavenou referenciou na prvok, ku ktorému je kontextové okno pripojené.

spúšťač reťazec 'klikni' Ako sa spustí kontextové okno - kliknite | vznášať sa | zameranie | Manuálny. Môžete prejsť viacerými spúšťačmi; oddeľte ich medzerou. manualnie je možné kombinovať so žiadnym iným spúšťačom.
offset číslo | reťazec 0 Posun vyskakovacieho okna vzhľadom na jeho cieľ. Ďalšie informácie nájdete v dokumentoch Popper's ofset .
záložné umiestnenie reťazec | pole 'flip' Povoľte určiť, ktorú pozíciu použije Popper pri núdzovom postupe. Ďalšie informácie nájdete v dokumentoch o správaní Poppera
customClass reťazec | funkciu ''

Pridajte triedy do kontextového okna, keď sa zobrazí. Všimnite si, že tieto triedy budú pridané k všetkým triedam špecifikovaným v šablóne. Ak chcete pridať viacero tried, oddeľte ich medzerami: 'a b'.

Môžete tiež odovzdať funkciu, ktorá by mala vrátiť jeden reťazec obsahujúci ďalšie názvy tried.

hranica reťazec | prvok 'scrollParent' Hranica obmedzenia pretečenia vyskakovacieho okna. Prijíma hodnoty 'viewport', 'window', 'scrollParent'alebo odkaz HTMLElement (iba JavaScript). Ďalšie informácie nájdete v dokumentoch Popper's preventOverflow .
dezinfikovať boolovská hodnota pravda Povoliť alebo zakázať dezinfekciu. Ak je aktivovaný 'template', 'content'a 'title'možnosti budú dezinfikované. Pozrite si sekciu dezinfekcie v našej dokumentácii JavaScript .
whiteList objekt Predvolená hodnota Objekt, ktorý obsahuje povolené atribúty a značky
sanitizeFn null | funkciu nulový Tu si môžete dodať vlastnú funkciu dezinfekcie. To môže byť užitočné, ak uprednostňujete použitie špeciálnej knižnice na vykonanie dezinfekcie.
popperConfig null | objekt nulový Ak chcete zmeniť predvolenú konfiguráciu Popper Bootstrapu, pozrite si časť Konfigurácia Poppera

Atribúty údajov pre jednotlivé kontextové okná

Možnosti pre jednotlivé kontextové okná možno alternatívne špecifikovať pomocou atribútov údajov, ako je vysvetlené vyššie.

Metódy

Asynchrónne metódy a prechody

Všetky metódy API sú asynchrónne a spúšťajú prechod . Vrátia sa k volajúcemu hneď po spustení prechodu, ale skôr, ako sa skončí . Okrem toho bude volanie metódy na prechodovom komponente ignorované .

Viac informácií nájdete v našej dokumentácii JavaScript .

$().popover(options)

Inicializuje vyskakovacie okná pre kolekciu prvkov.

.popover('show')

Odhalí vyskakovací prvok prvku. Vráti sa k volajúcemu skôr, ako sa skutočne zobrazí kontextové okno (tj predtým, ako shown.bs.popoverdôjde k udalosti). Toto sa považuje za „manuálne“ spustenie kontextového okna. Kontextové okná, ktorých názov aj obsah majú nulovú dĺžku, sa nikdy nezobrazia.

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

.popover('hide')

Skryje popover prvku. Vráti sa k volajúcemu skôr, ako sa kontextové okno skutočne skrylo (tj predtým, ako hidden.bs.popovernastane udalosť). Toto sa považuje za „manuálne“ spustenie kontextového okna.

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

.popover('toggle')

Prepína kontextové okno prvku. Vráti sa k volajúcemu predtým, ako sa kontextové okno skutočne zobrazí alebo skryje (tj predtým, ako nastane udalosť shown.bs.popoveralebo ). hidden.bs.popoverToto sa považuje za „manuálne“ spustenie kontextového okna.

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

.popover('dispose')

Skryje a zničí popover prvku. Vyskakovacie okná, ktoré používajú delegovanie (ktoré sú vytvorené pomocou voľby ) selector, nemožno jednotlivo zničiť na podradených spúšťacích prvkoch.

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

.popover('enable')

Umožňuje zobrazenie kontextového okna prvku. Popovers sú predvolene povolené.

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

.popover('disable')

Odstráni možnosť zobrazenia kontextového okna prvku. Kontextové okno sa bude môcť zobraziť iba vtedy, ak bude znova povolené.

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

.popover('toggleEnabled')

Prepína možnosť zobrazenia alebo skrytia kontextového okna prvku.

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

.popover('update')

Aktualizuje pozíciu kontextového okna prvku.

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

Diania

Typ udalosti Popis
show.bs.popover Táto udalosť sa spustí okamžite po showzavolaní metódy inštancie.
zobrazené.bs.popover Táto udalosť sa spustí, keď sa kontextové okno zobrazí používateľovi (bude čakať na dokončenie prechodov CSS).
skryť.bs.popover Táto udalosť sa spustí okamžite po hidezavolaní metódy inštancie.
skrytý.bs.popover Táto udalosť sa spustí, keď sa ukončí skrytie kontextového okna pred používateľom (bude čakať na dokončenie prechodov CSS).
vložený.bs.popover Táto udalosť sa spustí po show.bs.popoverudalosti, keď bola do modelu DOM pridaná šablóna kontextového okna.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})