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, zvinodautil.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.

Iyo animation mhedzisiro yechikamu ichi zvinoenderana prefers-reduced-motionnemubvunzo wenhau. Ona chikamu chakaderedzwa chezvinyorwa zvedu zvekusvikika .

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

Kugadzira mapopovers kushandira kiibhodhi uye vanobatsira tekinoroji vashandisi

Kuti ubvumire vashandisi vekhibhodi kuti vavhure mapopovers ako, iwe unofanirwa kungoawedzera kune HTML zvinhu zvinogara zvichitariswa nekhibhodi uye zvinopindirana (senge zvinongedzo kana mafomu ekudzora). Kunyangwe zvinopokana zveHTML zvinhu ( <span>senge s) zvichigona kuitwa kuti zvitarisike nekuwedzera tabindex="0"hunhu, izvi zvinowedzera zvinogona kutsamwisa uye zvinovhiringa tebhu inomira pazvinhu zvisiri-zvinopindirana zvevashandisi vekhibhodi, uye matekinoroji mazhinji anobatsira parizvino haazivise zviri mupopover mumamiriro ezvinhu aya. . Pamusoro pezvo, usavimbe chete hoversechinhu chinokonzeresa chepopovers yako, sezvo izvi zvichizoita kuti vasakwanise kukonzeresa vashandisi vekhibhodi.

Nepo iwe uchigona kuisa yakapfuma, yakarongeka HTML mumapopovers htmlnesarudzo, isu tinokurudzira zvakasimba kuti udzivise kuwedzera huwandu hwakawandisa hwemukati. Mashandiro anoita popovers parizvino ndeyekuti, kana angoratidzwa, zvirimo zvakasungirirwa kune chinokonzeresa chinhu aria-describedbynehunhu. Nekuda kweizvozvo, zvese zvemukati zvepopover zvichaziviswa kune vabatsiri tekinoroji vashandisi serukova rwumwe rurefu rusina kukanganiswa.

Pamusoro pezvo, kunyangwe zvichikwanisika kubatanidza zvidzoreso zvinopindirana (senge fomu zvinhu kana zvinongedzo) mune yako popover (nekuwedzera zvinhu izvi kune whiteListkana anotenderwa hunhu uye ma tag), ziva kuti parizvino iyo popover haigadzirise keyboard yekutarisa kurongeka. Kana mushandisi wekhibhodi akavhura popover, kutarisa kunoramba kuri pachinhu chinokonzeresa, uye sezvo iyo popover kazhinji isinga tevere mutsara muchimiro chegwaro, hapana vimbiso yekuti kuenda kumberi / kudzvanya.TABichafambisa mushandisi wekhibhodi mupopover pachayo. Muchidimbu, kungowedzera anodyidzana zvidzoreso kune popover zvinogona kuita kuti zvigadziriso izvi zvisasvike / kusashandika kune vashandisi vekhibhodi nevashandisi vetekinoroji yekubatsira, kana padiki gadzira iyo isina musoro yekutarisa kurongeka. Muzviitiko izvi, funga kushandisa modal dialog pane.

Options

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

Ziva kuti nekuda kwezvikonzero zvekuchengetedza iyo sanitize, sanitizeFnuye whiteListsarudzo haigone kupihwa uchishandisa data hunhu.

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 inonamatira.
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 izvo zvakatarwa. 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 wavapfuri.

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 inonamatira.
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 .
sanitize boolean chokwadi Gonesa kana kudzima sanitization. Kana ikashandiswa 'template', 'content'uye 'title'sarudzo dzichacheneswa.
whiteList object Default value Chinhu chine hunhu uye ma tag anotenderwa
sanitizeFn null | basa null Pano iwe unogona kupa yako wega sanitize basa. Izvi zvinogona kubatsira kana ukada kushandisa raibhurari yakatsaurirwa kuita sanitization.
popperConfig null | object null Kuti uchinje Bootstrap's default Popper.js config, ona Popper.js's configuration.

Data hunhu hwemunhu 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 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 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...
})