Source

Popovers

Dogfennaeth ac enghreifftiau ar gyfer ychwanegu popovers Bootstrap, fel y rhai a geir yn iOS, at unrhyw elfen ar eich gwefan.

Trosolwg

Pethau i'w gwybod wrth ddefnyddio'r ategyn popover:

  • Mae Popovers yn dibynnu ar Popper.js llyfrgell 3ydd parti ar gyfer lleoli. Rhaid i chi gynnwys popper.min.js cyn bootstrap.js neu use bootstrap.bundle.min.js/ bootstrap.bundle.jssy'n cynnwys Popper.js er mwyn i popovers weithio!
  • Mae Popovers angen yr ategyn tooltip fel dibyniaeth.
  • Os ydych chi'n adeiladu ein JavaScript o'r ffynhonnell, mae angenutil.js .
  • Mae popovers yn optio i mewn am resymau perfformiad, felly mae'n rhaid i chi eu cychwyn eich hun .
  • Ni fydd sero-hyd titlea contentgwerthoedd byth yn dangos popover.
  • Nodwch container: 'body'er mwyn osgoi problemau rendro mewn cydrannau mwy cymhleth (fel ein grwpiau mewnbwn, grwpiau botwm, ac ati).
  • Ni fydd sbarduno popovers ar elfennau cudd yn gweithio.
  • Rhaid sbarduno popovers ar gyfer .disabledneu disabledelfennau ar elfen lapio.
  • Pan gânt eu hysgogi o angorau sy'n lapio ar draws llinellau lluosog, bydd popovers yn cael eu canoli rhwng lled cyffredinol yr angorau. Defnyddiwch .text-nowrapar eich <a>s i osgoi'r ymddygiad hwn.
  • Rhaid cuddio popovers cyn i'w elfennau cyfatebol gael eu tynnu o'r DOM.

Daliwch ati i ddarllen i weld sut mae popovers yn gweithio gyda rhai enghreifftiau.

Enghraifft: Galluogi popovers ym mhobman

Un ffordd o gychwyn pob popover ar dudalen fyddai eu dewis yn ôl eu data-togglepriodoledd:

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

Enghraifft: Defnyddio'r containeropsiwn

Pan fydd gennych rai arddulliau ar elfen rhiant sy'n ymyrryd â popover, byddwch am nodi arferiad containerfel bod HTML y popover yn ymddangos o fewn yr elfen honno yn lle hynny.

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

Enghraifft

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

Pedwar cyfeiriad

Mae pedwar opsiwn ar gael: aliniad uchaf, dde, gwaelod a chwith.

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

Diystyru ar y clic nesaf

Defnyddiwch y focussbardun i ddiystyru popovers ar glic nesaf y defnyddiwr ar elfen wahanol i'r elfen togl.

Mae angen marcio penodol ar gyfer diswyddo-ar-glic nesaf

Ar gyfer ymddygiad traws-borwr a thraws-lwyfan priodol, rhaid i chi ddefnyddio'r <a>tag, nid y <button>tag, a rhaid i chi hefyd gynnwys tabindexpriodoledd.

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

Elfennau anabl

Nid yw elfennau gyda'r disabledpriodoledd yn rhyngweithiol, sy'n golygu na all defnyddwyr hofran na chlicio arnynt i sbarduno popover (neu gyngor). Fel ateb, byddwch chi eisiau sbarduno'r popover o ddeunydd lapio <div>neu <span>a diystyru'r pointer-eventselfen anabl.

Ar gyfer sbardunau popover anabl, efallai y byddai'n well gennych hefyd data-trigger="hover"fel bod y popover yn ymddangos fel adborth gweledol uniongyrchol i'ch defnyddwyr oherwydd efallai na fyddant yn disgwyl clicio ar elfen anabl.

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

Defnydd

Galluogi popovers trwy JavaScript:

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

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-animation="".

Enw Math Diofyn Disgrifiad
animeiddiad boolaidd gwir Cymhwyso trawsnewidiad pylu CSS i'r popover
cynhwysydd llinyn | elfen | ffug ffug

Yn atodi'r popover i elfen benodol. Enghraifft: container: 'body'. Mae'r opsiwn hwn yn arbennig o ddefnyddiol gan ei fod yn caniatáu ichi osod y popover yn llif y ddogfen ger yr elfen sbarduno - a fydd yn atal y popover rhag arnofio i ffwrdd o'r elfen sbarduno yn ystod newid maint ffenestr.
cynnwys llinyn | elfen | swyddogaeth ''

Gwerth cynnwys diofyn os data-contentnad yw'r briodwedd yn bresennol.

Os rhoddir ffwythiant, fe'i gelwir gyda'i thisset gyfeirnod i'r elfen y mae'r popover ynghlwm wrthi.
oedi rhif | gwrthrych 0

Oedi wrth ddangos a chuddio'r popover (ms) - nid yw'n berthnasol i'r math sbardun â llaw

Os bydd rhif yn cael ei gyflenwi, bydd oedi yn cael ei gymhwyso i'r ddwy guddfan/sioe

Strwythur gwrthrych yw:delay: { "show": 500, "hide": 100 }
html boolaidd ffug Mewnosod HTML yn y popover. Os yw'n ffug, textbydd dull jQuery yn cael ei ddefnyddio i fewnosod cynnwys yn y DOM. Defnyddiwch destun os ydych chi'n poeni am ymosodiadau XSS.
lleoliad llinyn | swyddogaeth 'iawn'

Sut i leoli'r popover - auto | brig | gwaelod | chwith | iawn.
Pan gaiff autoei nodi, bydd yn ailgyfeirio'r popover yn ddeinamig.

Pan ddefnyddir swyddogaeth i benderfynu ar y lleoliad, fe'i gelwir gyda'r nod DOM popover fel ei ddadl gyntaf a'r elfen sbarduno nod DOM fel ei ail. Mae'r thiscyd-destun wedi'i osod i'r enghraifft popover.
detholwr llinyn | ffug ffug Os darperir dewisydd, bydd gwrthrychau popover yn cael eu dirprwyo i'r targedau penodedig. Yn ymarferol, defnyddir hwn i alluogi cynnwys HTML deinamig i ychwanegu popovers. Gweler hyn ac enghraifft llawn gwybodaeth .
templed llinyn '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Sylfaen HTML i'w ddefnyddio wrth greu'r popover.

Bydd y popover's titleyn cael ei chwistrellu i mewn i'r .popover-header.

Bydd y popover's contentyn cael ei chwistrellu i mewn i'r .popover-body.

.arrowbydd yn dod yn saeth y popover yn.

Dylai'r elfen lapio allanol fod â'r .popoverdosbarth.
teitl llinyn | elfen | swyddogaeth ''

Gwerth teitl diofyn os titlenad yw'r briodwedd yn bresennol.

Os rhoddir ffwythiant, fe'i gelwir gyda'i thisset gyfeirnod i'r elfen y mae'r popover ynghlwm wrthi.
sbardun llinyn 'cliciwch' Sut mae popover yn cael ei sbarduno - cliciwch | hofran | ffocws | llaw. Efallai y byddwch yn pasio sbardunau lluosog; eu gwahanu â gofod. manualni ellir ei gyfuno ag unrhyw sbardun arall.
gwrthbwyso rhif | llinyn 0 Gwrthbwyso'r popover o'i gymharu â'i darged. Am ragor o wybodaeth cyfeiriwch at ddogfennau gwrthbwyso Popper.js .
Lleoliad wrth gefn llinyn | arae 'fflip' Caniatewch i nodi pa safle y bydd Popper yn ei ddefnyddio wrth gefn. Am ragor o wybodaeth cyfeiriwch at ddogfennau ymddygiad Popper.js
ffin llinyn | elfen 'Sgrolio Rhiant' Ffin cyfyngiad gorlif y popover. Yn derbyn gwerthoedd 'viewport', 'window', 'scrollParent', neu gyfeirnod HTMLElement (JavaScript yn unig). I gael rhagor o wybodaeth, cyfeiriwch at ddogfennau preventOverflow Popper.js .

Priodoleddau data ar gyfer popovers unigol

Fel arall, gellir pennu opsiynau ar gyfer popovers unigol trwy ddefnyddio priodoleddau data, fel yr eglurir uchod.

Dulliau

Dulliau a thrawsnewidiadau anghydamserol

Mae pob dull API yn anghydamserol ac yn dechrau trawsnewid . Maen nhw'n dychwelyd at y galwr cyn gynted ag y bydd y cyfnod pontio wedi dechrau ond cyn iddo ddod i ben . Yn ogystal, bydd galwad dull ar gydran trawsnewid yn cael ei anwybyddu .

Gweler ein dogfennaeth JavaScript am ragor o wybodaeth.

$().popover(options)

Yn cychwyn popovers ar gyfer casgliad elfennau.

.popover('show')

Yn datgelu popover elfen. Yn dychwelyd i'r galwr cyn i'r popover gael ei ddangos (hy cyn i'r shown.bs.popoverdigwyddiad ddigwydd). Mae hwn yn cael ei ystyried yn sbardun “â llaw” o'r popover. Nid yw popovers y mae eu teitl a'u cynnwys o hyd sero byth yn cael eu harddangos.

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

.popover('hide')

Yn cuddio popover elfen. Yn dychwelyd i'r galwr cyn i'r popover gael ei guddio (hy cyn i'r hidden.bs.popoverdigwyddiad ddigwydd). Mae hwn yn cael ei ystyried yn sbardun “â llaw” o'r popover.

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

.popover('toggle')

Toglo popover elfen. Yn dychwelyd i'r galwr cyn i'r popover gael ei ddangos neu ei guddio (hy cyn i'r digwyddiad shown.bs.popoverneu'r hidden.bs.popoverdigwyddiad ddigwydd). Mae hwn yn cael ei ystyried yn sbardun “â llaw” o'r popover.

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

.popover('dispose')

Yn cuddio ac yn dinistrio popover elfen. Ni all popovers sy'n defnyddio dirprwyo (sy'n cael eu creu gan ddefnyddio'r opsiwnselector ) gael eu dinistrio'n unigol ar elfennau sbardun disgynyddion .

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

.popover('enable')

Yn rhoi'r gallu i popover elfen gael ei ddangos. Mae popovers yn cael eu galluogi yn ddiofyn.

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

.popover('disable')

Yn dileu'r gallu i ddangos popover elfen. Dim ond os caiff ei ail-alluogi y bydd y popover yn gallu cael ei ddangos.

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

.popover('toggleEnabled')

Toglo'r gallu i popover elfen gael ei ddangos neu ei guddio.

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

.popover('update')

Yn diweddaru lleoliad popover elfen.

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

Digwyddiadau

Math o Ddigwyddiad Disgrifiad
sioe.bs.popover Mae'r digwyddiad hwn yn tanio ar unwaith pan showelwir y dull enghraifft.
dangos.bs.popover Mae'r digwyddiad hwn yn cael ei danio pan fydd y popover wedi'i wneud yn weladwy i'r defnyddiwr (bydd yn aros i'r trawsnewidiadau CSS gael eu cwblhau).
cudd.bs.popover Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y hidedull enghraifft wedi'i alw.
cudd.bs.popover Mae'r digwyddiad hwn yn cael ei danio pan fydd y popover wedi gorffen cael ei guddio rhag y defnyddiwr (bydd yn aros i'r trawsnewidiadau CSS gael eu cwblhau).
mewnosod.bs.popover Mae'r digwyddiad hwn yn cael ei danio ar ôl y show.bs.popoverdigwyddiad pan fydd y templed popover wedi'i ychwanegu at y DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})