Source

Popovers

Sgrìobhainnean agus eisimpleirean airson popovers Bootstrap, mar an fheadhainn a lorgar ann an iOS, a chur ri eileamaid sam bith air an làrach agad.

Ro-shealladh

Rudan ri fios nuair a chleachdas tu am plugan popover:

  • Bidh Popovers an urra ri leabharlann treas pàrtaidh Popper.js airson a shuidheachadh. Feumaidh tu popper.min.js a thoirt a-steach ro bootstrap.js no cleachd bootstrap.bundle.min.js/ bootstrap.bundle.jsanns a bheil Popper.js gus am bi popovers ag obair!
  • Feumaidh Popovers am plugan Tooltip mar eisimeileachd.
  • Ma tha thu a’ togail ar JavaScript bhon tùs, feumaidhutil.js e .
  • Tha Popovers a’ roghnachadh a-steach airson adhbharan coileanaidh, agus mar sin feumaidh tu iad fhèin a thòiseachadh .
  • Cha nochd fad titleagus contentluachan neoni gu bràth.
  • Sònraich container: 'body'gus duilgheadasan tairgse a sheachnadh ann am pàirtean nas iom-fhillte (mar ar buidhnean cuir a-steach, buidhnean putan, msaa).
  • Chan obraich a bhith ag adhbhrachadh popovers air eileamaidean falaichte.
  • Feumaidh popovers airson .disabledno disabledeileamaidean a bhith air am piobrachadh air eileamaid còmhdaich.
  • Nuair a thèid a bhrosnachadh bho acraichean a bhios a’ cuairteachadh thairis air grunn loidhnichean, bidh popovers stèidhichte eadar leud iomlan nan acraichean. Cleachd .text-nowrapair do chuid <a>gus an giùlan seo a sheachnadh.
  • Feumaidh popovers a bhith falaichte mus tèid na h-eileamaidean co-fhreagarrach aca a thoirt air falbh bhon DOM.

Cùm a’ leughadh gus faicinn mar a bhios popovers ag obair le eisimpleirean.

Eisimpleir: Dèan comas air popovers anns a h-uile àite

Is e aon dòigh air a h-uile popovers air duilleag a thòiseachadh a bhith gan taghadh a rèir am data-togglefeart:

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

Eisimpleir: A 'cleachdadh an containerroghainn

Nuair a bhios cuid de stoidhlichean agad air eileamaid phàrant a chuireas bacadh air popover, bidh thu airson cleachdadh a shònrachadh containergus am bi HTML an popover a’ nochdadh taobh a-staigh an eileamaid sin na àite.

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

eisimpleir

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

Ceithir stiùiridhean

Tha ceithir roghainnean rim faighinn: gu h-àrd, deas, gu h-ìosal agus air an taobh chlì.

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

Cuir às don ath bhriogadh

Cleachd an inneal- focusbrosnachaidh gus popovers a chuir às air an ath bhriogadh aig an neach-cleachdaidh air eileamaid eile seach an eileamaid toggle.

Comharrachadh sònraichte a dhìth airson cuir às-air-an ath-bhriog

Airson giùlan ceart thar-bhrabhsair agus tar-àrd-ùrlar, feumaidh tu an <a>taga a chleachdadh, chan e an <button>taga, agus feumaidh tu feart a tabindexthoirt a-steach cuideachd.

Popover air a chuir às 
<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'
})

Eileamaidean ciorramach

Chan eil na h-eileamaidean leis a’ disabledfheart eadar-ghnìomhach, a’ ciallachadh nach urrainn do luchd-cleachdaidh gluasad thairis no briogadh orra gus popover (no tooltip) a bhrosnachadh. Mar fhuasgladh obrach, bidh thu airson an popover a bhrosnachadh bho phasgan <div>no <span>agus a dhol thairis pointer-eventsair an eileamaid ciorramach.

Airson luchd-brosnachaidh popover ciorramach, is dòcha gum b’ fheàrr leat cuideachd data-trigger="hover"gus am bi am popover a’ nochdadh mar fhios air ais lèirsinneach sa bhad don luchd-cleachdaidh agad oir is dòcha nach bi dùil aca cliogadh air eileamaid ciorramach.

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

Cleachdadh

Dèan comas air popovers tro JavaScript:

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

Roghainnean

Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-, mar ann an data-animation="".

Ainm Seòrsa Deònach Tuairisgeul
beothachadh boolean fìor Cuir a-steach eadar-ghluasad caol CSS chun popover
soitheach sreang | eileamaid | breugach breugach

A’ ceangal an popover ri eileamaid shònraichte. Eisimpleir: container: 'body'. Tha an roghainn seo gu sònraichte feumail leis gu bheil e a’ toirt cothrom dhut an popover a shuidheachadh ann an sruthadh na sgrìobhainn faisg air an eileamaid brosnachaidh - a chuireas casg air a’ popover bho bhith a’ seòladh air falbh bhon eileamaid brosnachaidh rè ath-mheudachadh uinneig.
susbaint sreang | eileamaid | gnìomh ''

Luach bunaiteach an t-susbaint mura h data-content-eil am feart an làthair.

Ma thèid gnìomh a thoirt seachad, thèid a ghairm leis an t- thisseata iomraidh aige air an eileamaid ris a bheil am popover ceangailte.
dàil àireamh | nì 0

Dàil a’ sealltainn agus a’ falach an popover (ms) - chan eil sin a’ buntainn ri seòrsa brosnachaidh làimhe

Ma thèid àireamh a thoirt seachad, thèid dàil a chuir air an dà sheiche / taisbeanadh

Tha structar an nì:delay: { "show": 500, "hide": 100 }
html boolean breugach Cuir a-steach HTML a-steach don popover. Ma tha e ceàrr, textthèid modh jQuery a chleachdadh gus susbaint a chuir a-steach don DOM. Cleachd teacsa ma tha dragh ort mu ionnsaighean XSS.
suidheachadh sreang | gnìomh 'deas'

Mar a shuidhicheas tu am popover - auto | mullach | bun | clì | deas.
Nuair a thèid autoa shònrachadh, bidh e ag ath-stiùireadh an popover gu dinamach.

Nuair a thèid gnìomh a chleachdadh gus an suidheachadh a dhearbhadh, canar ris an nód popover DOM mar a’ chiad argamaid aige agus an eileamaid brosnachaidh nód DOM mar an dàrna fear. Tha an co- thistheacsa air a shuidheachadh don eisimpleir popover.
roghnaiche sreang | breugach breugach Ma thèid neach-taghaidh a thoirt seachad, thèid nithean popover a thiomnadh gu na targaidean ainmichte. Ann an cleachdadh, tha seo air a chleachdadh gus leigeil le susbaint HTML fiùghantach popovers a chuir ris. Faic seo agus eisimpleir fiosrachail .
teamplaid sreang '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Bunait HTML ri chleachdadh nuair a chruthaicheas tu am popover.

Thèid na popovers titlea thoirt a-steach don fhaidhle .popover-header.

Thèid na popovers contenta thoirt a-steach don fhaidhle .popover-body.

.arrowbidh e na shaighead an popover.

Bu chòir gum biodh an .popoverclas aig an eileamaid còmhdaich as fhaide a-muigh.
tiotal sreang | eileamaid | gnìomh ''

Luach an tiotail bunaiteach mura h title-eil am feart an làthair.

Ma thèid gnìomh a thoirt seachad, thèid a ghairm leis an t- thisseata iomraidh aige air an eileamaid ris a bheil am popover ceangailte.
spreidh sreang 'cliog' Mar a thèid popover a bhrosnachadh - cliog | seachain | fòcas | làimhe. Faodaidh tu a dhol seachad air ioma-tharraing; dealachadh riu le àite. manualchan urrainnear a chur còmhla ri inneal brosnachaidh sam bith eile.
dheth àireamh | sreang 0 Cuir dheth an popover an coimeas ris an targaid aige. Airson tuilleadh fiosrachaidh thoir sùil air na docaichean dheth Popper.js .
Suidheachadh tuiteam air ais sreang | eagar 'flip' Leig le sònrachadh dè an suidheachadh a chleachdas Popper nuair a thig e air ais. Airson tuilleadh fiosrachaidh thoir sùil air na docaichean giùlain aig Popper.js
crìoch sreang | eileamaid 'scrollParent' Crìochan casg thar-shruth den popover. A’ gabhail ri luachan 'viewport', 'window', , 'scrollParent', no iomradh HTMLElement (JavaScript a-mhàin). Airson tuilleadh fiosrachaidh thoir sùil air na docaichean preventOverflow aig Popper.js .

Feartan dàta airson popovers fa leth

Faodar roghainnean airson popovers fa leth a shònrachadh tro bhith a’ cleachdadh buadhan dàta, mar a chaidh a mhìneachadh gu h-àrd.

Dòighean-obrach

Modhan asyncronach agus eadar-ghluasadan

Tha a h-uile modh API asyncronach agus tòisichidh iad air eadar- ghluasad . Bidh iad a’ tilleadh chun neach-fios cho luath ‘s a thòisicheas an gluasad ach mus tig e gu crìch . A bharrachd air an sin, cha tèid aire a thoirt do ghairm modh air pàirt gluasaid .

Faic na sgrìobhainnean JavaScript againn airson tuilleadh fiosrachaidh.

$().popover(options)

A’ tòiseachadh popovers airson cruinneachadh eileamaidean.

.popover('show')

A’ nochdadh popover eileamaid. Tilleadh chun neach-fios mus deach an popover a nochdadh (ie mus tachair an shown.bs.popovertachartas). Thathas den bheachd gu bheil seo na bhrosnachadh “làmh-làimhe” den popover. Chan eil popovers aig a bheil an dà chuid tiotal agus susbaint fad neoni air an taisbeanadh gu bràth.

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

.popover('hide')

A 'falach popover eileamaid. Tillidh e chun neach-fios mus bi an popover falaichte (ie mus tachair an hidden.bs.popovertachartas). Thathas den bheachd gu bheil seo na bhrosnachadh “làmh-làimhe” den popover.

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

.popover('toggle')

Toglaidh popover eileamaid. Tillidh e chun neach-fios mus deach an popover a shealltainn no fhalachshown.bs.popover ( ie mus tachair an hidden.bs.popovertachartas). Thathas den bheachd gu bheil seo na bhrosnachadh “làmh-làimhe” den popover.

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

.popover('dispose')

A 'falach agus a' sgrios popover eileamaid. Chan urrainnear popovers a chleachdas tiomnadh (a tha air an cruthachadh leis an selectorroghainn ) a sgrios leotha fhèin air eileamaidean brosnachaidh sliochd.

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

.popover('enable')

A’ toirt comas do popover eileamaid a bhith air a shealltainn. Tha popovers air an comasachadh gu bunaiteach.

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

.popover('disable')

A’ toirt air falbh comas popover eileamaid a shealltainn. Cha bhith e comasach am popover a shealltainn ach ma thèid a chomasachadh a-rithist.

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

.popover('toggleEnabled')

Togaidh seo comas popover eileamaid a shealltainn no fhalach.

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

.popover('update')

Ag ùrachadh suidheachadh popover eileamaid.

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

Tachartasan

Seòrsa Tachartas Tuairisgeul
seall.bs.popover Bidh an tachartas seo a’ losgadh sa bhad nuair showa chanar ris an dòigh eisimpleir.
air a shealltainn.bs.popover Thèid an tachartas seo a losgadh nuair a bhios an popover ri fhaicinn don neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh).
seiche.bs.popover Thèid an tachartas seo a losgadh sa bhad nuair a chaidh an hidedòigh eisimpleir a ghairm.
falaichte.bs.popover Thèid an tachartas seo a losgadh nuair a tha an popover deiseil a bhith falaichte bhon neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh).
a-steach.bs.popover Thèid an tachartas seo a losgadh às deidh an show.bs.popovertachartais nuair a chaidh an teamplaid popover a chuir ris an DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})