Popovers
Doiciméadú agus samplaí chun popovers Bootstrap, cosúil leis na cinn a fhaightear in iOS, a chur le haon eilimint ar do shuíomh.
Forbhreathnú
Rudaí le fios agus an breiseán popover in úsáid:
- Bíonn Popovers ag brath ar Phopper na leabharlainne 3ú páirtí le haghaidh suímh. Ní mór duit popper.min.js a chur san áireamh roimh bootstrap.js nó úsáid
bootstrap.bundle.min.js
/bootstrap.bundle.js
ina bhfuil Popper le go n-oibreoidh popovers! - Éilíonn Popovers an breiseán tooltip mar spleáchas.
- Má tá ár JavaScript á thógáil agat ón bhfoinse, teastaíonn
util.js
. - Tá Popovers rogha an diúltaithe ar chúiseanna feidhmíochta, mar sin ní mór duit a thúsú iad féin .
- Ní thaispeánfaidh fad náid
title
nácontent
luachanna aon aníos choíche. - Sonraigh
container: 'body'
chun fadhbanna rindreála a sheachaint i gcomhpháirteanna níos casta (amhail ár ngrúpaí ionchuir, grúpaí cnaipí, srl). - Ní oibreofar popovers ar eilimintí ceilte.
- Ní mór popovers
.disabled
nódisabled
eilimintí a spreagadh ar eilimint chumhdaigh. - Nuair a spreagtar iad ó ancairí a théann trasna línte iolracha, díreofar na popovers idir leithead iomlán na n-ancairí. Bain úsáid as
.text-nowrap
ar do<a>
chuid chun an iompar seo a sheachaint. - Ní mór popovers a chur i bhfolach sula mbaintear na heilimintí comhfhreagracha as an DOM.
- Is féidir popovers a spreagadh a bhuíochas le eilimint taobh istigh de scáth DOM.
prefers-reduced-motion
cheist na meán. Féach an
rannán tairiscint laghdaithe dár gcáipéisíocht inrochtaineachta .
Lean ort ag léamh chun a fheiceáil conas a oibríonn popovers le roinnt samplaí.
Sampla: Cumasaigh popovers i ngach áit
Bealach amháin chun na míreanna popover ar leathanach a thosú ná iad a roghnú de réir a n- data-toggle
tréith:
$(function () {
$('[data-toggle="popover"]').popover()
})
Sampla: Ag baint úsáide as an container
rogha
Nuair a bhíonn roinnt stíleanna agat ar eilimint tuismitheora a chuireann isteach ar theacht aníos, beidh tú ag iarraidh saincheaptha a shonrú container
ionas go bhfeicfear HTML an popover laistigh den eilimint sin ina ionad sin.
$(function () {
$('.example-popover').popover({
container: 'body'
})
})
Sampla
<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>
Ceithre threoir
Tá ceithre rogha ar fáil: ailíniú barr, dheis, bun agus clé.
<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>
Ruaig an chéad chliceáil eile
Úsáid an focus
truicear chun popovers a dhíbhe ar an gcéad chliceáil eile ar eilimint eile seachas an eilimint scoránaigh.
Marcáil shonrach ag teastáil le haghaidh díbhe-ar-chliceáil eile
Le haghaidh iompar ceart trasbhrabhsálaí agus tras-ardáin, ní mór duit an chlib a úsáid <a>
, ní an <button>
chlib, agus ní mór duit tabindex
tréith a chur san áireamh freisin.
<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'
})
Eilimintí faoi mhíchumas
Níl na heilimintí leis an disabled
tréith idirghníomhach, rud a chiallaíonn nach féidir le húsáideoirí a bheith ag foluain nó cliceáil orthu chun aníos (nó leid uirlisí) a spreagadh. Mar réiteach oibre, beidh tú ag iarraidh an popover a spreagadh ó fhillteán <div>
nó an eilimint atá faoi mhíchumas a <span>
shárú .pointer-events
Maidir le truicear aníos aníos faoi mhíchumas, b’fhéidir gurbh fhearr leat freisin data-trigger="hover"
ionas go bhfeicfear an aníos mar aiseolas amhairc láithreach do d’úsáideoirí mar go mb’fhéidir nach mbeidís ag súil le cliceáil ar eilimint díchumasaithe.
<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>
Úsáid
Cumasaigh popovers trí JavaScript:
$('#example').popover(options)
Luasghéarú GPU
Uaireanta is cosúil go mbíonn popovers doiléir ar ghléasanna Windows 10 mar gheall ar luasghéarú GPU agus DPI córas modhnaithe. Is é an réiteach le haghaidh seo in v4 ná luasghéarú GPU a dhíchumasú mar is gá ar do popovers.
Ceartúchán molta:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
Oibríonn popovers a dhéanamh d'úsáideoirí méarchláir agus teicneolaíochta cúnta
Chun gur féidir le húsáideoirí méarchláir do chuid popovers a ghníomhachtú, níor cheart duit ach iad a chur le heilimintí HTML atá go traidisiúnta dírithe ar mhéarchlár agus idirghníomhach (cosúil le naisc nó rialuithe foirmeacha). Cé gur féidir gnéithe treallach HTML (amhail <span>
s) a fhócasú tríd an tabindex="0"
tréith a chur leis, cuirfidh sé seo stadanna cluaisíní a d'fhéadfadh a bheith corraitheach agus mearbhallach ar eilimintí neamh-idirghníomhacha d'úsáideoirí méarchláir, agus ní fhógraíonn an chuid is mó de na teicneolaíochtaí cúnta faoi láthair ábhar an phreabfhuinneog sa chás seo . Ina theannta sin, ná bí ag brath go hiomlán hover
mar spreag do popovers, mar go mbeidh sé seo dodhéanta iad a spreagadh d'úsáideoirí méarchláir.
Cé gur féidir leat HTML saibhir, struchtúrtha a chur isteach i popovers leis an html
rogha, molaimid go láidir duit gan iomarca ábhar a chur leis. Is é an chaoi a n-oibríonn popovers faoi láthair ná go bhfuil a n-inneachar ceangailte leis an eilimint truicear leis an aria-describedby
tréith nuair a thaispeánfar é. Mar thoradh air sin, fógrófar ábhar iomlán an popover d'úsáideoirí teicneolaíochta cúnta mar aon sruth fada, gan bhriseadh.
Ina theannta sin, cé gur féidir rialuithe idirghníomhacha (cosúil le heilimintí foirme nó naisc) a chur san áireamh i do popover (trí na gnéithe seo a chur leis na whiteList
tréithe agus na clibeanna nó ceadaithe), bí ar an eolas faoi láthair nach ndéanann an aníos a bhainistiú ord fócas an mhéarchláir. Nuair a osclaíonn úsáideoir méarchláir preabfhuinneog, fanann an fócas ar an eilimint truicearaigh, agus toisc nach leanann an popover de ghnáth láithreach an truicear i struchtúr an doiciméid, níl aon ráthaíocht ann go mbeidh tú ag bogadh ar aghaidh/ag brúTABbogfaidh úsáideoir méarchláir isteach sa popover féin. I mbeagán focal, má chuirtear rialuithe idirghníomhacha le huasghrádú go simplí, is dócha go mbeidh na rialuithe seo dosroichte/do-úsáidte d'úsáideoirí méarchláir agus d'úsáideoirí teicneolaíochtaí cúnta, nó ar a laghad ord fócais fhoriomlán míloighciúil a dhéanamh. Sna cásanna seo, smaoinigh ar dialóg módúil a úsáid ina ionad sin.
Roghanna
Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-
, mar atá i data-animation=""
.
sanitize
Tabhair faoi deara nach féidir an ,
sanitizeFn
agus
na whiteList
roghanna a sholáthar
ar chúiseanna slándála
trí úsáid a bhaint as tréithe sonraí.Ainm | Cineál | Réamhshocrú | Cur síos |
---|---|---|---|
beochan | Boole | fíor | Cuir trasdul céimnithe CSS i bhfeidhm ar an bpíosa aníos |
coimeádán | teaghrán | eilimint | bréagach | bréagach | Cuireann sé an popover le gné ar leith. Sampla: |
ábhar | teaghrán | eilimint | feidhm | '' | Luach réamhshocraithe an ábhair mura Má thugtar feidhm, glaofar í lena |
moill | uimhir | réad | 0 | Moill ag taispeáint agus i bhfolach an popover (ms) - ní bhaineann sé le cineál truicear láimhe Má chuirtear uimhir ar fáil, cuirtear moill i bhfeidhm ar an dá cheilt/seó Is é struchtúr an ábhair: |
html | Boole | bréagach | Cuir HTML isteach sa popover. Más bréagach é, text úsáidfear modh jQuery chun ábhar a chur isteach sa DOM. Úsáid téacs má tá imní ort faoi ionsaithe XSS. |
socrúchán | teaghrán | feidhm | 'ceart' | Conas an popover a shuíomh - uathoibríoch | barr | bun | chlé | ceart. Nuair a úsáidtear feidhm chun an socrúchán a chinneadh, tugtar an nód DOM popover mar a chéad argóint agus nód DOM na heiliminte spreagúla mar an dara háit. Tá an |
roghnóir | teaghrán | bréagach | bréagach | Má chuirtear roghnóir ar fáil, déanfar réada aníos a tharmligean chuig na spriocanna sonraithe. Go praiticiúil, baintear úsáid as seo le gur féidir popovers a chur leis an ábhar HTML dinimiciúil. Féach é seo agus sampla faisnéiseach . |
teimpléad | teaghrán | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Bunús HTML le húsáid agus an popover á chruthú. Déanfar na popover's Déanfar na popover's
Ba chóir go mbeadh an eilimint fillte is forimeallaí ag an |
teideal | teaghrán | eilimint | feidhm | '' | Luach teidil réamhshocraithe mura Má thugtar feidhm, glaofar í lena |
truicear | teaghrán | 'cliceáil' | Conas a spreagtar aníos - cliceáil | ainlíon | fócas | lámhleabhar. Is féidir leat pas a fháil truicear iolrach; iad a scaradh le spás. manual ní féidir é a chomhcheangal le haon truicear eile. |
fhritháireamh | uimhir | teaghrán | 0 | Fritháireamh an popover i gcoibhneas lena sprioc. Le haghaidh tuilleadh eolais déan tagairt do dhoiciméid fhritháireamh Popper . |
socrúchán cúltaca | teaghrán | eagar | 'smeach' | Ceadaigh a shonrú cén suíomh a úsáidfidh Popper ar chúltaca. Le haghaidh tuilleadh eolais déan tagairt do dhoiciméid iompair Popper |
saincheapthaRang | teaghrán | feidhm | '' | Cuir ranganna leis an popover nuair a thaispeánfar é. Tabhair faoi deara go gcuirfear na ranganna seo i dteannta le ranganna ar bith a shonraítear sa teimpléad. Chun ranganna iolracha a chur leis, scar iad le spásanna: Is féidir leat feidhm a rith freisin ar cheart di teaghrán amháin a thabhairt ar ais ina bhfuil ainmneacha ranga breise. |
teorainn | teaghrán | eilimint | 'scrollParent' | Teorainn srian thar maoil an popover. Glacann sé le luachanna 'viewport' , 'window' , 'scrollParent' , nó tagairt HTMLElement (JavaScript amháin). Le haghaidh tuilleadh faisnéise déan tagairt do dhoiciméid preventOverflow Popper . |
sláintíocht | Boole | fíor | Cumasaigh nó díchumasaigh an sláintíocht. Má chuirtear i ngníomh é 'template' , 'content' agus 'title' déanfar roghanna a shláintiú. Féach an rannán sláintíochta inár ndoiciméadú JavaScript . |
Liosta bán | réad | Luach réamhshocraithe | Réad ina bhfuil tréithe agus clibeanna ceadaithe |
sanitizeFn | null | feidhm | null | Anseo is féidir leat d'fheidhm sláintíochta féin a sholáthar. Féadfaidh sé seo a bheith úsáideach más fearr leat leabharlann thiomanta a úsáid chun sláintíocht a dhéanamh. |
popperConfig | null | réad | null | Chun cumraíocht réamhshocraithe Bootstrap Popper a athrú, féach cumraíocht Popper |
Tréithe sonraí le haghaidh popovers aonair
De rogha air sin, is féidir roghanna le haghaidh popovers aonair a shonrú trí úsáid a bhaint as tréithe sonraí, mar a mhínítear thuas.
Modhanna
Modhanna agus aistrithe asincrónacha
Tá gach modh API asincrónach agus cuireann siad tús le haistriú . Filleann siad ar an nglaoiteoir chomh luath agus a chuirtear tús leis an aistriú ach sula gcríochnaíonn sé . Ina theannta sin, ní thabharfar aird ar ghlao modha ar chomhpháirt trasdula .
Féach ar ár gcáipéisíocht JavaScript le haghaidh tuilleadh eolais .
$().popover(options)
Tosaíonn popovers le haghaidh bailiúchán eilimint.
.popover('show')
Nochtann popover eilimint. Filleann sé ar an nglaoiteoir sula dtaispeántar an t-athrú aníos (ie sula shown.bs.popover
dtarlaíonn an teagmhas). Meastar gur “lámhleabhar” é seo a chuireann faoi deara an popover. Ní thaispeánfar popovers a bhfuil a theideal agus a n-ábhar ar fad nialasach.
$('#element').popover('show')
.popover('hide')
Folaíonn popover eilimint. Filleann sé ar an nglaoiteoir sular cuireadh an t-amóg aníos i bhfolach (ie sula hidden.bs.popover
dtarlaíonn an teagmhas). Meastar gur “lámhleabhar” é seo a chuireann faoi deara an popover.
$('#element').popover('hide')
.popover('toggle')
Scoránaigh eilimint a popover. Filleann sé ar an nglaoiteoir sula dtaispeántar nó sula gcuirtear i bhfolach an t-amóg aníos (.i. sula dtarlaíonn an t-imeacht) shown.bs.popover
. hidden.bs.popover
Meastar gur “lámhleabhar” é seo a chuireann faoi deara an popover.
$('#element').popover('toggle')
.popover('dispose')
Seithí agus scriosann popover eilimint. Ní féidir popovers a úsáideann tarmligean (a chruthaítear ag baint úsáide as an selector
rogha ) a scrios ina n-aonar ar eilimintí truicear sliocht.
$('#element').popover('dispose')
.popover('enable')
Tugann sé an cumas a thaispeáint do popover eilimint. Tá popovers cumasaithe de réir réamhshocraithe.
$('#element').popover('enable')
.popover('disable')
Baineann sé seo as an gcumas chun an popover eilimint a thaispeáint. Ní bheidh an popover in ann a thaispeáint ach amháin má tá sé ath-chumasaithe.
$('#element').popover('disable')
.popover('toggleEnabled')
Scoránaigh an cumas chun popover eilimint a thaispeáint nó a cheilt.
$('#element').popover('toggleEnabled')
.popover('update')
Nuashonraítear suíomh popover eilimint.
$('#element').popover('update')
Imeachtaí
Cineál Imeachta | Cur síos |
---|---|
taispeáin.bs.píosa | Téann an teagmhas seo chun solais láithreach nuair show a ghlaoitear an modh ásc. |
taispeánta.bs.popover | Tá an teagmhas seo bréan nuair a bhíonn an aníos infheicthe ag an úsáideoir (fanfaidh sé go mbeidh na haistrithe CSS curtha i gcrích). |
folaigh.bs.popover | Cuirtear an teagmhas seo ar ceal láithreach nuair a bhíonn an hide modh ásc glaoite. |
i bhfolach.bs.popover | Tá an teagmhas seo bréan nuair a bhíonn an aníos aníos curtha i bhfolach ón úsáideoir (fanfaidh sé go mbeidh aistrithe CSS le cur i gcrích). |
isteach.bs.popover | Cuirtear an teagmhas seo ar ceal tar éis na show.bs.popover hócáide nuair a cuireadh an teimpléad aníos aníos leis an DOM. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})