Source

Popovers

Takaddun bayanai da misalai don ƙara abubuwan buƙatun Bootstrap, kamar waɗanda aka samu a cikin iOS, zuwa kowane nau'i akan rukunin yanar gizon ku.

Dubawa

Abubuwan da ya kamata ku sani lokacin amfani da plugin ɗin popover:

  • Popovers sun dogara da ɗakin karatu na ɓangare na uku Popper.js don matsayi. Dole ne ku haɗa popper.min.js kafin bootstrap.js ko amfani bootstrap.bundle.min.js/ bootstrap.bundle.jswanda ya ƙunshi Popper.js domin popovers suyi aiki!
  • Popovers suna buƙatar plugin ɗin kayan aiki azaman abin dogaro.
  • Idan kuna gina JavaScript ɗin mu daga tushe, yana buƙatarutil.js .
  • Popovers suna shiga don dalilai na aiki, don haka dole ne ka fara su da kanka .
  • Tsawon sifili titleda contentƙima ba za su taɓa nuna buguwa ba.
  • Ƙayyade container: 'body'don guje wa yin matsaloli a cikin ƙarin hadaddun abubuwa (kamar ƙungiyoyin shigar da mu, ƙungiyoyin maɓalli, da sauransu).
  • Haɓaka popovers akan abubuwan ɓoye ba zai yi aiki ba.
  • Popovers don .disabledko disabledabubuwan dole ne a kunna su akan abin nadi.
  • Lokacin da aka kunna shi daga anka waɗanda ke nannade cikin layi ɗaya, popovers za su kasance a tsakiya tsakanin faɗin anka gaba ɗaya. Yi amfani .text-nowrapda <a>s ɗin ku don guje wa wannan halin.
  • Dole ne a ɓoye maɓuɓɓuka kafin a cire abubuwan da suka dace daga DOM.

Ci gaba da karantawa don ganin yadda popovers ke aiki tare da wasu misalai.

Misali: Kunna popovers ko'ina

Hanya ɗaya don fara duk popovers akan shafi shine zaɓi su ta hanyar data-togglehalayensu:

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

Misali: Amfani da containerzaɓi

Lokacin da kake da wasu nau'ikan nau'ikan nau'ikan iyaye waɗanda ke tsoma baki tare da popover, za ku so ku saka al'ada containerta yadda HTML ɗin popover ta bayyana a cikin wannan kashi maimakon.

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

Misali

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

Hanyoyi hudu

Akwai zaɓuɓɓuka huɗu: saman, dama, ƙasa, da hagu masu layi.

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

Kore a danna gaba

Yi amfani da focusfaɗakarwa don korar popovers akan danna gaba na mai amfani na wani nau'i na daban fiye da abin juyawa.

Takamaiman alamar da ake buƙata don korar-kan-na gaba-danna

Don dacewa da mai binciken giciye da kuma halayyar dandamali, dole ne ku yi amfani da <a>alamar, ba alamar ba <button>, kuma dole ne ku haɗa da tabindexsifa.

Popover mai lalacewa 
<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'
})

Abubuwan da aka kashe

Abubuwan da ke da disabledsifa ba su da ma'amala, ma'ana masu amfani ba za su iya yin shawagi ko danna su don jawo popover (ko kayan aiki ba). A matsayin madaidaicin aiki, zaku so kunna popover daga abin rufe fuska <div>ko <span>kuma ku soke abin da ke pointer-eventskan nakasa.

Don naƙasassun abubuwan faɗowa, kuna iya gwammace data-trigger="hover"ta yadda popover ɗin ya bayyana azaman ra'ayin gani nan da nan ga masu amfani da ku saboda ƙila ba za su yi tsammanin danna kan wani guragu ba.

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

Amfani

Kunna popovers ta JavaScript:

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

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-animation="".

Suna Nau'in Default Bayani
tashin hankali boolean gaskiya Aiwatar da canjin Fade CSS zuwa popover
ganga zaren | kashi | karya karya

Haɗa popover zuwa takamaiman yanki. Misali container: 'body':. Wannan zaɓin yana da amfani musamman domin yana ba ku damar sanya popover a cikin kwararar daftarin aiki kusa da abin da ke haifarwa - wanda zai hana popover daga shawagi daga abin da ke kunnawa yayin girman taga.
abun ciki zaren | kashi | aiki ''

Tsohuwar ƙimar abun ciki idan data-contentsifa ba ta nan.

Idan an ba da aiki, za a kira shi tare da thissaita saitin abin da aka makala popover da shi.
jinkiri lamba | abu 0

Jinkirin nunawa da ɓoye popover (ms) - baya shafi nau'in fararwa na hannu

Idan an ba da lamba, ana amfani da jinkiri ga duka ɓoye/nunawa

Tsarin abu shine:delay: { "show": 500, "hide": 100 }
html boolean karya Saka HTML a cikin popover. Idan ƙarya, textza a yi amfani da hanyar jQuery don saka abun ciki a cikin DOM. Yi amfani da rubutu idan kun damu da harin XSS.
jeri zaren | aiki 'dama'

Yadda ake sanya popover - auto | saman | kasa | hagu | dama.
Lokacin autoda aka ƙayyade, zai sake jujjuya yanayin popover.

Lokacin da aka yi amfani da aiki don ƙayyade wurin, ana kiran shi tare da kumburin DOM popover a matsayin hujjarsa ta farko da maɓallin DOM mai jawowa a matsayin na biyu. An thissaita mahallin zuwa misalin popover.
mai zaɓe zaren | karya karya Idan an samar da mai zaɓe, za a ba da abubuwan da za a yi amfani da su zuwa ƙayyadaddun manufa. A aikace, ana amfani da wannan don ba da damar abun ciki na HTML mai ƙarfi don ƙara fa'ida. Dubi wannan da misali mai ba da labari .
samfuri kirtani '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Tushen HTML don amfani yayin ƙirƙirar popover.

Za a yi allurar popover titlea cikin .popover-header.

Za a yi allurar popover contenta cikin .popover-body.

.arrowzai zama kibiya popover.

Abun nadi na waje yakamata ya kasance yana da .popoveraji.
take zaren | kashi | aiki ''

Tsohuwar ƙimar take idan babu titlesifa.

Idan an ba da aiki, za a kira shi tare da thissaita saitin abin da aka makala popover da shi.
jawo kirtani 'danna' Yadda ake kunna popover - danna | shawa | mayar da hankali | manual. Kuna iya wuce abubuwan jan hankali da yawa; raba su da sarari. manualba za a iya haɗa shi da wani abin tayar da hankali ba.
biya diyya lamba | kirtani 0 Matsalolin popover dangane da manufar sa. Don ƙarin bayani koma zuwa Popper.js's offset docs .
fallbackPlacement zaren | tsararru 'juya' Bada izinin saka ko wane matsayi Popper zai yi amfani da shi akan koma baya. Don ƙarin bayani koma zuwa Docs halayyar Popper.js
iyaka zaren | kashi ' gungurawaParent' Matsakaicin ƙaƙƙarfan iyaka na popover. Yana karɓar ƙimar 'viewport', 'window', 'scrollParent', ko ma'anar HTMLElement (JavaScript kawai). Don ƙarin bayani koma zuwa Popper.js's preventoverflow docs .

Halayen bayanai don faɗuwar mutum ɗaya

Zaɓuɓɓuka don faɗuwar faɗuwar mutum ɗaya ana iya a madadin su ta hanyar amfani da sifofin bayanai, kamar yadda aka bayyana a sama.

Hanyoyin

Hanyoyi masu daidaitawa da canji

Duk hanyoyin API ba daidai ba ne kuma suna fara canji . Suna komawa ga mai kiran da zarar an fara canji amma kafin ya ƙare . Bugu da ƙari, za a yi watsi da kiran hanya akan ɓangaren canji .

Duba takaddun JavaScript ɗin mu don ƙarin bayani.

$().popover(options)

Yana farawa popovers don tarin abubuwa.

.popover('show')

Yana bayyana faɗuwar wani abu. Komawa ga mai kira kafin a nuna popover a zahiri (watau kafin shown.bs.popoverabin ya faru). Ana ɗaukar wannan a matsayin "manual" yana haifar da popover. Popovers waɗanda duka take da abun ciki ba tsawon sifili ba ba a taɓa nunawa ba.

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

.popover('hide')

Yana ɓoye ɓoyayyen abu. Komawa ga mai kira kafin a ɓoye popover a zahiri (watau kafin hidden.bs.popoverabin ya faru). Ana ɗaukar wannan a matsayin "manual" yana haifar da popover.

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

.popover('toggle')

Yana jujjuya faɗuwar wani abu. Komawa ga mai kira kafin a nuna ko ɓoye a zahiri (watau kafin abin shown.bs.popoverko hidden.bs.popoverabin ya faru). Ana ɗaukar wannan a matsayin "manual" yana haifar da popover.

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

.popover('dispose')

Yana ɓoyewa da lalata faɗuwar wani abu. Popovers da ke amfani da wakilai (waɗanda aka ƙirƙira ta amfani da selectorzaɓi ) ba za a iya lalata su daban-daban akan abubuwan da ke haifar da zuriya ba.

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

.popover('enable')

Yana ba da popover na kashi ikon nunawa. Ana kunna Popovers ta tsohuwa.

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

.popover('disable')

Yana kawar da damar da za a iya nunawa wani abu na popover. Za a iya nunawa popover kawai idan an sake kunna shi.

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

.popover('toggleEnabled')

Yana jujjuya ikon faɗuwar wani abu don nunawa ko ɓoye.

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

.popover('update')

Yana sabunta matsayin popover na kashi.

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

Abubuwan da suka faru

Nau'in Taron Bayani
nuna.bs.popover Wannan taron yana gobara nan da nan lokacin da showaka kira hanyar misali.
nuna.bs.popover Ana korar wannan taron lokacin da aka bayyana popover ga mai amfani (zai jira canjin CSS ya kammala).
boye.bs.popover Ana korar wannan taron nan da nan lokacin da hideaka kira hanyar misali.
boye.bs.popover Ana korar wannan taron lokacin da popover ya gama ɓoyewa daga mai amfani (zai jira canjin CSS ya kammala).
shigar.bs.popover An kori wannan taron bayan show.bs.popovertaron lokacin da aka ƙara samfurin popover zuwa DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})