Source

Popovers

Dokumentáció és példák Bootstrap felugró ablakok – például az iOS rendszerben találhatók – hozzáadásához a webhely bármely eleméhez.

Áttekintés

Tudnivalók a popover beépülő modul használatakor:

  • A popoverek a harmadik fél Popper.js könyvtárára támaszkodnak a pozicionáláshoz. A popper.min.js fájlt a bootstrap.js elé kell beírni, vagy a bootstrap.bundle.min.js/ bootstrap.bundle.js-t, amely tartalmazza a Popper.js-t, hogy a popover működjön!
  • Az előugró ablakokhoz függőségként szükség van az eszköztipp-bővítményre .
  • Ha a JavaScriptet forrásból készíti, akkor ehhezutil.js .
  • A felugró ablakok teljesítmény miatt engedélyezettek, ezért Önnek kell inicializálnia őket .
  • A nulla hosszúság titleés contentaz értékek soha nem fognak felbukkanni.
  • Adja meg container: 'body', hogy elkerülje a megjelenítési problémákat az összetettebb összetevőkben (például beviteli csoportjaink, gombcsoportjaink stb.).
  • A rejtett elemek felbukkanásának kiváltása nem fog működni.
  • .disabledA vagy elemek felbukkanását a disabledburkolóelemen kell aktiválni.
  • Ha több vonalon átívelő horgonyok aktiválják, a felugró ablakok a horgonyok teljes szélessége között lesznek középen. Ennek a viselkedésnek a elkerülése érdekében használja white-space: nowrap;a s.<a>
  • A felugró ablakokat el kell rejteni, mielőtt a megfelelő elemeiket eltávolítanák a DOM-ból.

Olvasson tovább, hogy megtudja, hogyan működnek a popoverek néhány példával.

Példa: Engedélyezze a popovereket mindenhol

data-toggleAz oldal összes felugró ablakának inicializálásának egyik módja az lenne, ha attribútumuk alapján választaná ki őket :

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

Példa: Az containeropció használata

Ha egy szülőelemen vannak olyan stílusok, amelyek megzavarják a felbukkanást, akkor meg kell adnia egy egyéni beállítást container, hogy az előugró elem HTML-kódja helyett az adott elemen belül jelenjen meg.

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

Példa

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

Négy irány

Négy lehetőség áll rendelkezésre: felül, jobb, alsó és balra igazítva.

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

Elvetés a következő kattintással

Használja a focustriggert a felugró ablakok elvetésére, amikor a felhasználó a váltóelemtől eltérő elemre kattint következő alkalommal.

Speciális jelölés szükséges a következő kattintáskor történő elvetéshez

A megfelelő, több böngésző és platform közötti viselkedés érdekében a címkét kell használnia <a>, nem a <button>címkét, és tartalmaznia kell egy tabindexattribútumot is.

Elvethető popover 
<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'
})

Letiltott elemek

Az disabledattribútummal rendelkező elemek nem interaktívak, ami azt jelenti, hogy a felhasználók nem vihetik az egérmutatót vagy kattinthatnak rájuk, hogy előugró ablakot (vagy elemleírást) indítsanak el. Megkerülő megoldásként ki kell váltania a felugró ablakot egy burkolóból, <div>vagy <span>felül kell írnia pointer-eventsa letiltott elemet.

A letiltott popover triggereknél azt is előnyben részesítheti data-trigger="hover", hogy a felbukkanó üzenet azonnali vizuális visszajelzésként jelenjen meg a felhasználók számára, mivel előfordulhat, hogy nem számítanak rá, hogy egy letiltott elemre kattintanak .

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

Használat

Előugró ablakok engedélyezése JavaScripten keresztül:

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

Lehetőségek

Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-következőhöz: data-animation="".

Név típus Alapértelmezett Leírás
élénkség logikai érték igaz Alkalmazzon CSS-eltolási átmenetet az előugró ablakra
tartály húr | elem | hamis hamis

Egy adott elemhez fűzi az előugró ablakot. Példa: container: 'body'. Ez az opció különösen hasznos, mivel lehetővé teszi, hogy a felugró ablakot a dokumentum folyamában az indítóelem közelében helyezze el – ami megakadályozza, hogy az ablak átméretezése során az előugró elemtől távolodjon.
tartalom húr | elem | funkció ''

Alapértelmezett tartalomérték, ha data-contentaz attribútum nincs jelen.

Ha adott egy függvény, akkor az úgy lesz meghívva, hogy a thishivatkozása arra az elemre van beállítva, amelyhez a popover kapcsolódik.
késleltetés szám | tárgy 0

A felugró ablak megjelenítésének és elrejtésének késleltetése (ms) – nem vonatkozik a kézi indítótípusra

Ha megad egy számot, akkor a késleltetés mindkét elrejtésre/megjelenítésre vonatkozik

Az objektum szerkezete a következő:delay: { "show": 500, "hide": 100 }
html logikai érték hamis Szúrjon be HTML-t a felugró ablakba. Ha hamis, akkor a jQuery textmetódusát fogja használni a tartalom beszúrására a DOM-ba. Használjon szöveget, ha aggódik az XSS-támadások miatt.
elhelyezés húr | funkció 'jobb'

Hogyan helyezzük el a popovert - auto | top | alsó | balra | jobb.
Ha automeg van adva, akkor dinamikusan átirányítja a felugró ablakot.

Amikor egy függvényt használunk az elhelyezés meghatározására, akkor az első argumentumként a popover DOM-csomópontot, másodikként pedig a DOM-csomópont kiváltó elemet hívja meg. A thiskontextus a popover példányra van állítva.
választó húr | hamis hamis Ha rendelkezésre áll választó, a felugró objektumok delegálódnak a megadott célokra. A gyakorlatban ezt arra használják, hogy a dinamikus HTML-tartalomhoz felugró ablakokat adjanak hozzá. Lásd ezt és egy tájékoztató példát .
sablon húr '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

A popover létrehozásakor használandó alap HTML.

A popovert titlea .popover-header.

A popovert contenta .popover-body.

.arrowa popover nyila lesz.

A legkülső burkolóelemnek az .popoverosztálynak kell lennie.
cím húr | elem | funkció ''

Az alapértelmezett címérték, ha titleaz attribútum nincs jelen.

Ha adott egy függvény, akkor az úgy lesz meghívva, hogy a thishivatkozása arra az elemre van beállítva, amelyhez a popover kapcsolódik.
ravaszt húr 'kattint' Hogyan történik a popover aktiválása - kattintson a | lebeg | fókusz | kézikönyv. Több triggert is átadhat; szóközzel válassza el őket. A `manuális' nem kombinálható semmilyen más triggerrel.
beszámítás szám | húr 0 A popover eltolása a célhoz képest. További információkért tekintse meg a Popper.js offset dokumentumait .
backbackPlacement húr | sor 'flip' Hagyja megadni, hogy a Popper melyik pozíciót használja a tartaléknál. További információkért tekintse meg a Popper.js viselkedési dokumentumait
határ húr | elem 'scrollParent' A felbukkanó túlcsordulási kényszer határa. Elfogadja a 'viewport', 'window', 'scrollParent', vagy a HTMLElement hivatkozás értékeit (csak JavaScript). További információkért tekintse meg a Popper.js preventOverflow dokumentumait .

Adatattribútumok az egyes felugró ablakokhoz

Az egyes felugró ablakok beállításai az adatattribútumok használatával is megadhatók, a fentiek szerint.

Mód

Aszinkron módszerek és átmenetek

Minden API metódus aszinkron , és átmenetet indít . Visszatérnek a hívóhoz, amint az átmenet elkezdődik, de még azelőtt, hogy az véget érne . Ezenkívül a rendszer figyelmen kívül hagyja az átmeneti komponens metódushívásait .

További információért tekintse meg JavaScript dokumentációnkat.

$().popover(options)

Inicializálja az elemgyűjtemény popovereit.

.popover('show')

Felfedi egy elem felbukkanását. Visszatér a hívóhoz, mielőtt a popover ténylegesen megjelenne (azaz az shown.bs.popoveresemény bekövetkezte előtt). Ez a popover „kézi” kiváltásának tekinthető. A nulla hosszúságú felugró ablakok soha nem jelennek meg.

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

.popover('hide')

Elrejti egy elem felbukkanását. Visszatér a hívóhoz, mielőtt a popover ténylegesen el lett volna rejtve (azaz az hidden.bs.popoveresemény bekövetkezte előtt). Ez a popover „kézi” kiváltásának tekinthető.

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

.popover('toggle')

Bekapcsolja az elem felbukkanását. Visszatér a hívóhoz, mielőtt a popover ténylegesen megjelenne vagy elrejtésre kerülne (azaz a shown.bs.popovervagy hidden.bs.popoveresemény bekövetkezése előtt). Ez a popover „kézi” kiváltásának tekinthető.

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

.popover('dispose')

Elrejti és megsemmisíti egy elem felbukkanását. A delegálást használó felugró ablakok (amelyek a selectorbeállítással jönnek létre ) nem semmisíthetők meg egyenként a leszármazott triggerelemeken.

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

.popover('enable')

Lehetővé teszi, hogy egy elem popover megjelenjen. A popoverek alapértelmezés szerint engedélyezve vannak.

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

.popover('disable')

Eltávolítja az elem felugró ablakának megjelenítési lehetőségét. A popover csak akkor jelenhet meg, ha újra engedélyezve van.

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

.popover('toggleEnabled')

Bekapcsolja az elem felugró ablakának megjelenítését vagy elrejtését.

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

.popover('update')

Frissíti egy elem felugró ablakának pozícióját.

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

Események

Esemény típus Leírás
show.bs.popover Ez az esemény azonnal aktiválódik a showpéldánymetódus meghívásakor.
mutatott.bs.popover Ez az esemény akkor indul el, amikor a popover láthatóvá vált a felhasználó számára (megvárja, amíg a CSS-átmenetek befejeződnek).
elrejteni.bs.popover Ez az esemény azonnal elindul, amikor a hidepéldánymetódus meghívásra került.
rejtett.bs.popover Ez az esemény akkor indul el, amikor a popover elrejtése befejeződött a felhasználó elől (megvárja, amíg a CSS-átmenetek befejeződnek).
beszúrva.bs.popover Ez az esemény az show.bs.popoveresemény után indul el, amikor a popover sablont hozzáadták a DOM-hoz. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})