Source

Popovers

Akwụkwọ na ihe atụ maka ịgbakwunye popovers Bootstrap, dị ka ndị ahụ dị na iOS, na mmewere ọ bụla na saịtị gị.

Nchịkọta

Ihe ị ga-ama mgbe ị na-eji ngwa mgbakwunye popover:

  • Popovers na-adabere na ọba akwụkwọ ndị otu nke atọ Popper.js maka itinye ya. Ị ga-agụnye popper.min.js tupu bootstrap.js ma ọ bụ jiri bootstrap.bundle.min.js/ bootstrap.bundle.jsnke nwere Popper.js ka popovers rụọ ọrụ!
  • Popovers chọrọ ngwa mgbakwunye ngwaọrụ dị ka ndabere.
  • Ọ bụrụ na ị na-ewu Javascript anyị site na isi iyi, ọ chọrọutil.js .
  • Popovers abanyela maka ebumnuche arụmọrụ, yabụ ị ga-ebido ya n'onwe gị .
  • Ogologo efu titlena contentụkpụrụ agaghị egosi popover.
  • Ezipụta container: 'body'ka ịzenarị nsogbu n'ime ihe ndị dị mgbagwoju anya (dị ka otu ntinye anyị, otu bọtịnụ, wdg).
  • Ịkpalite popovers na ihe zoro ezo agaghị arụ ọrụ.
  • Popovers maka .disabledma ọ bụ disabledọcha ga-akpalite na ihe mkpuchi.
  • Mgbe a kpalitere site na arịlịka nke kechie n'ofe ahịrị dị iche iche, popovers ga-adị n'etiti obosara nke arịlịka n'ozuzu ya. Jiri white-space: nowrap;na <a>s gị zere omume a.
  • A ghaghị izobe ihe ndị na-ebupụta ihe tupu e wepụ ihe ndị kwekọrọ na DOM.

Nọgide na-agụ ka ịhụ ka popovers si arụ ọrụ na atụ ụfọdụ.

Ọmụmaatụ: Kwado popovers ebe niile

Otu ụzọ isi bido popovers niile na ibe ga-abụ ịhọrọ ha site na data-togglenjirimara ha:

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

Ọmụmaatụ: Iji containernhọrọ

Mgbe ị nwere ụdị ụfọdụ na mmewere nne na nna na-egbochi popover, ị ga-achọ ịkọwapụta omenala containerka HTML popover wee pụta n'ime mmewere ahụ kama.

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

Ọmụmaatụ

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

Ụzọ anọ

Nhọrọ anọ dị: n'elu, aka nri, ala na aka ekpe kwadoro.

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

Wepụ na ịpị ọzọ

Jiri focusmkpalite chụpụ popovers na ọpịpị ọzọ onye ọrụ nke ihe dị iche karịa mmewere mgbanwe.

Akara akara akọwapụtara achọrọ maka ịchụpụ-na-esote-pịa

Maka ezigbo ihe nchọgharị na omume cross-platform, ị ga-eji <a>mkpado, ọ bụghị mkpado <button>, na ị ga-etinyerịrị tabindexàgwà.

Popover na-agaghị ekwe omume 
<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'
})

Ihe ndị nwere nkwarụ

Ihe ndị nwere disablednjirimara ahụ anaghị emekọrịta ihe, nke pụtara na ndị ọrụ enweghị ike ịnyagharị ma ọ bụ pịa ha ka ha kpalite popover (ma ọ bụ Tooltip). Dị ka ihe na-arụ ọrụ, ị ga-achọ ịkpalite popover site na ihe mkpuchi <div>ma ọ bụ <span>kagbuo ihe pointer-eventsahụ nwere nkwarụ.

Maka ihe mkpalite popover nwere nkwarụ, ị nwekwara ike ịhọrọ data-trigger="hover"ka popover pụta dị ka nzaghachi anya ozugbo nye ndị ọrụ gị ka ha nwere ike ọ gaghị atụ anya ịpị ihe nwere nkwarụ.

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

Ojiji

Kwado popovers site na Javascript:

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

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-, dị ka ọ dị na data-animation="".

Aha Ụdị Ọdabara Nkọwa
animation boolean eziokwu Tinye mgbanwe mgbanwe CSS na popover
akpa eriri | mmewere | ụgha ụgha

Na-agbakwunye popover na otu mmewere. Ọmụmaatụ container: 'body':. Nhọrọ a bara uru karịsịa n'ihi na ọ na-enye gị ohere idobe popover na ntinye akwụkwọ ahụ n'akụkụ ihe na-akpali akpali - nke ga-egbochi popover ka ọ na-ese n'elu ihe na-akpali akpali n'oge ntụgharị windo.
ọdịnaya eriri | mmewere | ọrụ ''

Uru ọdịnaya ezighi ezi ma ọ bụrụ data-contentna njirimara adịghị.

Ọ bụrụ na enyere ọrụ, a ga-akpọ ya na thisnrụtụ aka ya nke etinyere na popover.
igbu oge nọmba | ihe 0

Ngosipụta na izobe popover (ms) - anaghị emetụta ụdị mkpalite aka

Ọ bụrụ na ewepụtara nọmba, a na-etinye igbu oge na ma zoo/egosi

Nhazi ihe bụ:delay: { "show": 500, "hide": 100 }
html boolean ụgha Fanye HTML n'ime popover. Ọ bụrụ ụgha, texta ga-eji usoro jQuery tinye ọdịnaya n'ime DOM. Jiri ederede ma ọ bụrụ na ị na-echegbu onwe gị maka mwakpo XSS.
ntinye eriri | ọrụ 'ziri ezi'

Otu esi edobe popover - akpaaka | n'elu | ala | aka ekpe | nri.
Mgbe autoakọwapụtara ya, ọ ga-emegharịgharị popover nke ukwuu.

Mgbe a na-eji ọrụ iji chọpụta ntinye, a na-akpọ ya na popover DOM node dị ka arụmụka mbụ ya na ihe na-akpali akpali DOM node dị ka nke abụọ ya. Edebere thisihe gbara ya gburugburu ka ọ bụrụ ihe atụ popover.
onye nhọpụta eriri | ụgha ụgha Ọ bụrụ na enyere onye nhọpụta, a ga-ekenyefe ihe popover na ebumnuche ndị akọwapụtara. Na omume, a na-eji nke a mee ka ọdịnaya HTML dị ike ka agbakwunyere popovers. Hụ nke a na ihe atụ na-enye nkọwa .
ndebiri eriri '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Ntọala HTML iji mee ihe mgbe ị na-emepụta popover.

A titlega-agbaba popover n'ime .popover-header.

A contentga-agbaba popover n'ime .popover-body.

.arrowga-abụ akụ popover.

Ihe mkpuchi nke dị n'elu kwesịrị inwe .popoverklaasị.
aha eriri | mmewere | ọrụ ''

Uru aha ndabara ma ọ bụrụ titlena njirimara adịghị.

Ọ bụrụ na enyere ọrụ, a ga-akpọ ya na thisnrụtụ aka ya nke etinyere na popover.
ịkpalite eriri 'pịa' Kedu ka esi eme popover - pịa | hover | lekwasịrị anya | akwụkwọ ntuziaka. Ị nwere ike ịgafe ọtụtụ ihe mkpali; kewaa ha na oghere. Enweghị ike ijikọ 'akwụkwọ ntuziaka' na mkpalite ọ bụla ọzọ.
nkwụsị nọmba | eriri 0 Mwepu nke popover n'ihe metụtara ebumnuche ya. Maka ozi ndị ọzọ rụtụ aka na Docs Offset Popper.js .
fallbackPlacement eriri | n'usoro 'tụgharịa' Hapụ ka ịkọwapụta ọnọdụ Popper ga-eji na ọdịda azụ. Maka ozi ndị ọzọ rụtụ aka na akwụkwọ omume Popper.js
oke eriri | mmewere 'mpịakọta nne na nna' Oke mmachi oke oke nke popover. Nabata ụkpụrụ nke 'viewport', 'window', 'scrollParent', ma ọ bụ HTMLElement ntụaka (naanị JavaScript). Maka ozi ndị ọzọ rụtụ aka na Docs preventoverflow nke Popper.js .

Njirimara data maka popovers n'otu n'otu

Enwere ike ịkọwa nhọrọ maka popovers n'otu n'otu site na iji njirimara data, dịka akọwara n'elu.

Ụzọ

Ụzọ asynchronous na ntụgharị

Ụzọ API niile enweghị atụ wee malite mgbanwe . Ha na-alaghachikwuru onye na-akpọ oku ozugbo mgbanwe ahụ malitere mana tupu ya akwụsị . Na mgbakwunye, a ga-eleghara oku usoro na mpaghara mgbanwe anya .

Hụ akwụkwọ Javascript anyị maka ozi ndị ọzọ.

$().popover(options)

Na-ebute popovers maka mkpokọta mmewere.

.popover('show')

Na-ekpughe popover nke mmewere. Na-alaghachikwute onye na-akpọ oku tupu egosiri popover (ya bụ, tupu shown.bs.popovermmemme emee). A na-ewere nke a dị ka "akwụkwọ ntuziaka" na-ebute popover. Popovers nke aha ha na ọdịnaya ha bụ ogologo efu anaghị egosipụta.

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

.popover('hide')

Na-ezobe popover nke mmewere. Na-alaghachikwute onye na-akpọ oku tupu ezobe popover (ya bụ tupu hidden.bs.popovermmemme emee). A na-ewere nke a dị ka "akwụkwọ ntuziaka" na-ebute popover.

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

.popover('toggle')

Na-atụgharị popover nke mmewere. Na-alaghachikwute onye na-akpọ oku tupu egosiri ma ọ bụ zoo popover (ya bụ tupu ihe omume shown.bs.popoverma ọ bụ hidden.bs.popoverihe emee). A na-ewere nke a dị ka "akwụkwọ ntuziaka" na-ebute popover.

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

.popover('dispose')

Na-ezo ma na-ebibi popover nke mmewere. Popovers na-eji nnọchiteanya (nke a na-emepụta site na iji selectornhọrọ ) enweghị ike ibibi n'otu n'otu na ihe na-akpali akpali.

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

.popover('enable')

Na-enye popover nke mmewere ikike igosi ya. Agbanyere popovers site na ndabara.

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

.popover('disable')

Na-ewepụ ikike igosi popover element. A ga-enwe ike igosi popover naanị ma ọ bụrụ na agbanyere ya ọzọ.

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

.popover('toggleEnabled')

Na-atụgharị ikike igosi ma ọ bụ zobe ihe popover nke ihe.

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

.popover('update')

Na-emelite ọnọdụ popover element.

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

Ihe omume

Ụdị mmemme Nkọwa
gosi.bs.popover Ihe omume a na-agba ọkụ ozugbo showa na-akpọ usoro ihe atụ.
egosiri.bs.popover A na-agbapụ ihe omume a mgbe onye ọrụ mere ka popover ahụ hụ ya (ga-echere mgbanwe CSS ka agwụchaa).
zoo.bs.popover A na-agbapụ ihe omume a ozugbo hidea kpọrọ usoro ihe atụ.
zoro ezo.bs.popover A na-agbapụ ihe omume a mgbe ezoro ezoro onye ọrụ ahụ popover (ga-echere mgbanwe CSS ka agwụchaa).
etinyere.bs.popover Emere mmemme a ka emechara ihe show.bs.popoveromume mgbe agbakwunyere ndebiri popover na DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})