Source

Popovers

Dokumentace a příklady pro přidávání vyskakovacích oken Bootstrap, jako jsou ty, které se nacházejí v systému iOS, do jakéhokoli prvku na vašem webu.

Přehled

Co byste měli vědět při používání popover pluginu:

  • Popovers se při určování polohy spoléhají na knihovnu Popper.js třetí strany . Aby vyskakovací okna fungovala, musíte před bootstrap.js zahrnout popper.min.js nebo použít bootstrap.bundle.min.js/ bootstrap.bundle.jskterý obsahuje Popper.js!
  • Popovers vyžadují plugin tooltip jako závislost.
  • Pokud vytváříte náš JavaScript ze zdroje, vyžadujeutil.js .
  • Popovers jsou z výkonnostních důvodů volitelná, takže je musíte inicializovat sami .
  • Nulová délka titlea contenthodnoty nikdy nezobrazí vyskakovací okno.
  • Určete container: 'body', abyste se vyhnuli problémům s vykreslováním ve složitějších komponentách (jako jsou naše vstupní skupiny, skupiny tlačítek atd.).
  • Spouštění vyskakovacích oken na skrytých prvcích nebude fungovat.
  • Popover pro .disablednebo disabledprvky musí být spuštěny na prvku obalu.
  • Při spuštění z kotev, které se zalomí přes více čar, budou vyskakovací okna vycentrována mezi celkovou šířkou kotev. Chcete-li se tomuto chování vyhnout, použijte white-space: nowrap;na svém s.<a>
  • Popovers musí být skryty, než budou jejich odpovídající prvky odstraněny z DOM.

Pokračujte ve čtení, abyste viděli, jak popover fungují s některými příklady.

Příklad: Povolit vyskakovací okna všude

Jedním ze způsobů, jak inicializovat všechna vyskakovací okna na stránce, je vybrat je podle jejich data-toggleatributu:

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

Příklad: Použití containervolby

Pokud máte nějaké styly v nadřazeném prvku, které narušují vyskakovací okno, budete chtít zadat vlastní container, aby se v tomto prvku místo toho zobrazil kód HTML vyskakovacího okna.

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

Pří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>

Čtyři směry

K dispozici jsou čtyři možnosti: zarovnání nahoře, vpravo, dole a vlevo.

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

Zavřít při dalším kliknutí

Pomocí focusspouštěče zavřete vyskakovací okna při dalším kliknutí uživatele na jiný prvek, než je prvek přepínání.

Pro zavření při dalším kliknutí je vyžadováno specifické označení

Pro správné chování mezi prohlížeči a platformami musíte použít <a>značku, nikoli značku <button>, a také musíte zahrnout tabindexatribut.

Zavřít vyskakovací okno 
<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 disabledatributem nejsou interaktivní, což znamená, že uživatelé na ně nemohou umístit kurzor myši nebo na ně kliknout, aby vyvolali vyskakovací okno (nebo popisek). Jako náhradní řešení budete chtít spustit vyskakovací okno z obálky <div>nebo <span>přepsat pointer-eventsprvek na zakázaném prvku.

U zakázaných spouštěčů vyskakovacích oken můžete také upřednostnit data-trigger="hover", aby se vyskakovací okno zobrazilo vašim uživatelům jako okamžitá vizuální zpětná vazba, protože nemusí očekávat, že kliknou na zakázaný prvek.

<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žívání

Povolit vyskakovací okna prostřednictvím JavaScriptu:

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

Možnosti

Možnosti lze předávat prostřednictvím atributů dat nebo JavaScriptu. U atributů dat připojte název volby k data-, jako v data-animation="".

název Typ Výchozí Popis
animace booleovský skutečný Na vyskakovací okno použijte přechod prolínání CSS
kontejner řetězec | prvek | Nepravdivé Nepravdivé

Připojí vyskakovací okno ke konkrétnímu prvku. Příklad: container: 'body'. Tato možnost je užitečná zejména v tom, že vám umožňuje umístit vyskakovací okno v toku dokumentu blízko spouštěcího prvku – což zabrání tomu, aby vyskakovací okno odplouval pryč od spouštěcího prvku během změny velikosti okna.
obsah řetězec | prvek | funkce ''

Výchozí hodnota obsahu, pokud data-contentatribut není přítomen.

Je-li zadána funkce, bude volána se svou thisreferenční sadou na prvek, ke kterému je popover připojen.
zpoždění číslo | objekt 0

Zpoždění zobrazení a skrytí popoveru (ms) - nevztahuje se na typ ručního spouštění

Pokud je zadáno číslo, použije se prodleva pro skrytí/zobrazení

Struktura objektu je:delay: { "show": 500, "hide": 100 }
html booleovský Nepravdivé Vložte HTML do vyskakovacího okna. Pokud je nepravda, textk vložení obsahu do DOM se použije metoda jQuery. Pokud se obáváte útoků XSS, použijte text.
umístění řetězec | funkce 'že jo'

Jak umístit vyskakovací okno - auto | nahoru | dole | vlevo | že jo.
Když autoje zadáno, dynamicky změní orientaci vyskakovacího okna.

Když je k určení umístění použita funkce, je volána s popover uzlem DOM jako prvním argumentem a spouštěcím prvkem DOM uzlem jako druhým. Kontext thisje nastaven na instanci vyskakovacího okna.
volič řetězec | Nepravdivé Nepravdivé Pokud je k dispozici selektor, překryvné objekty budou delegovány na zadané cíle. V praxi se to používá k umožnění přidávání vyskakovacích oken do dynamického obsahu HTML. Podívejte se na tento a informativní příklad .
šablona tětiva '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Základní HTML, které se použije při vytváření vyskakovacího okna.

Popover titlebude vstříknut do .popover-header.

Popover contentbude vstříknut do .popover-body.

.arrowse stane šipkou vyskakovacího okna.

Nejvzdálenější prvek obalu by měl mít .popovertřídu.
titul řetězec | prvek | funkce ''

Výchozí hodnota názvu, pokud titleatribut není přítomen.

Je-li zadána funkce, bude volána se svou thisreferenční sadou na prvek, ke kterému je popover připojen.
spoušť tětiva 'kliknout' Jak se spouští vyskakovací okno - klikněte | vznášet se | zaměření | manuál. Můžete předat více spouštěčů; oddělte je mezerou. „manuální“ nelze kombinovat s žádným jiným spouštěčem.
offset číslo | tětiva 0 Posun vyskakovacího okna vzhledem k jeho cíli. Další informace naleznete v dokumentech offsetu Popper.js .
záložní umístění řetězec | pole 'flip' Umožněte určit, jakou pozici bude Popper používat při nouzovém režimu. Další informace naleznete v dokumentech chování Popper.js
hranice řetězec | živel 'scrollParent' Hranice omezení přetečení vyskakovacího okna. Přijímá hodnoty 'viewport', 'window', 'scrollParent'nebo odkaz HTMLElement (pouze JavaScript). Další informace naleznete v dokumentech preventOverflow Popper.js .

Atributy dat pro jednotlivá vyskakovací okna

Volby pro jednotlivá vyskakovací okna lze alternativně specifikovat pomocí datových atributů, jak je vysvětleno výše.

Metody

Asynchronní metody a přechody

Všechny metody API jsou asynchronní a zahajují přechod . Vrátí se k volajícímu, jakmile je přechod zahájen, ale před jeho ukončením . Kromě toho bude ignorováno volání metody na přechodové komponentě .

Další informace naleznete v naší dokumentaci k JavaScriptu.

$().popover(options)

Inicializuje vyskakovací okna pro kolekci prvků.

.popover('show')

Odhalí popover prvku. Vrátí se k volajícímu dříve, než se vyskakovací okno skutečně zobrazilo (tj. než dojde k shown.bs.popoverudálosti). Toto je považováno za „ruční“ spuštění vyskakovacího okna. Popovery, jejichž název i obsah mají nulovou délku, se nikdy nezobrazují.

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

.popover('hide')

Skryje popover prvku. Vrátí se k volajícímu dříve, než byl vyskakovací okno skutečně skryt (tj. než dojde k hidden.bs.popoverudálosti). Toto je považováno za „ruční“ spuštění vyskakovacího okna.

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

.popover('toggle')

Přepíná vyskakovací okno prvku. Vrátí se k volajícímu předtím, než se vyskakovací okno skutečně zobrazí nebo skryje (tj. než dojde k události shown.bs.popovernebo ). hidden.bs.popoverToto je považováno za „ruční“ spuštění vyskakovacího okna.

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

.popover('dispose')

Skryje a zničí popover prvku. Popovers, která používají delegování (která jsou vytvořena pomocí volby ) selector, nelze jednotlivě zničit na podřízených spouštěcích prvcích.

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

.popover('enable')

Umožňuje zobrazení vyskakovacího okna prvku. Popovers jsou ve výchozím nastavení povoleny.

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

.popover('disable')

Odebere možnost zobrazení vyskakovacího okna prvku. Vyskakovací okno se bude moci zobrazit pouze v případě, že bude znovu povoleno.

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

.popover('toggleEnabled')

Přepíná možnost zobrazení nebo skrytí vyskakovacího okna prvku.

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

.popover('update')

Aktualizuje pozici vyskakovacího okna prvku.

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

Události

Typ události Popis
show.bs.popover Tato událost se spustí okamžitě při showvolání metody instance.
zobrazeno.bs.popover Tato událost se spustí, když se vyskakovací okno zviditelní uživateli (bude čekat na dokončení přechodů CSS).
hide.bs.popover Tato událost se spustí okamžitě po hidezavolání metody instance.
skrytý.bs.popover Tato událost se spustí, když je vyskakovací okno skryto před uživatelem (bude čekat na dokončení přechodů CSS).
vložený.bs.popover Tato událost se spustí po show.bs.popoverudálosti, kdy byla šablona vyskakovacího okna přidána do modelu DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})