Source

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.js yekumisikidza . Unofanira kusanganisira popper.min.js pamberi bootstrap.js kana kushandisa bootstrap.bundle.min.js/ bootstrap.bundle.jsiyo ine Popper.js 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.

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

Ramba pakudzvanya kunotevera

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

Yakananga markup inodiwa pakubvisa-pa-inotevera-kubaya

Kuti uwane chaiyo-muchinjika-browser uye muchinjika-chikuva maitiro, iwe unofanirwa kushandisa iyo <a>tag, kwete iyo <button>tag, uye iwe zvakare unofanirwa kusanganisira tabindexhunhu.

Kudzingwa popover 
<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 pakuputira <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)

Options

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

Zita Type Default Tsanangudzo
animation boolean chokwadi Isa CSS fade shanduko kune popover
mudziyo tambo | chinhu | nhema nhema

Inoisa popover kune chimwe chinhu. Muenzaniso container: 'body':. Iyi sarudzo inonyanya kubatsira mukuti inobvumidza iwe kuti uise iyo popover mukuyerera kwegwaro padhuze nechinhu chinokonzeresa - izvo zvinodzivirira iyo popover kuti irege kuyangarara kubva kune inokonzeresa chinhu panguva yehwindo resize.
content tambo | chinhu | basa ''

Default content value kana data-contenthunhu husipo.

Kana basa rakapihwa, rinodaidzwa nereferensi yaro thisyakaiswa kune chinhu icho popover yakanamatira.
delay nhamba | object 0

Kunonoka kuratidza uye kuvanza iyo popover (ms) - haishande kune manual trigger type

Kana nhamba yapihwa, kunonoka kunoiswa kune ese ari maviri hide/show

Chimiro chechinhu ndeichi:delay: { "show": 500, "hide": 100 }
html boolean nhema Isa HTML mune popover. Kana nhema, nzira yejQuery textichashandiswa kuisa zvirimo muDOM. Shandisa zvinyorwa kana uchinetseka nezve XSS kurwiswa.
kuiswa tambo | basa 'rudyi'

Maitiro ekuisa iyo popover - auto | pamusoro | pasi | left | rudyi.
Kana autoyatsanangurwa, ichaita dynamically kurongedza popover.

Kana basa rikashandiswa kuona kuiswa, rinodaidzwa nepopover DOM node senharo yayo yekutanga uye chinokonzeresa DOM node sechipiri. Mamiriro thisacho akaiswa kune iyo popover muenzaniso.
selector tambo | nhema nhema Kana sarudzo yakapihwa, popover zvinhu zvinopihwa kune zvakatarwa zvinangwa. Mukuita, izvi zvinoshandiswa kugonesa dynamic HTML zvemukati kuve nemapopovers akawedzerwa. Ona izvi uye muenzaniso unodzidzisa .
template tambo '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Base HTML yekushandisa paunenge uchigadzira popover.

Iyo popover's titleichabaiwa mu .popover-header.

Iyo popover's contentichabaiwa mu .popover-body.

.arrowuchava museve wavapfumi.

Chinhu chekunze chekuputira chinofanira kunge chine .popoverkirasi.
title tambo | chinhu | basa ''

Default title value kana titlehunhu husipo.

Kana basa rakapihwa, rinodaidzwa nereferensi yaro thisyakaiswa kune chinhu icho popover yakanamatira.
trigger tambo 'tinya' Iyo popover inokonzereswa sei - tinya | hovha | focus | manual. Unogona kupfuura akawanda anokonzeresa; vaparadzanise nenzvimbo. manualhaigone kusanganiswa nechero imwe trigger.
offset nhamba | tambo 0 Offset ye poover inoenderana nechinangwa chayo. Kuti uwane rumwe ruzivo tarisa kuPopper.js's offset docs .
fallbackPlacement tambo | array 'pindurudza' Bvumira kudoma chinzvimbo chichashandiswa naPopper pakudonha. Kuti uwane rumwe ruzivo tarisa kune Popper.js's maitiro docs
muganhu tambo | element 'scrollParent' Kufashukira kunomanikidza muganho wepopover. Inobvuma kukosha kwe 'viewport', 'window', 'scrollParent', kana HTMLElement referensi (JavaScript chete). Kuti uwane rumwe ruzivo tarisa kune Popper.js's preventOverflow docs .

Mamiriro e data kune ega popovers

Sarudzo dzemapopovers ega dzinogona kutsanangurwa neimwe nzira kuburikidza nekushandisa data hunhu, sezvatsanangurwa pamusoro.

Nzira

Asynchronous nzira uye shanduko

Yese nzira dzeAPI dzine asynchronous uye dzinotanga shanduko . Vanodzokera kumunhu anenge afona pachangotanga shanduko asi isati yapera . Pamusoro pezvo, kufona kwenzira pachikamu chekuchinja kuchafuratirwa .

Ona zvinyorwa zvedu zveJavaScript kuti uwane rumwe ruzivo.

$().popover(options)

Inotanga popover yekuunganidza zvinhu.

.popover('show')

Inoratidza kubuda kwechinhu. Inodzokera kumunhu arikufona popover isati yanyatsoratidzwa (kureva kuti shown.bs.popoverchiitiko chisati chaitika). Izvi zvinoonekwa se "manual" inokonzeresa yehupover. Mapopovers ane zvese zita uye zvirimo 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 yanyatsoratidzwa 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

Chiitiko Type Tsanangudzo
show.bs.popover Ichi chiitiko chinopisa nekukasira kana shownzira yemuenzaniso inodanwa.
display.bs.popover Ichi chiitiko chinodzingwa kana popover yaitwa kuti ionekwe kumushandisi (inomirira kuti CSS shanduko ipedze).
hide.bs.popover Ichi chiitiko chinodzingwa nekukasira kana iyo hidemuenzaniso nzira yadaidzwa.
zvakavanzika.bs.popover Ichi chiitiko chinodzingwa kana popover yapedza kuvanzwa kubva kumushandisi (inomirira kuti CSS shanduko ipedze).
inserted.bs.popover Ichi chiitiko chinodzingwa mushure show.bs.popovermechiitiko apo popover template yawedzerwa kuDOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})