Source

Amashanyarazi

Inyandiko n'ingero zo kongera Bootstrap popovers, nkibisangwa muri iOS, kubintu byose kurubuga rwawe.

Incamake

Ibintu ugomba kumenya mugihe ukoresheje plugin ya popover:

  • Popovers yisunga isomero ryishyaka rya 3 Popper.js kugirango ihagarare. Ugomba gushyiramo popper.min.js mbere ya bootstrap.js cyangwa gukoresha bootstrap.bundle.min.js/ bootstrap.bundle.jsirimo Popper.js kugirango popovers ikore!
  • Popovers isaba ibikoresho bya plugin nkibisabwa .
  • Niba wubaka JavaScript yacu kuva isoko, birasabautil.js .
  • Popovers ihitamo kubwimpamvu zikorwa, ugomba rero kubitangiza wenyine .
  • Uburebure bwa zeru titlen'indangagaciro contentntibizigera byerekana popover.
  • Kugaragaza container: 'body'kugirango wirinde gutanga ibibazo mubice byinshi bigoye (nkitsinda ryacu ryinjiza, amatsinda ya buto, nibindi).
  • Gukurura popovers kubintu byihishe ntabwo bizakora.
  • Popovers ya .disabledcyangwa disabledibintu bigomba gukururwa kubintu bipfunyika.
  • Iyo bivuye ku byuma bifunga imirongo myinshi, popovers izaba hagati yubugari bwa rusange. Koresha .text-nowrapkuri <a>s kugirango wirinde iyi myitwarire.
  • Popovers igomba guhishwa mbere yuko ibintu bihuye bivanwa muri DOM.

Komeza usome kugirango urebe uko popovers ikora hamwe ningero zimwe.

Urugero: Gushoboza popovers ahantu hose

Uburyo bumwe bwo gutangiza popovers zose kurupapuro kwaba ari uguhitamo data-togglekubiranga:

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

Urugero: Ukoresheje containeramahitamo

Mugihe ufite uburyo bumwe kubintu byababyeyi bibangamira popover, uzashaka kwerekana imigenzo containerkugirango HTML ya popover igaragara muri kiriya kintu aho.

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

Urugero

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

Ibyerekezo bine

Amahitamo ane arahari: hejuru, iburyo, hepfo, n'ibumoso.

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

Kwirukana gukanda

Koresha focusimbarutso kugirango wirukane popovers kumukoresha ukurikiraho ibintu bitandukanye kuruta guhinduranya.

Ikimenyetso cyihariye gisabwa kugirango wirukanwe-gukurikira-gukanda

Kuburyo bukwiye bwambukiranya-mbuga hamwe nimyitwarire ya cross-platform, ugomba gukoresha <a>tagi, ntabwo ari <button>tagi, kandi ugomba no gushyiramo tabindexikiranga.

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

Ibintu byahagaritswe

Ibintu bifite disabledikiranga ntabwo bikorana, bivuze ko abakoresha badashobora kugendagenda cyangwa kubikanda kugirango batere popover (cyangwa ibikoresho). Nkumurimo wakazi, uzakenera gukurura popover uhereye kumuzingo <div>cyangwa <span>hanyuma ukarenga pointer-eventskuri element yamugaye.

Kubimuga byahagaritswe byimikorere, urashobora kandi guhitamo data-trigger="hover"kugirango popover igaragara nkibisubizo byihuse kubakoresha nkuko badashobora gutegereza gukanda kubintu bimugaye.

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

Ikoreshwa

Gushoboza popovers ukoresheje JavaScript:

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

Amahitamo

Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-, Nka Muri data-animation="".

Izina Andika Mburabuzi Ibisobanuro
animasiyo boolean ni ukuri Koresha CSS igenda ihinduka kuri popover
kontineri umugozi | ikintu | ibinyoma ibinyoma

Ongeraho popover kubintu runaka. Urugero : container: 'body'. Ihitamo ningirakamaro cyane kuberako igufasha gushyira popover mugutemba kwinyandiko hafi yikintu gikurura - bizarinda popover kureremba kure yikintu gikurura mugihe idirishya rinini.
ibirimo umugozi | ikintu | imikorere ''

Mburabuzi agaciro agaciro niba data-contentikiranga kidahari.

Niba imikorere yatanzwe, izahamagarwa hamwe thisnibisobanuro byayo kuri element popover ifatanye.
gutinda umubare | ikintu 0

Gutinda kwerekana no guhisha popover (ms) - ntabwo ikoreshwa muburyo bwintoki

Niba umubare watanzwe, gutinda gukoreshwa byombi guhisha / kwerekana

Imiterere yibintu ni:delay: { "show": 500, "hide": 100 }
html boolean ibinyoma Shyiramo HTML muri popover. Niba ari ibinyoma, uburyo bwa jQuery textbuzakoreshwa mugushyiramo ibintu muri DOM. Koresha inyandiko niba uhangayikishijwe n'ibitero bya XSS.
gushyira umugozi | imikorere 'iburyo'

Nigute ushobora gushira popover - auto | hejuru | munsi | ibumoso | iburyo.
Iyo autobisobanuwe neza, bizagenda byerekeza kuri popover.

Iyo imikorere ikoreshwa mukumenya aho ishyirwa, byitwa hamwe na popover DOM node nkibitekerezo byayo byambere hamwe na elementing DOM node nkibya kabiri. Imirongo thisyashyizweho kuri popover urugero.
uwatoranije umugozi | ibinyoma ibinyoma Niba hatoranijwe uwatoranijwe, ibintu bya popover bizahabwa intego zagenwe. Mubimenyerezo, ibi bikoreshwa mugushoboza HTML yingirakamaro kugirango hongerwe popovers. Reba ibi nurugero rwamakuru .
Inyandikorugero umugozi '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Shingiro HTML yo gukoresha mugihe uremye popover.

Ibya popover titlebizaterwa muri .popover-header.

Ibya popover contentbizaterwa muri .popover-body.

.arrowbizahinduka umwambi wa popover.

Ikintu cyo gupfunyika hanze kigomba kugira urwego .popover.
Umutwe umugozi | ikintu | imikorere ''

Mburabuzi Umutwe Agaciro niba titleIkiranga kidahari.

Niba imikorere yatanzwe, izahamagarwa hamwe thisnibisobanuro byayo kuri element popover ifatanye.
imbarutso umugozi 'kanda' Uburyo popover iterwa - kanda | hover | kwibanda | imfashanyigisho. Urashobora gutsinda imbarutso nyinshi; kubatandukanya n'umwanya. manualntishobora guhuzwa nizindi mbarutso.
offset umubare | umugozi 0 Offset ya popover ugereranije nintego yayo. Kubindi bisobanuro reba kuri popper.js ya offset ya doc .
Gusubira inyuma umugozi | array 'flip' Emera kwerekana umwanya Popper azakoresha mugusubira inyuma. Kubindi bisobanuro reba imyitwarire ya Popper.js
imbibi umugozi | element 'umuzingoParent' Kurenga imipaka imipaka ya popover. Emera indangagaciro za ,,, 'viewport'cyangwa HTMLElement yerekana (JavaScript gusa). Kubindi bisobanuro reba Popper.js yo gukumiraOverflow docs .'window''scrollParent'

Ibiranga amakuru kuri popovers kugiti cye

Amahitamo ya popovers kugiti cye arashobora kugaragazwa muburyo bwo gukoresha ibiranga amakuru, nkuko byasobanuwe haruguru.

Uburyo

Uburyo butajegajega ninzibacyuho

Inzira zose za API ntizihuza kandi zitangira inzibacyuho . Basubira kumuhamagara mugihe inzibacyuho itangiye ariko itararangira . Mubyongeyeho, uburyo bwo guhamagarira ibice byinzibacyuho bizirengagizwa .

Reba inyandiko zacu za JavaScript kubindi bisobanuro.

$().popover(options)

Itangiza popovers yikintu cyo gukusanya.

.popover('show')

Kugaragaza ikintu cya popover. Garuka kumuhamagara mbere yuko popover yerekanwe mubyukuri (nukuvuga mbere yuko shown.bs.popoveribyabaye biba). Ibi bifatwa nk "intoki" itera popover. Abapapa bafite imitwe yombi nibirimo ni zeru-burebure ntibigaragara.

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

.popover('hide')

Hisha ikintu cya popover. Garuka kumuhamagara mbere yuko popover ihishwa mubyukuri (nukuvuga mbere yuko hidden.bs.popoveribyabaye biba). Ibi bifatwa nk "intoki" itera popover.

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

.popover('toggle')

Kuzuza ikintu cya popover. Garuka kumuhamagaye mbere yuko popover yerekanwe cyangwa yihishe (nukuvuga mbere yuko ibyabaye shown.bs.popovercyangwa hidden.bs.popoveribyabaye bibaho). Ibi bifatwa nk "intoki" itera popover.

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

.popover('dispose')

Hisha kandi usenye ikintu cya popover. Popovers ikoresha delegasiyo (yashizweho hakoreshejwe amahitamoselector ) ntishobora gusenywa kugiti cye kubintu bikomokaho .

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

.popover('enable')

Itanga ikintu cya popover ubushobozi bwo kwerekanwa. Popovers ishoboye kubisanzwe.

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

.popover('disable')

Kuraho ubushobozi bwa popover yibintu kugirango yerekanwe. Popover izashobora kwerekanwa gusa niba yongeye gukora.

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

.popover('toggleEnabled')

Kuzamura ubushobozi bwa popover yibintu kugirango yerekanwe cyangwa ihishe.

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

.popover('update')

Kuvugurura umwanya wibintu bya popover.

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

Ibyabaye

Ubwoko bwibyabaye Ibisobanuro
kwerekana.bs Ibirori birasa ako kanya mugihe showurugero rwitwa.
yerekanwe.bs Ibirori birukanwa mugihe popover yakozwe igaragara kubakoresha (izategereza ko inzibacyuho ya CSS irangira).
guhisha.bs Ibi birori birahita bisohoka mugihe uburyo hidebwurugero bwahamagawe.
bihishe.bs Ibirori birukanwa mugihe popover yarangije guhishwa uyikoresha (azategereza ko inzibacyuho ya CSS irangira).
Byinjijwe.bs Ibirori birukanwe nyuma show.bs.popoveryibyabaye mugihe icyitegererezo cya popover cyongewe kuri DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})