Source

Popovers

Zolemba ndi zitsanzo zowonjezerera ma popover a Bootstrap, monga omwe amapezeka mu iOS, pazinthu zilizonse patsamba lanu.

Mwachidule

Zomwe muyenera kudziwa mukamagwiritsa ntchito pulogalamu ya popover:

  • Popovers amadalira laibulale ya chipani chachitatu Popper.js kuti akhazikike. Muyenera kuphatikiza popper.min.js pamaso pa bootstrap.js kapena gwiritsani ntchito bootstrap.bundle.min.js/ bootstrap.bundle.jsyomwe ili ndi Popper.js kuti ma popover agwire ntchito!
  • Popovers amafuna chida chowonjezera ngati chodalira.
  • Ngati mukupanga JavaScript yathu kuchokera kugwero, pamafunikautil.js .
  • Ma Popover amasankha kulowa pazifukwa zogwirira ntchito, chifukwa chake muyenera kuziyambitsa nokha .
  • Ziro-utali titlendi contentzikhalidwe sizidzawonetsa popover.
  • Nenani container: 'body'kuti mupewe kupereka zovuta muzinthu zovuta kwambiri (monga magulu athu olowetsa, magulu a batani, ndi zina).
  • Kuyambitsa popover pazinthu zobisika sikungagwire ntchito.
  • Popovers .disabledkapena disabledzinthu ziyenera kuyambitsidwa pa chinthu chomangira.
  • Zikayambidwa kuchokera ku anangula omwe amazungulira mizere ingapo, ma popovers amakhala pakati pa nangula wonsewo. Gwiritsani .text-nowrapntchito zanu <a>kuti mupewe izi.
  • Popovers ayenera kubisidwa zinthu zawo zofananira zisanachotsedwe mu DOM.

Pitilizani kuwerenga kuti muwone momwe popover amagwirira ntchito ndi zitsanzo zina.

Chitsanzo: Atseguleni popoposera paliponse

Njira imodzi yokhazikitsira ma popovers onse patsamba ingakhale kuwasankha mwamakhalidwe awo data-toggle:

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

Chitsanzo: Kugwiritsa ntchito containernjira

Mukakhala ndi masitaelo pa chinthu cha makolo chomwe chimasokoneza popover, mudzafuna kufotokoza mwambo containerkuti HTML ya popover iwonekere mkati mwa chinthucho.

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

Chitsanzo

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

Njira zinayi

Zosankha zinayi zilipo: pamwamba, kumanja, pansi, ndi kumanzere.

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

Chotsani mukadina kwina

Gwiritsani ntchito focuschoyambitsacho kuti muchotse zotulukapo pakadina kotsatira kwa wogwiritsa wa chinthu china kusiyana ndi chinthu chosinthira.

Chizindikiro china chofunikira pakuchotsa-pa-kudina-kotsatira

Kuti mugwiritse ntchito msakatuli woyenera komanso papulatifomu, muyenera kugwiritsa ntchito tag <a>, osati<button> tag, komanso muyenera kuphatikizanso mawonekedwe tabindex.

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

Zinthu zolemala

Zinthu zomwe zili ndi mawonekedwe disabledake sizimalumikizana, kutanthauza kuti ogwiritsa ntchito sangasunthe kapena kuzidina kuti ayambitse popover (kapena chida). Monga njira yogwirira ntchito, mudzafuna kuyambitsa popover kuchokera ku wrapper <div>kapena <span>ndikuwongolera zomwe pointer-eventszili olumala.

Pazinthu zoyambitsa popover zolemala, mungakondenso data-trigger="hover"kuti popover iwoneke ngati malingaliro apompopompo kwa ogwiritsa ntchito anu chifukwa sangayembekezere kudina chinthu cholemala.

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

Kugwiritsa ntchito

Yambitsani popover kudzera pa JavaScript:

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

Zosankha

Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-, monga mu data-animation="".

Dzina Mtundu Zosasintha Kufotokozera
makanema ojambula boolean zoona Ikani kusintha kwa CSS fade ku popover
chotengera chingwe | chinthu | zabodza zabodza

Imawonjezera popover ku chinthu china. Chitsanzo: container: 'body'. Izi ndizothandiza makamaka chifukwa zimakulolani kuti muyike popover mukuyenda kwa chikalata pafupi ndi chinthu choyambitsa - chomwe chidzalepheretsa popover kuti asayandamire kuchoka pa chinthu chomwe chikuyambitsa panthawi yosintha zenera.
zomwe zili chingwe | chinthu | ntchito ''

Chitsimikizo cha zinthu ngati data-contentpalibe.

Ngati ntchito yaperekedwa, thisidzayitanidwa ndi zolemba zake ku chinthu chomwe popover amamangiriridwa.
kuchedwa nambala | chinthu 0

Kuchedwa kusonyeza ndi kubisa popover (ms) - sikugwira ntchito pamanja choyambitsa mtundu

Ngati nambala yaperekedwa, kuchedwetsa kumayikidwa pazithunzi zonse ziwiri

Kapangidwe kachinthu ndi:delay: { "show": 500, "hide": 100 }
html boolean zabodza Ikani HTML mu popover. Ngati zabodza, textnjira ya jQuery idzagwiritsidwa ntchito kuyika zomwe zili mu DOM. Gwiritsani ntchito mawu ngati mukuda nkhawa ndi kuukira kwa XSS.
kuika chingwe | ntchito 'chabwino'

Momwe mungayikitsire popover - auto | pamwamba | pansi | kumanzere | kulondola.
Zikanenedwa auto, zidzasinthanso popover.

Ntchito ikagwiritsidwa ntchito kudziwa malo, imatchedwa ndi popover DOM node ngati mkangano wake woyamba komanso chinthu choyambitsa DOM node ngati yachiwiri. Nkhaniyi thisimayikidwa ku chitsanzo cha popover.
wosankha chingwe | zabodza zabodza Ngati chosankha chaperekedwa, zinthu za popover zidzaperekedwa ku zomwe zafotokozedwazo. M'malo mwake, izi zimagwiritsidwa ntchito kuti zithandizire HTML zomwe zili ndi ma popover awonjezedwe. Onani izi ndi chitsanzo chodziwitsa .
template chingwe '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Base HTML kuti mugwiritse ntchito popanga popover.

Ma popover adzabayidwa titlemu .popover-header.

Ma popover adzabayidwa contentmu .popover-body.

.arrowadzakhala muvi wa popover.

Chokulunga chakunja chiyenera kukhala ndi .popoverkalasi.
mutu chingwe | chinthu | ntchito ''

Mtengo wamutu wotsikirapo ngati titlechizindikirocho palibe.

Ngati ntchito yaperekedwa, thisidzayitanidwa ndi zolemba zake ku chinthu chomwe popover amamangiriridwa.
choyambitsa chingwe 'dinani' Momwe popover imayambira - dinani | kugwa | kuganizira | buku. Mutha kudutsa zoyambitsa zambiri; alekanitse iwo ndi danga. manualsichingaphatikizidwe ndi choyambitsa china chilichonse.
kuchepetsa nambala | chingwe 0 Kuchepetsa kwa popover mogwirizana ndi cholinga chake. Kuti mumve zambiri onani za Popper.js's offset docs .
fallbackPlacement chingwe | gulu 'tembenuzani' Lolani kutchula malo omwe Popper adzagwiritse ntchito pobwerera. Kuti mumve zambiri onani za Popper.js's behaviour docs
malire chingwe | chinthu 'scrollParent' Kusefukira malire malire a popover. Imavomereza mfundo za 'viewport', 'window', 'scrollParent', kapena HTMLElement reference (JavaScript yokha). Kuti mudziwe zambiri onani zolemba za preventOverflow za Popper.js .

Mawonekedwe a data pamapopovers apawokha

Zosankha za popovers pawokha zitha kufotokozedwa mwanjira ina pogwiritsa ntchito mawonekedwe a data, monga tafotokozera pamwambapa.

Njira

Asynchronous njira ndi kusintha

Njira zonse za API ndizosasinthika ndipo zimayamba kusintha . Amabwerera kwa woyimbayo atangoyamba kusintha koma asanathe . Kuonjezera apo, kuyitana kwa njira pa gawo losintha kudzanyalanyazidwa .

Onani zolemba zathu za JavaScript kuti mudziwe zambiri.

$().popover(options)

Imayambitsa ma popover pazosonkhanitsira zinthu.

.popover('show')

Imawulula kuchuluka kwa zinthu. Imabwereranso kwa woyimba foniyo isanawonetsedwe (ie zisanachitike shown.bs.popover). Izi zimaganiziridwa kuti ndi "zamanja" zoyambitsa popover. Ma Popovers omwe mutu wawo ndi zomwe zili zazitali sizimawonetsedwa.

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

.popover('hide')

Imabisa kuchuluka kwa zinthu. Imabwereranso kwa woyimba foniyo isanabisike (ie zisanachitike hidden.bs.popover). Izi zimaganiziridwa kuti ndi "zamanja" zoyambitsa popover.

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

.popover('toggle')

Imasintha kuphulika kwa chinthu. Imabwereranso kwa woyimba foniyo isanawonetsedwe kapena kubisidwa (ie zisanachitike shown.bs.popoverkapena hidden.bs.popoverchochitikacho). Izi zimaganiziridwa kuti ndi "zamanja" zoyambitsa popover.

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

.popover('dispose')

Imabisa ndikuwononga kufalikira kwa chinthu. Ma Popovers omwe amagwiritsa ntchito kugawira ena (omwe amapangidwa pogwiritsa ntchito selectormwayi ) sangawonongedwe paokha pazoyambitsa zoyambitsa.

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

.popover('enable')

Zimapereka mwayi wowoneka bwino wa element. Popovers amayatsidwa mwachisawawa.

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

.popover('disable')

Imachotsa kuthekera kwa popover ya chinthu kuti iwonetsedwe. Popover imatha kuwonetsedwa ngati iyatsidwanso.

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

.popover('toggleEnabled')

Imasintha kuthekera kwa kufalikira kwa chinthu kuti chiwoneke kapena kubisika.

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

.popover('update')

Imasinthiratu pomwe zinthu zachuluka.

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

Zochitika

Mtundu wa Chochitika Kufotokozera
onetsani.bs.popover Chochitika ichi chimayaka nthawi yomweyo shownjira yachitsanzo itayitanidwa.
zowonetsedwa.bs.popover Chochitikachi chimachotsedwa pamene popover yawonetsedwa kwa wogwiritsa ntchito (idzadikirira kuti kusintha kwa CSS kumalize).
bisani.bs.popover Chochitika ichi chimachotsedwa nthawi yomweyo pamene hidenjira yachitsanzo yayitanidwa.
zobisika.bs.popover Chochitikachi chimachotsedwa pamene popover yatha kubisidwa kwa wogwiritsa ntchito (idikirira kuti kusintha kwa CSS kumalize).
anaika.bs.popover Chochitikachi chimachotsedwa pambuyo pa show.bs.popoverchochitikacho pamene template ya popover yawonjezedwa ku DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})