Source

Popovers

Skjöl og dæmi til að bæta Bootstrap popover, eins og þeim sem finnast í iOS, við hvaða þátt sem er á síðunni þinni.

Yfirlit

Hlutir sem þarf að vita þegar popover viðbótin er notuð:

  • Popovers treysta á þriðja aðila bókasafnið Popper.js fyrir staðsetningu. Þú verður að hafa popper.min.js fyrir bootstrap.js eða nota bootstrap.bundle.min.js/ bootstrap.bundle.jssem inniheldur Popper.js til að popovers virki!
  • Popovers krefjast tooltip viðbótarinnar sem ósjálfstæði.
  • Ef þú ert að byggja JavaScript okkar frá uppruna, krefstutil.js það .
  • Popovers eru valdir af frammistöðuástæðum, svo þú verður að frumstilla þá sjálfur .
  • Núll-lengd titleog contentgildi munu aldrei sýna popover.
  • Tilgreindu container: 'body'til að forðast að skila vandamálum í flóknari íhlutum (eins og inntakshópum okkar, hnappahópum osfrv.).
  • Það mun ekki virka að kveikja á popover á földum þáttum.
  • Popovers fyrir .disabledeða disabledþætti verður að kveikja á umbúðaeiningu.
  • Þegar kveikt er á akkerum sem sveiflast yfir margar línur, verða sprettigluggar miðaðir á milli heildarbreiddar akkeranna. Notaðu .text-nowrapá þinn <a>s til að forðast þessa hegðun.
  • Fela verður popover áður en samsvarandi þættir þeirra hafa verið fjarlægðir úr DOM.
  • Hægt er að kveikja á popover þökk sé frumefni inni í skugga DOM.

Hreyfiáhrif þessa íhluts eru háð prefers-reduced-motionmiðlunarfyrirspurninni. Sjá kaflann um minni hreyfingu í aðgengisskjölunum okkar .

Haltu áfram að lesa til að sjá hvernig popovers virka með nokkrum dæmum.

Dæmi: Virkja popover alls staðar

Ein leið til að frumstilla alla sprettiglugga á síðu væri að velja þá eftir data-toggleeiginleikum þeirra:

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

Dæmi: Notkun containervalmöguleikans

Þegar þú ert með einhverja stíla á móðureiningu sem truflar sprettiglugga, viltu tilgreina sérsniðinn containerþannig að HTML sprettigluggans birtist innan þess þáttar í staðinn.

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

Dæmi

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

Fjórar áttir

Fjórir valkostir eru í boði: efst, hægri, neðst og vinstri stillt.

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

Hunsa við næsta smell

Notaðu focuskveikjuna til að hafna sprettiglugga þegar notandinn smellir næst á annan þátt en skiptaeininguna.

Sérstök merking er nauðsynleg til að hafna-við-næsta-smelli

Fyrir rétta hegðun milli vafra og vettvanga verður þú að nota <a>merkið, ekki merkið <button>, og þú verður líka að innihalda tabindexeigind.

Afsláttur 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'
})

Óvirkir þættir

Þættir með disabledeigindinni eru ekki gagnvirkir, sem þýðir að notendur geta ekki sveiflað eða smellt á þá til að kalla fram sprettiglugga (eða tólabendingu). Sem lausn, þú vilt kveikja á popover frá umbúðum <div>eða <span>og hnekkja pointer-eventsá óvirka þættinum.

Fyrir óvirka sprettiglugga, gætirðu líka viljað data-trigger="hover"að sprettigluggan birtist sem tafarlaus sjónræn endurgjöf til notenda þinna þar sem þeir búast kannski ekki við að smella á óvirkan þátt.

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

Notkun

Virkja popover í gegnum JavaScript:

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

Að láta popover virka fyrir notendur lyklaborðs og hjálpartækja

Til að leyfa lyklaborðsnotendum að virkja sprettiglugga þína, ættirðu aðeins að bæta þeim við HTML þætti sem venjulega eru með lyklaborðsfókus og gagnvirkir (svo sem tenglar eða formstýringar). Þrátt fyrir að hægt sé að gera handahófskennda HTML þætti (eins og <span>s) fókusanlega með því að bæta tabindex="0"eigindinni við, mun þetta bæta við hugsanlega pirrandi og ruglingslegum flipastoppum á ógagnvirka þætti fyrir lyklaborðsnotendur, og flestar hjálpartækni tilkynnir ekki efni sprettigluggans í þessum aðstæðum. . Að auki, ekki treysta eingöngu á hoversem kveikjuna fyrir popovers þína, þar sem þetta mun gera þá ómögulegt að kveikja á lyklaborðsnotendum.

Þó að þú getir sett inn innihaldsríkt, skipulagt HTML í sprettiglugga með htmlmöguleikanum, mælum við eindregið með því að þú forðast að bæta við of miklu magni af efni. Hvernig popovers virka eins og er er að þegar það hefur verið birt er innihald þeirra bundið við kveikjuþáttinn með aria-describedbyeigindinni. Fyrir vikið verður allt innihald popoversins tilkynnt notendum hjálpartækja sem einn langur, samfelldur straumur.

Að auki, þó að það sé einnig mögulegt að innihalda gagnvirkar stýringar (eins og eyðublöð eða tengla) í sprettiglugganum þínum (með því að bæta þessum þáttum við whiteListeða leyfðir eiginleikar og merki), skaltu vera meðvitaður um að eins og er stýrir popover ekki fókusröð lyklaborðs. Þegar lyklaborðsnotandi opnar sprettiglugga, er einbeitingin áfram á kveikjuhlutanum og þar sem sprettiglugginn fylgir venjulega ekki strax kveikjunni í uppbyggingu skjalsins, er engin trygging fyrir því að halda áfram/ýtaTABmun færa lyklaborðsnotanda inn í sprettigluggann sjálfan. Í stuttu máli, einfaldlega að bæta gagnvirkum stjórntækjum við sprettiglugga er líklegt til að gera þessar stýringar óaðgengilegar/ónothæfar fyrir lyklaborðsnotendur og notendur hjálpartækni, eða að minnsta kosti gera órökrétta heildar fókusröð. Í þessum tilvikum skaltu íhuga að nota valmynd í staðinn.

Valmöguleikar

Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-, eins og í data-animation="".

Athugaðu að af öryggisástæðum er ekki hægt að útvega sanitize, sanitizeFnog whiteListvalkostina með því að nota gagnaeiginleika.

Nafn Tegund Sjálfgefið Lýsing
fjör Boolean satt Notaðu CSS fade umskipti á popover
ílát strengur | þáttur | rangt rangt

Bætir sprettiglugganum við ákveðinn þátt. Dæmi: container: 'body'. Þessi valkostur er sérstaklega gagnlegur þar sem hann gerir þér kleift að staðsetja sprettigluggann í flæði skjalsins nálægt kveikjueiningunni - sem kemur í veg fyrir að sprettigluggan svífi í burtu frá kveikjuhlutanum meðan á stærð gluggans er breytt.
efni strengur | þáttur | virka ''

Sjálfgefið innihaldsgildi ef data-contenteigind er ekki til staðar.

Ef fall er gefið upp verður það kallað með thistilvísuninni stillt á þáttinn sem popover er tengdur við.
seinkun númer | mótmæla 0

Seinkun á að sýna og fela sprettigluggann (ms) - á ekki við um handvirka kveikjugerð

Ef númer er gefið upp er seinkun beitt á bæði fela/sýna

Uppbygging hlutar er:delay: { "show": 500, "hide": 100 }
html Boolean rangt Settu HTML inn í popover. Ef það er rangt verður textaðferð jQuery notuð til að setja efni inn í DOM. Notaðu texta ef þú hefur áhyggjur af XSS árásum.
staðsetningu strengur | virka 'rétt'

Hvernig á að staðsetja popover - sjálfvirkt | efst | botn | vinstri | rétt.
Þegar autoþað er tilgreint mun það breyta sprettiglugganum á virkan hátt.

Þegar fall er notað til að ákvarða staðsetninguna er það kallað með popover DOM hnútinn sem fyrstu röksemd og kveikjuþáttinn DOM hnútinn sem seinni. Samhengið thiser stillt á popover tilvikið.
veljara strengur | rangt rangt Ef valkostur er til staðar verða sprettigluggar hlutir framseldir til tilgreindra skotmarka. Í reynd er þetta notað til að gera kraftmiklu HTML efni kleift að bæta við sprettigluggum. Sjá þetta og fróðlegt dæmi .
sniðmát strengur '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Grunn HTML til að nota þegar þú býrð til popover.

Popoverinu titleverður sprautað inn í .popover-header.

Popoverinu contentverður sprautað inn í .popover-body.

.arrowverður ör popoversins.

Ysta umbúðaþátturinn ætti að hafa .popoverflokkinn.
titill strengur | þáttur | virka ''

Sjálfgefið titilgildi ef titleeigind er ekki til staðar.

Ef fall er gefið upp verður það kallað með thistilvísuninni stillt á þáttinn sem popover er tengdur við.
kveikja strengur 'smellur' Hvernig popover er kveikt - smelltu á | sveima | fókus | handbók. Þú gætir farið framhjá mörgum kveikjum; aðskilja þá með bili. manualekki hægt að sameina með neinum öðrum kveikjum.
á móti númer | strengur 0 Jöfnun á popover miðað við markmið hans. Frekari upplýsingar er að finna í offset skjölum Popper.js .
fallbackStaðsetning strengur | fylki 'flipa' Leyfa að tilgreina hvaða stöðu Popper mun nota á fallback. Nánari upplýsingar er að finna í hegðunarskjölum Popper.js
mörk strengur | þáttur 'scrollParent' Yfirfallsþvingunarmörk sprettigluggans. Samþykkir gildin 'viewport', 'window', 'scrollParent', eða HTMLElement tilvísun (aðeins JavaScript). Nánari upplýsingar er að finna í preventOverflow skjölum Popper.js .
sótthreinsa Boolean satt Virkja eða slökkva á hreinsun. Ef virkjað 'template', 'content'og 'title'valkostir verða sótthreinsaðir.
hvítlisti mótmæla Sjálfgefið gildi Hlutur sem inniheldur leyfilega eiginleika og merki
hreinsaFn núll | virka núll Hér getur þú útvegað þína eigin sótthreinsunaraðgerð. Þetta getur verið gagnlegt ef þú vilt frekar nota sérstakt bókasafn til að framkvæma hreinsun.
popperConfig núll | mótmæla núll Til að breyta sjálfgefna Popper.js stillingu Bootstrap, sjáðu stillingar Popper.js

Gagnaeiginleikar fyrir einstaka sprettiglugga

Að öðrum kosti er hægt að tilgreina valkosti fyrir einstaka sprettiglugga með því að nota gagnaeiginleika, eins og útskýrt er hér að ofan.

Aðferðir

Ósamstilltar aðferðir og umskipti

Allar API aðferðir eru ósamstilltar og hefja umskipti . Þeir snúa aftur til þess sem hringir um leið og umskiptin eru hafin en áður en þeim lýkur . Að auki verður aðferðakall á umbreytingarhluta hunsað .

Sjá JavaScript skjölin okkar fyrir frekari upplýsingar .

$().popover(options)

Frumstillir sprettiglugga fyrir þáttasafn.

.popover('show')

Sýnir popover frumefnis. Snýr aftur til þess sem hringir áður en sprettigluggan hefur verið sýnd (þ.e. áður en shown.bs.popoveratburðurinn á sér stað). Þetta er talið „handvirk“ kveikja á popover. Popovers þar sem titill og innihald eru bæði núll lengd birtast aldrei.

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

.popover('hide')

Felur sprettiglugga frumefnis. Snýr aftur til þess sem hringir áður en popover hefur verið falið (þ.e. áður en hidden.bs.popoveratburðurinn á sér stað). Þetta er talið „handvirk“ kveikja á popover.

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

.popover('toggle')

Kveikir á sprettiglugga frumefnis. Snýr aftur til þess sem hringir áður en sprettigluggan hefur verið sýnd eða falin (þ.e. áður en atburðurinn shown.bs.popovereða hidden.bs.popoverá sér stað). Þetta er talið „handvirk“ kveikja á popover.

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

.popover('dispose')

Felur og eyðileggur popover frumefnis. Popovers sem nota úthlutun (sem eru búnar til með valmöguleikanum selector) er ekki hægt að eyða hver fyrir sig á afkvæma kveikjuþáttum.

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

.popover('enable')

Gefur popover frumefnis möguleika á að vera sýndur. Popovers er sjálfgefið virkt.

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

.popover('disable')

Fjarlægir möguleikann á að sprettiglugga frumefnis sé sýnt. Aðeins er hægt að sýna sprettigluggann ef hann er virkjaður aftur.

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

.popover('toggleEnabled')

Skiptir um möguleikann á að sprettiglugga frumefnis sé sýnt eða falið.

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

.popover('update')

Uppfærir staðsetningu sprettiglugga frumefnis.

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

Viðburðir

Tegund viðburðar Lýsing
show.bs.poppover Þetta atvik ræsir strax þegar showtilviksaðferðin er kölluð.
sýnd.bs.poppover Þessi atburður er ræstur þegar sprettiglugginn hefur verið gerður sýnilegur notanda (mun bíða eftir að CSS umbreytingum ljúki).
fela.bs.poppover Þessi atburður er ræstur strax þegar hidetilviksaðferðin hefur verið kölluð.
falinn.bs.poppover Þessi atburður er ræstur þegar búið er að fela sprettigluggann fyrir notandanum (bíður eftir að CSS umbreytingum ljúki).
settur.bs.poppover Þessi atburður er rekinn eftir show.bs.popoveratburðinn þegar popover sniðmátinu hefur verið bætt við DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})