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

Atriði 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 white-space: 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.

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ólábendingu). 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)

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

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 kviku 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. Ekki er hægt að sameina „handbók“ með neinum öðrum kveikjum.
á móti númer | strengur 0 Jöfnun á popover miðað við markmið hans. Nánari 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 .

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 bæði titill og innihald eru 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 eru sjálfgefið virkjaðir.

$('#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 atburðar Lýsing
show.bs.poppover Þessi atburður 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…
})