Source

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 an leabharlann tríú páirtí Popper.js 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.jsina bhfuil Popper.js le go n-oibreoidh na popovers!
  • Éilíonn Popovers an breiseán tooltip mar spleáchas.
  • Má tá ár JavaScript á thógáil agat ón bhfoinse, teastaíonnutil.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 titlená contentluachanna 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 .disablednó disabledeilimintí a spreagadh ar eilimint chumhdaigh.
  • Nuair a spreagtar iad ó ancairí a théann trasna línte iolracha, beidh na popovers dírithe ar leithead iomlán na n-ancairí. Bain úsáid as .text-nowrapar 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.

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 aníos ar leathanach a thúsú ná iad a roghnú de réir a n- data-toggletréith:

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

Sampla: Ag baint úsáide as an containerrogha

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ú containerionas 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="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>

Ruaig an chéad chliceáil eile

Úsáid an focustruicear 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 tabindextréith a chur san áireamh freisin.

Popover dhíbhe 
<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 disabledtré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)

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

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: container: 'body'. Tá an rogha seo thar a bheith úsáideach sa mhéid is go gceadaíonn sé duit an popover a shuíomh i sreabhadh an doiciméid in aice leis an eilimint spreagthaigh - rud a chuirfidh cosc ​​ar an bpíosa aníos a bheith ag snámh ón eilimint spreagaithe le linn athrú méide fuinneoige.
ábhar teaghrán | eilimint | feidhm ''

Luach réamhshocraithe an ábhair mura data-contentbhfuil an aitreabúid i láthair.

Má thugtar feidhm, glaofar í lena thistacar tagartha don eilimint a bhfuil an popover ceangailte léi.
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:delay: { "show": 500, "hide": 100 }
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 autoa shonraítear é, athróidh sé an popover go dinimiciúil.

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 thiscomhthéacs socraithe don chás aníos.
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 titlea instealladh isteach sa .popover-header.

Déanfar na popover's contenta instealladh isteach sa .popover-body.

.arrowbeidh an popover saighead.

Ba chóir go mbeadh an eilimint fillte is forimeallaí ag an .popoverrang.
teideal teaghrán | eilimint | feidhm ''

Luach teidil réamhshocraithe mura titlebhfuil aitreabúid i láthair.

Má thugtar feidhm, glaofar í lena thistacar tagartha don eilimint a bhfuil an popover ceangailte léi.
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. manualní 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 faisnéise déan tagairt do dhoiciméid fhritháireamh Popper.js .
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 faisnéise déan tagairt do dhoiciméid iompair Popper.js
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.js .

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 a luaithe 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.popoverdtarlaí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.popoverdtarlaí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.popoverMeastar 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 selectorrogha ) 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 showa 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 hidea ghlaoitear an modh ásc.
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 na haistrithe CSS curtha i gcrích).
isteach.bs.popover Cuirtear an teagmhas seo ar ceal tar éis na show.bs.popoverhócáide nuair a chuirtear an teimpléad aníos leis an DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})