in English

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 . Popoverite toimimiseks peate lisama popper.min.js enne bootstrap.js-i või kasutama nuppu bootstrap.bundle.min.js/ bootstrap.bundle.js, mis sisaldab Popperit!
  • 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.
Vaikimisi kasutab see komponent sisseehitatud sisupuhastusvahendit, mis eemaldab kõik HTML-i elemendid, mis pole otseselt lubatud. Lisateavet leiate meie JavaScripti dokumentatsiooni desinfitseerimisvahendite jaotisest .
Selle komponendi animatsiooniefekt sõltub prefers-reduced-motionmeediumipäringust. Vaadake meie juurdepääsetavuse dokumentatsiooni vähendatud liikumise jaotist .

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

Loobu järgmisel klikil

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

Järgmisel klõpsamisel loobumiseks on vajalik konkreetne märgistus

Õigeks brauseri- ja platvormiüleseks käitumiseks peate kasutama märgendit <a>, mitte<button> märgendit, ja lisaks peate lisama tabindexatribuudi.

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

Hüpikaknad näivad mõnikord Windows 10 seadmetes udused GPU kiirenduse ja muudetud süsteemi DPI tõttu. Selle probleemi lahendamiseks v4-s on GPU kiirenduse keelamine hüpikaknadel.

Soovitatav parandus:

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

Hüpikakende kasutamine klaviatuuri ja abitehnoloogia kasutajatele

Et võimaldada klaviatuuri kasutajatel teie hüpikaknaid aktiveerida, peaksite need lisama ainult HTML-i elementidele, mis on tavapäraselt klaviatuurile keskenduvad ja interaktiivsed (nt lingid või vormi juhtelemendid). Kuigi suvalisi HTML-i elemente (nt <span>s) saab tabindex="0"atribuudi lisamisega fokusseeritavaks muuta, lisab see klaviatuurikasutajatele potentsiaalselt tüütuid ja segadusse ajavaid tabelduspunkte mitteinteraktiivsetele elementidele ning enamik abitehnoloogiaid ei teata sellises olukorras hüpikakna sisu. . Lisaks ärge lootke ainult hoverhüpikaknate käivitajale, kuna see muudab klaviatuurikasutajate jaoks nende käivitamise võimatuks.

Kuigi selle valikuga saate hüpikaknatesse lisada rikkalikku struktureeritud HTML-i, htmlsoovitame tungivalt vältida liigse sisu lisamist. Hüpikaknad praegu töötavad nii, et pärast kuvamist seotakse nende sisu aria-describedbyatribuudiga päästikelemendiga. Selle tulemusena teatatakse kogu popoveri sisu abitehnoloogia kasutajatele ühe pika katkematu voona.

Lisaks, kuigi hüpikaknasse on võimalik lisada ka interaktiivseid juhtelemente (nt vormielemente või linke) (lisates need elemendid whiteListlubatud atribuutidele ja siltidele), pidage meeles, et praegu ei halda hüpikaken klaviatuuri fookuse järjekorda. Kui klaviatuurikasutaja avab hüpikakna, jääb fookus vallandavale elemendile ja kuna hüpikaken tavaliselt ei järgne kohe dokumendi struktuuris olevale päästikule, pole edasiliikumise/vajutamise garantiid.TABliigutab klaviatuuri kasutaja hüpikaknasse. Lühidalt, lihtsalt interaktiivsete juhtelementide lisamine hüpikaknasse muudab need juhtelemendid tõenäoliselt kättesaamatuks/kasutuskõlbmatuks klaviatuurikasutajatele ja abitehnoloogiate kasutajatele või teeb vähemalt ebaloogilise üldise fookusjärjestuse. Sellistel juhtudel kaaluge selle asemel modaalse dialoogi kasutamist.

Valikud

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

Pange tähele, et turvakaalutlustel sanitizeei saa andmeatribuutide abil anda suvandeid sanitizeFnja .whiteList
Nimi Tüüp Vaikimisi Kirjeldus
animatsioon tõeväärtus tõsi Rakendage hüpikaknale CSS-i tuhmumise üleminek
konteiner string | element | vale vale

Lisab hüpikakna konkreetsele elemendile. Näide: container: 'body'. See suvand on eriti kasulik, kuna see võimaldab teil positsioneerida hüpikakna dokumendi voogu käivitava elemendi lähedale – see hoiab ära hüpikakna hõljumise käivitavast elemendist akna suuruse muutmise ajal.

sisu string | element | funktsiooni ''

Sisu vaikeväärtus, kui data-contentatribuuti pole.

Kui funktsioon on antud, kutsutakse see välja nii, et selle thisviide on seatud elemendile, millele hüpikaken on lisatud.

viivitus number | objektiks 0

Hüpikakna kuvamise ja peitmise viivitus (ms) – ei kehti käsitsi käivitamise tüübi puhul

Kui number on esitatud, rakendatakse viivitust mõlemale peitmisele/näitamisele

Objekti struktuur on järgmine:delay: { "show": 500, "hide": 100 }

html tõeväärtus vale Sisestage hüpikaknasse HTML. Kui see on vale, textkasutatakse sisu DOM-i sisestamiseks jQuery meetodit. Kui olete XSS-i rünnakute pärast mures, kasutage teksti.
paigutus string | funktsiooni 'õige'

Kuidas positsioneerida hüpikakna - auto | ülemine | alumine | vasakule | õige.
Kui autoon määratud, suunab see hüpikakna dünaamiliselt ümber.

Kui paigutuse määramiseks kasutatakse funktsiooni, kutsutakse seda esile hüpikakna DOM-sõlme esimese argumendiga ja käivitava elemendi DOM-sõlm teise argumendiga. Kontekst thison seatud popover-eksemplarile.

valija string | vale vale Kui valija on ette nähtud, delegeeritakse hüpikaknaobjektid määratud sihtmärkidele. Praktikas kasutatakse seda dünaamilise HTML-i sisu hüpikaknade lisamiseks. Vaadake seda ja informatiivset näidet .
malli string '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Põhi-HTML, mida kasutada hüpikakna loomisel.

Popover'id titlesüstitakse .popover-header.

Popover'id contentsüstitakse .popover-body.

.arrowmuutub popoveri nooleks.

Kõige välimisel ümbriselemendil peaks olema .popoverklass.

pealkiri string | element | funktsiooni ''

Pealkirja vaikeväärtus, kui titleatribuuti pole.

Kui funktsioon on antud, kutsutakse see välja nii, et selle thisviide on seatud elemendile, millele hüpikaken on lisatud.

päästik string "klõps" Kuidas hüpikakna käivitatakse – klõpsake | hõljuda | keskenduda | manuaal. Võite läbida mitu päästikut; eraldage need tühikuga. manualei saa kombineerida ühegi teise päästikuga.
nihe number | string 0 Popoveri nihe selle sihtmärgi suhtes. Lisateabe saamiseks vaadake Popperi nihkedokumente .
tagavaraPaigutus string | massiivi 'flip' Lubage määrata, millist positsiooni Popper kasutab tagavaraks. Lisateabe saamiseks vaadake Popperi käitumisdokumente
kohandatud klass string | funktsiooni ''

Lisage hüpikaknasse klassid, kui see kuvatakse. Pange tähele, et need klassid lisatakse lisaks mallis määratud klassidele. Mitme klassi lisamiseks eraldage need tühikutega: 'a b'.

Saate edastada ka funktsiooni, mis peaks tagastama ühe stringi, mis sisaldab täiendavaid klassinimesid.

piiri string | element 'scrollParent' Hüpikakna ülevoolupiirangu piir. Aktsepteerib 'viewport', 'window', 'scrollParent', või HTMLElementi viite väärtusi (ainult JavaScript). Lisateabe saamiseks vaadake Popperi preventOverflow dokumente .
desinfitseerida tõeväärtus tõsi Lubage või keelake desinfitseerimine. Kui see on aktiveeritud 'template', desinfitseeritakse valikud 'content'. 'title'Vaadake meie JavaScripti dokumentatsiooni desinfitseerimisvahendi jaotist .
valge nimekiri objektiks Vaikeväärtus Objekt, mis sisaldab lubatud atribuute ja silte
desinfitseerimaFn null | funktsiooni null Siin saate pakkuda oma desinfitseerimisfunktsiooni. See võib olla kasulik, kui eelistate desinfitseerimiseks kasutada spetsiaalset raamatukogu.
popperConfig null | objektiks null Bootstrapi Popperi vaikekonfiguratsiooni muutmiseks vaadake Popperi konfiguratsiooni

Andmete atribuudid üksikute hüpikaknate jaoks

Üksikute hüpikaknate valikuid saab alternatiivselt määrata andmeatribuutide abil, nagu eespool selgitatud.

meetodid

Asünkroonsed meetodid ja üleminekud

Kõik API meetodid on asünkroonsed ja alustavad üleminekut . Nad naasevad helistaja juurde kohe pärast ülemineku algust, kuid enne selle lõppu . Lisaks ignoreeritakse üleminekukomponendi meetodikutset .

Lisateabe saamiseks vaadake meie JavaScripti dokumentatsiooni .

$().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

Sündmuse tüüp Kirjeldus
show.bs.popover See sündmus käivitub kohe, kui showeksemplari meetod kutsutakse.
näidatud.bs.popover See sündmus käivitatakse, kui hüpikaken on kasutajale nähtavaks tehtud (ootab CSS-i üleminekut).
peida.bs.popover See sündmus käivitatakse kohe, kui hideeksemplari meetod on välja kutsutud.
peidetud.bs.popover See sündmus käivitatakse, kui hüpikakna kasutaja eest peitmine on lõppenud (ootab, kuni CSS-i üleminekud on lõpule viidud).
sisestatud.bs.popover See sündmus käivitatakse pärast show.bs.popoversündmust, kui hüpikakende mall on DOM-i lisatud.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})