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 maka itinye ya. Ị ga-agụnye popper.min.js tupu bootstrap.js ma ọ bụ jiri bootstrap.bundle.min.js/ bootstrap.bundle.jsnke nwere Popper 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 .text-nowrapna <a>s gị zere omume a.
• A ghaghị izobe ihe ndị na-ebupụta ihe tupu e wepụ ihe ndị kwekọrọ na DOM.
• Enwere ike ịkpalite popovers n'ihi ihe dị n'ime onyinyo 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="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>

Wepụ na ịpị ọzọ

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

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

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

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

Ụ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 na ọdịnaya ha bụ efu-ogologo 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

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