Popovers

Dokumentatsioon ja näited Bootstrapi hüpikaknate (nt iOS-is leiduvad) lisamiseks saidi mis tahes elemendile.

Ülevaade

Asjad, mida popover-plugina kasutamisel teada saada:

• Popoverid kasutavad positsioneerimiseks kolmanda osapoole raamatukogu Popper.js . Peate lisama popper.min.js enne bootstrap.js-i või kasutama bootstrap.bundle.min.js/ bootstrap.bundle.jsmis sisaldab Popper.js-i, et hüpikaknad töötaksid!
• Hüpikaknad nõuavad tööriistavihje pluginat sõltuvusena.
• Kui loote meie JavaScripti allikast, nõuabutil.js see .
• Hüpikaknad on jõudluse huvides lubatud, seega peate need ise lähtestama .
• Nullpikkus titleja contentväärtused ei näita kunagi hüpikaknaid.
• Määrake container: 'body', et vältida renderdamisprobleeme keerukamates komponentides (nt meie sisendrühmad, nupurühmad jne).
• Peidetud elementide hüpikaknade käivitamine ei toimi.
• Elementide .disabledvõi disabledelementide hüpikaknad tuleb käivitada ümbriselemendil.
• Kui hüpikaknad käivitatakse ankrute kaudu, mis keerduvad üle mitme joone, tsentreeritakse hüpikaknad ankrute üldlaiuse vahele. Sellise käitumise vältimiseks kasutage .text-nowrapseda oma peal .<a>
• Hüpikaknad tuleb peita enne, kui nende vastavad elemendid on DOM-ist eemaldatud.
• Hüpikaknaid saab käivitada tänu vari-DOM-i sees olevale elemendile.

Jätkake lugemist, et näha, kuidas hüpikaknad mõne näitega töötavad.

Näide: lubage hüpikaknad kõikjal

Üks viis kõigi lehe hüpikaknate lähtestamiseks on valida need nende data-toggleatribuudi järgi:

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

Näide: containervaliku kasutamine

Kui teil on ülemelemendil mõned stiilid, mis segavad hüpikakna esilekutsumist, soovite määrata kohandatud containerelemendi, nii et hüpikakna HTML kuvatakse selle elemendi sees.

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

Näide

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

Neli suunda

Saadaval on neli valikut: ülemine, parem, alumine ja vasakule joondatud.

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

Loobu järgmisel klikil

Kasutage focuspäästikut hüpikaknate tühistamiseks, kui kasutaja järgmisel klõpsul lülituselemendist erineval elemendil klõpsab.

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

Keelatud elemendid

Atribuudiga elemendid disabledei ole interaktiivsed, mis tähendab, et kasutajad ei saa hüpikakna (või kohtspikri) käivitamiseks hõljutada või klõpsata. Lahendusena võiksite käivitada hüpikakna ümbrisest <div>või <span>alistada pointer-eventskeelatud elemendi.

Keelatud hüpikakna käivitajate puhul võite eelistada ka data-trigger="hover"seda, et hüpikakna kuvatakse kasutajatele vahetu visuaalse tagasisidena, kuna nad ei pruugi eeldada, et nad klõpsavad keelatud elemendil.

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

Kasutamine

Luba hüpikaknad JavaScripti kaudu:

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

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

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-animation="".

meetodid

$().popover(options)

Initsialiseerib hüpikaknad elemendikogu jaoks.

.popover('show')

Näitab elemendi hüpikakna. Naaseb helistaja juurde enne hüpikakna tegelikku näitamist (st enne shown.bs.popoversündmuse toimumist). Seda peetakse hüpikakna "käsitsi" käivitamiseks. Hüpikaknaid, mille pealkiri ja sisu on nullpikkused, ei kuvata kunagi.

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

.popover('hide')

Peidab elemendi hüpikakna. Naaseb helistaja juurde enne, kui hüpikaken on tegelikult peidetud (st enne hidden.bs.popoversündmuse toimumist). Seda peetakse hüpikakna "käsitsi" käivitamiseks.

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

.popover('toggle')

Lülitab elemendi hüpikakna välja. Naaseb helistaja juurde enne, kui hüpikaknat on tegelikult näidatud või peidetud (st enne sündmuse shown.bs.popovervõi hidden.bs.popovertoimumist). Seda peetakse hüpikakna "käsitsi" käivitamiseks.

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

.popover('dispose')

Peidab ja hävitab elemendi hüpikakna. Delegeerimist kasutavaid hüpikaknaid (mis luuakse suvandiga selector) ei saa järeltulijate päästikuelementidel eraldi hävitada.

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

.popover('enable')

Annab elemendi hüpikaknale võimaluse seda näidata. Hüpikaknad on vaikimisi lubatud.

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

.popover('disable')

Eemaldab elemendi hüpikakna kuvamise võimaluse. Popoverit saab kuvada ainult siis, kui see on uuesti lubatud.

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

.popover('toggleEnabled')

Lülitab elemendi hüpikakna kuvamise või peitmise võimaluse.

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

.popover('update')

Värskendab elemendi hüpikakna asukohta.

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

Sündmused

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