Source

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ṣẹ ṣiṣe, 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.

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.

Siṣamisi kan pato nilo fun yiyọ kuro-lori-tẹle

Fun aṣawakiri agbelebu ti o tọ ati ihuwasi Syeed, o gbọdọ lo <a>tag, kii ṣe tag <button>, ati pe o tun gbọdọ ni abuda kan tabindex.

Agbejade ti a le yọ kuro 
<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="".

Oruko Iru Aiyipada Apejuwe
iwara boolian ooto Waye iyipada ipare CSS kan si agbejade
eiyan okun | ano | eke eke

Ṣafikun popover si nkan kan pato. Apeere container: 'body':. Aṣayan yii wulo paapaa ni pe o fun ọ laaye lati gbe agbejade ni ṣiṣan ti iwe-ipamọ nitosi nkan ti o nfa - eyiti yoo ṣe idiwọ agbejade lati lilefoofo kuro ni nkan ti o nfa lakoko iwọn window kan.
akoonu okun | ano | iṣẹ ''

Iwọn akoonu aiyipada ti data-contentabuda ko ba si.

Ti iṣẹ kan ba fun, yoo pe pẹlu thisitọkasi ti a ṣeto si nkan ti a so popover si.
idaduro nọmba | nkan 0

Idaduro iṣafihan ati fifipamo popover (ms) - ko kan si iru okunfa afọwọṣe

Ti nọmba kan ba pese, idaduro jẹ lilo si tọju/fihan mejeeji

Eto nkan jẹ:delay: { "show": 500, "hide": 100 }
html boolian eke Fi HTML sinu agbejade. Ti o ba jẹ eke, textọna jQuery yoo ṣee lo lati fi akoonu sii sinu DOM. Lo ọrọ ti o ba ni aniyan nipa awọn ikọlu XSS.
ipo okun | iṣẹ 'ọtun'

Bawo ni lati ipo awọn popover - auto | oke | isalẹ | osi | ọtun.
Nigba ti o ba autowa ni pato, yoo ṣe atunto agbejade naa lainidi.

Nigbati a ba lo iṣẹ kan lati pinnu ipo, o pe pẹlu agbejade DOM agbejade bi ariyanjiyan akọkọ rẹ ati node DOM ti o nfa bi keji rẹ. A thisti ṣeto ọrọ-ọrọ si apẹẹrẹ popover.
yiyan okun | eke eke Ti o ba ti pese oluyan, awọn ohun agbejade yoo jẹ aṣoju si awọn ibi-afẹde ti a pato. Ni iṣe, eyi ni a lo lati mu akoonu HTML ti o ni agbara lati ni afikun awọn agbejade. Wo eyi ati apẹẹrẹ alaye .
awoṣe okun '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

HTML mimọ lati lo nigba ṣiṣẹda popover.

Awọn popover's titleyoo jẹ itasi sinu .popover-header.

Awọn popover's contentyoo jẹ itasi sinu .popover-body.

.arrowyoo di ofa popover.

Awọn outermost wrapper ano yẹ ki o ni awọn .popoverkilasi.
akọle okun | ano | iṣẹ ''

Iwọn akọle aiyipada ti titleẹda ko ba si.

Ti iṣẹ kan ba fun, yoo pe pẹlu thisitọkasi ti a ṣeto si nkan ti a so popover si.
okunfa okun 'tẹ' Bawo ni popover ti wa ni jeki - tẹ | rababa | idojukọ | Afowoyi. O le ṣe ọpọlọpọ awọn okunfa; ya wọn pẹlu aaye kan. manualko le wa ni idapo pelu eyikeyi miiran okunfa.
aiṣedeede nọmba | okun 0 Aiṣedeede ti popover ni ibatan si ibi-afẹde rẹ. Fun alaye diẹ sii tọka si awọn iwe aiṣedeede Popper.js .
fallbackPlacement okun | orun 'isipade' Gba laaye lati pato iru ipo Popper yoo lo lori ipadabọ. Fun alaye diẹ sii tọka si awọn iwe aṣẹ ihuwasi ti Popper.js
ààlà okun | eroja 'yi lọ Obi' Aponsedanu ihamọ aala ti popover. Gba awọn iye ti 'viewport', 'window', 'scrollParent', tabi itọkasi HTMLElement (JavaScript nikan). Fun alaye diẹ sii tọka si Popper.js's preventOverflow docs .

Data eroja fun olukuluku popovers

Awọn aṣayan fun awọn agbejade kọọkan le jẹ iyasọtọ nipasẹ lilo awọn abuda data, bi a ti salaye loke.

Awọn ọna

Awọn ọna Asynchronous ati awọn iyipada

Gbogbo awọn ọna API jẹ asynchronous ati bẹrẹ iyipada kan . Wọn pada si ọdọ olupe ni kete ti iyipada ti bẹrẹ ṣugbọn ṣaaju ki o to pari . Ni afikun, ipe ọna kan lori paati iyipada yoo jẹ kọbikita .

Wo iwe JavaScript wa fun alaye diẹ sii.

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

Iṣẹlẹ Iru Apejuwe
fihan.bs.popover Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn showapẹẹrẹ ọna ti a npe ni.
han.bs.popover Iṣẹlẹ yii jẹ ina nigbati popover ti jẹ ki o han si olumulo (yoo duro fun awọn iyipada CSS lati pari).
tọju.bs.popover Iṣẹlẹ yii jẹ ina lẹsẹkẹsẹ nigbati ọna hideapẹẹrẹ ti pe.
farasin.bs.popover Iṣẹlẹ yii jẹ ina nigbati agbejade ba ti pari fifipamọ lati ọdọ olumulo (yoo duro fun awọn iyipada CSS lati pari).
ti a fi sii.bs.popover Iṣẹlẹ yii jẹ ina lẹhin show.bs.popoveriṣẹlẹ naa nigbati a ti ṣafikun awoṣe popover si DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})