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.
• Is féidir popovers a spreagadh a bhuíochas le eilimint taobh istigh de scáth 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.

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

Modhanna

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

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