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 ris an leabharlann treas pàrtaidh Popper 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 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.
• Faodar popovers a phiobrachadh le taing do eileamaid taobh a-staigh sgàil 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="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>

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.

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

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

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

Dòighean-obrach

$().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 tiotal agus an t-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

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