Popovers

Iwe ati awọn apẹẹrẹ fun fifi awọn agbejade Bootstrap kun, bii awọn ti a rii ni iOS, si eyikeyi eroja lori aaye rẹ.

Akopọ

Awọn nkan lati mọ nigba lilo ohun itanna popover:

• Popovers gbarale ile-ikawe ẹgbẹ kẹta Popper.js fun ipo. O gbọdọ ni popper.min.js ṣaaju ki bootstrap.js tabi lo bootstrap.bundle.min.js/ bootstrap.bundle.jseyiti o ni Popper.js ni ibere fun awọn agbejade lati ṣiṣẹ!
• Popovers nilo ohun itanna ọpa bi igbẹkẹle kan.
• Ti o ba n kọ JavaScript wa lati orisun, o niloutil.js .
• Popovers ti yọkuro fun awọn idi iṣẹ, nitorinaa o gbọdọ ṣe ipilẹṣẹ wọn funrararẹ .
• Gigun odo titleati contentawọn iye kii yoo ṣe afihan agbejade kan.
• Pato container: 'body'lati yago fun awọn iṣoro ṣiṣe ni awọn paati eka diẹ sii (bii awọn ẹgbẹ titẹ sii, awọn ẹgbẹ bọtini, ati bẹbẹ lọ).
• Nfa popovers lori awọn eroja ti o farapamọ kii yoo ṣiṣẹ.
• Popovers fun .disabledtabi disablederoja gbọdọ wa ni jeki on a wrapper ano.
• Nigbati o ba fa lati awọn ìdákọró ti o fi ipari si awọn laini pupọ, awọn popovers yoo wa ni aarin laarin iwọn apapọ awọn ìdákọró. Lo .text-nowraplori rẹ <a>s lati yago fun yi ihuwasi.
• Popovers gbọdọ wa ni pamọ ṣaaju ki o to yọkuro awọn eroja ti o baamu wọn lati DOM.
• Popovers le ti wa ni jeki ọpẹ si ohun ano inu a ojiji DOM.

Jeki kika lati wo bi awọn popovers ṣe n ṣiṣẹ pẹlu awọn apẹẹrẹ diẹ.

Apeere: Mu popovers ṣiṣẹ nibi gbogbo

Ọna kan lati bẹrẹ gbogbo awọn agbejade lori oju-iwe kan yoo jẹ lati yan wọn nipasẹ data-toggleabuda wọn:

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

Apeere: Lilo containeraṣayan

Nigba ti o ba ni diẹ ninu awọn aza lori kan obi ano ti o dabaru pẹlu a popover, o yoo fẹ lati pato kan aṣa containerki HTML popover han laarin ti ano dipo.

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

Apeere

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

Awọn itọnisọna mẹrin

Awọn aṣayan mẹrin wa: oke, ọtun, isalẹ, ati ti osi.

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

Yọọ kuro ni titẹ atẹle

Lo focusokunfa lati yọ awọn popovers kuro lori titẹ atẹle olumulo ti nkan ti o yatọ ju ano 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'
})

Awọn eroja alaabo

Awọn eroja pẹlu disabledẹya kii ṣe ibaraenisepo, afipamo pe awọn olumulo ko le rababa tabi tẹ wọn lati ṣe okunfa agbejade (tabi ohun elo irinṣẹ). Gẹgẹbi iṣẹ-ṣiṣe, iwọ yoo fẹ lati ma ṣe okunfa popover lati inu ohun-iṣọ kan <div>tabi <span>ki o danu pointer-eventslori eroja alaabo naa.

Fun awọn okunfa popover alaabo, o tun le fẹ data-trigger="hover"ki popover naa han bi esi wiwo lẹsẹkẹsẹ si awọn olumulo rẹ nitori wọn le ma nireti lati tẹ lori nkan alaabo kan.

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

Lilo

Mu awọn agbejade ṣiṣẹ nipasẹ JavaScript:

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

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-animation="".

Awọn ọna

$().popover(options)

Initializes popovers fun ohun akojọpọ eroja.

.popover('show')

Ṣe afihan agbejade ano kan. Pada si olupe ṣaaju ki agbejade ti han gangan (ie ṣaaju ki shown.bs.popoveriṣẹlẹ naa to waye). Eyi ni a kà si “afọwọṣe” ti nfa popover. Awọn agbejade ti akọle ati akoonu mejeeji jẹ gigun odo ko han rara.

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

.popover('hide')

Ìbòmọlẹ ohun ano ká popover. Pada si olupe ṣaaju ki agbejade ti farapamọ gangan (ie ṣaaju ki hidden.bs.popoveriṣẹlẹ naa to waye). Eyi ni a kà si “afọwọṣe” ti nfa popover.

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

.popover('toggle')

Yipada ohun ano ká popover. Pada si olupe ṣaaju ki agbejade ti han gangan tabi farapamọ (ie ṣaaju ki iṣẹlẹ shown.bs.popovertabi hidden.bs.popoveriṣẹlẹ to waye). Eyi ni a kà si “afọwọṣe” ti nfa popover.

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

.popover('dispose')

Hides ati ki o run ohun ano ká popover. Popovers ti o lo aṣoju (eyi ti a ṣẹda nipa lilo aṣayan ) selectorko le ṣe iparun ni ẹyọkan lori awọn eroja ti o nfa ọmọ.

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

.popover('enable')

Yoo fun ohun ano ká popover ni agbara lati han. Popovers ti ṣiṣẹ nipasẹ aiyipada.

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

.popover('disable')

Yọ awọn agbara fun ohun ano ká popover lati han. Agbejade naa yoo ni anfani lati han nikan ti o ba tun ṣiṣẹ.

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

.popover('toggleEnabled')

Yipada agbara fun agbejade eroja lati han tabi pamọ.

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

.popover('update')

Ṣe imudojuiwọn ipo agbejade eroja kan.

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

Awọn iṣẹlẹ

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