Popover

Zvinyorwa uye mienzaniso yekuwedzera Bootstrap popovers, seaya anowanikwa muIOS, kune chero chinhu pane yako saiti.

Overview

Zvinhu zvekuziva kana uchishandisa popover plugin:

• Popovers vanovimba neyechitatu bato raibhurari Popper yekumisikidza . Unofanira kusanganisira popper.min.js pamberi bootstrap.js kana kushandisa bootstrap.bundle.min.js/ bootstrap.bundle.jsiyo ine Popper kuitira kuti popovers kushanda!
• Popovers inoda iyo tooltip plugin sekutsamira .
• Kana iwe uri kuvaka yedu JavaScript kubva kunobva, inodautil.js .
• Mapopovers anosarudza-kupinda nekuda kwezvikonzero zvekuita, saka iwe unofanirwa kuzvitangisa iwe pachako .
• Zero-kureba titleuye contentkukosha hazvizomboratidzi popover.
• Nyora container: 'body'kudzivirira kupa matambudziko muzvikamu zvakaoma zvikuru (semapoka edu ekuisa, mapoka emabhatani, nezvimwe).
• Kukurudzira popover pazvinhu zvakavanzika hazvishande.
• Mapopovers e .disabledkana ma disabledelement anofanira kukonzereswa pane wrapper element.
• Kana ikamutswa kubva kune zvibatiso zvinoputira mumitsetse yakawanda, mapopovers achange ari pakati pehupamhi hwezvimiso. Shandisa .text-nowrappane yako <a>kudzivirira maitiro aya.
• Mapopover anofanirwa kuvanzwa zvinhu zvawo zvinowirirana zvisati zvabviswa muDOM.
• Popovers inogona kukonzereswa nekuda kwechinhu chiri mukati memumvuri DOM.

Ramba uchiverenga kuti uone mashandiro anoita popover nemimwe mienzaniso.

Muenzaniso: Gonesa popovers kwese kwese

Imwe nzira yekutanga mapopovers pane peji ingave yekuvasarudza nehunhu hwavo data-toggle:

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

Muenzaniso: Kushandisa containersarudzo

Paunenge uine mamwe masitayera pane chinhu chemubereki chinokanganisa popover, iwe unozoda kutsanangura tsika containerkuitira kuti popover's HTML ioneke mukati mechinhu ichocho.

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

Muenzaniso

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

Nzira ina

Sarudzo ina dziripo: kumusoro, kurudyi, pasi, uye kuruboshwe zvakaenderana.

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

Ramba pakudzvanya kunotevera

Shandisa focuschibatiso kuti udzinge mapopovers pakudzvanya kwemushandisi kwechimwe chinhu chakasiyana pane chekuchinja.

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

Zvinhu zvakaremara

Zvinhu zvine disabledhunhu hazvidyidzane, zvichireva kuti vashandisi havagone kusimudza kana kudzvanya kuti vakonzerese popover (kana tooltip). Sekushanda, iwe unozoda kukonzeresa popover kubva mukuputira <div>kana <span>uye nekupfuura iyo pointer-eventspane yakaremara chinhu.

Kune akaremara popover zvinokonzeresa, unogona zvakare kuda data-trigger="hover"kuitira kuti popover ioneke semhinduro yekuona nekukurumidza kune vashandisi vako sezvo vangasatarisira kudzvanya chinhu chakaremara.

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

Usage

Gonesa mapopovers kuburikidza neJavaScript:

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

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

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-, semu data-animation="".

Nzira

$().popover(options)

Inotanga popover yekuunganidza zvinhu.

.popover('show')

Inoratidza kubuda kwechimwe chinhu. Inodzokera kumunhu arikufona popover isati yanyatsoratidzwa (kureva kuti shown.bs.popoverchiitiko chisati chaitika). Izvi zvinoonekwa se "manual" inokonzeresa yehupover. Mapopovers ane zita uye zvirimo zvese zviri zero-kureba hazvimbotaridzwa.

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

.popover('hide')

Inovanza kubuda kwechinhu. Inodzokera kune ari kufona popover isati yanyatsovanzwa (kureva hidden.bs.popoverchiitiko chisati chaitika). Izvi zvinoonekwa se "manual" inokonzeresa yehupover.

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

.popover('toggle')

Inoshandura kubuda kwechinhu. Inodzokera kumunhu arikufona popover isati yaratidzwa kana kuvanzwa (kureva kuti shown.bs.popoverkana hidden.bs.popoverchiitiko chisati chaitika). Izvi zvinoonekwa se "manual" inokonzeresa yehupover.

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

.popover('dispose')

Inoviga uye inoparadza popover yechinhu. Mapopover anoshandisa kugovera (ayo anogadzirwa pachishandiswa sarudzoselector ) haagone kuparadzwa ega pane zvinokonzeresa zvinhu .

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

.popover('enable')

Inopa element's popover kugona kuratidzwa. Popovers inogoneswa neiyo default.

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

.popover('disable')

Inobvisa kugona kwechinhu chinobuda pachena. Iyo popover inongo kwanisa kuratidzwa kana ikabatidzwa zvakare.

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

.popover('toggleEnabled')

Inosandura kugona kwechinhu chinobuda kuti chiratidze kana kuvanzwa.

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

.popover('update')

Inovandudza nzvimbo yechinhu chinobuda.

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

Zviitiko

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