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 popover a harmadik fél Popper könyvtárára támaszkodik a pozicionáláshoz. A popper.min.js -t a bootstrap.js elé kell beírni, vagy a bootstrap.bundle.min.js/ bootstrap.bundle.js-t, amely a Poppert tartalmazza, 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. Használja .text-nowrapa <a>s-én, hogy elkerülje ezt a viselkedést.
• A felugró ablakokat el kell rejteni, mielőtt a megfelelő elemeiket eltávolítanák a DOM-ból.
• A popoverek az árnyék DOM-on belüli elemnek köszönhetően válthatók ki.

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

Elvetés a következő kattintással

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

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

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

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="".

Mód

$().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ő. Az olyan felugró ablakok, amelyek címe és tartalma egyaránt nulla hosszúságú, 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 popover pozícióját.

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

Események

$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})