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

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

Hunsa við næsta smell

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

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

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

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

Aðferðir

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

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