Source

Popovers

Dukumeenti iyo tusaalooyin lagu daro Bootstrap popovers, sida kuwa laga helo iOS, shay kasta oo ku yaal boggaaga.

Dulmar

Waxyaabaha ay tahay in la ogaado marka la isticmaalayo popover plugin:

  • Popovers waxay ku tiirsan yihiin maktabadda xisbiga 3aad Popper.js meelaynta. Waa inaad ku darto popper.min.js ka hor bootstrap.js ama isticmaal bootstrap.bundle.min.js/ bootstrap.bundle.jska kooban Popper.js si ay popovers u shaqeeyaan!
  • Popovers waxay u baahan yihiin plugin tip -ku-tiirsanaan ahaan.
  • Haddii aad JavaScript-kayaga ka dhisayso isha, waxay u baahan tahayutil.js .
  • Popovers waxay u soo galeen sababo waxqabad dartood, marka waa inaad adigu bilawdaa .
  • Dhererka eber titleiyo contentqiyamku weligood ma muujin doonaan popover.
  • Qeex container: 'body'si aad uga fogaato soo jeedinta dhibaatooyinka qaybo badan oo kakan (sida kooxahayada wax gelinta, kooxaha badhanka, iwm).
  • Kicinta popovers ee walxaha qarsoon ma shaqayn doono.
  • Popovers .disabledama disabledcuriyayaasha waa in lagu kiciyo curiyaha duubka ah.
  • Marka laga soo kiciyo barroosinno isku duuban dhowr xariiq, popovers waxay dhexda u ahaan doonaan ballaca guud ee barroosinnada. Isticmaal s si white-space: nowrap;aad <a>uga fogaato dhaqankan.
  • Rabshadaha waa in la qariyaa ka hor inta aan laga saarin walxaha u dhigma ee DOM.

Sii wad akhri si aad u aragto sida popovers ula shaqeeyaan tusaalooyinka qaarkood.

Tusaale: Dari popovers meel kasta

Hal dariiqo oo lagu bilaabi karo dhammaan popovers bogga waxay noqon kartaa in lagu xusho data-togglesifadooda:

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

Tusaale: Isticmaalka containerikhtiyaarka

Markaad haysatid qaabab qaar oo ah walxaha waalidka ee farageliya popover, waxaad u baahan doontaa inaad qeexdo caado containersi HTML popover's uu uga dhex muuqdo qaybtaas.

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

Tusaale

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

Afar jiho

Afar doorasho ayaa diyaar ah: sare, midig, hoose, iyo bidix oo toosan.

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

Ka saar marka xigta guji

Isticmaal focuskiciyeyaasha si aad u tirtirto popovers ee ku xiga isticmaaluhu ee shay ka duwan curiyaha beddelka.

Calaamadayn gaar ah ayaa loo baahan yahay si loo joojiyo-ku-xigta-guji

Si aad u hesho hab-dhaqan iskutallaab ah oo ku habboon iyo hab-dhaqan-madal-madal ah, waa inaad isticmaashaa <a>summada, maaha summada , <button>sidoo kale waa inaad ku dartaa tabindexsifo.

Daaqsimeedka aan la joojin karin 
<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'
})

Curiyayaasha naafada

Qaybaha sifada leh disabledma aha kuwo is dhexgal ah, taasoo la macno ah isticmaalayaashu ma lumi karaan ama ma gujin karaan si ay u kiciyaan popover (ama qalab). Xakameyn ahaan, waxaad u baahan doontaa inaad ka kiciso popover ka duubka <div>ama <span>oo aad ka gudubto pointer-eventsqaybta naafada ah.

Kiciyeyaasha popover naafada, waxa kale oo aad doorbidi kartaa data-trigger="hover"si popover-ku ugu muuqdo jawaab celin muuqaal degdeg ah isticmaalayaashaada maadaama laga yaabo in aanay filanayn inay gujiyaan shay naafada ah.

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

Isticmaalka

U oggolow popovers iyada oo loo marayo JavaScript:

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

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-animation="".

Magaca Nooca Asal ahaan Sharaxaada
animation booliyan run Codso u gudbida libdhicida CSS ilaa popover
weel xadhig | element | been ah been ah

Ku dhejinta popover-ka shay gaar ah. Tusaale container: 'body':. Doorashadani waxay si gaar ah faa'iido u leedahay inay kuu ogolaato inaad ku dhejiso qulqulka qulqulka dukumeentiga u dhow curiyaha kiciya - kaas oo ka ilaalin doona popover inuu ka sabbeeyo walxaha kiciya inta lagu jiro cabbirka daaqada.
nuxurka xadhig | element | shaqayn ''

Qiimaha nuxurka asalka ah haddii data-contentsifadu aanay jirin.

Haddii shaqo la bixiyo, waxa loo yeedhi doonaa iyada oo thistixraaceeda loo dejiyey curiyaha popover-ku ku dheggan yahay.
dib u dhac lambarka | walax 0

Dib u dhigista muujinta iyo qarinta popover (ms) - kuma khusayso nooca kiciya gacanta

Haddii nambar la keeno, dib u dhac ayaa lagu dabaqayaa qarinta/muujinta labadaba

Qaab dhismeedka shaygu waa:delay: { "show": 500, "hide": 100 }
html booliyan been ah Geli HTML-ka popover-ka Haddi ay been tahay, texthabka jQuery ayaa loo isticmaali doonaa in lagu geliyo macluumaadka DOM. Isticmaal qoraal haddii aad ka welwelsan tahay weerarrada XSS.
meelaynta xadhig | shaqayn 'sax'

Sida loo dhigo popover - auto | sare | hoose | bidix | xaq.
Marka autola cayimo, waxay si firfircoon dib u habayn doontaa popover-ka.

Marka hawl loo isticmaalo si loo go'aamiyo meelaynta, waxaa lagu magacaabaa node popover DOM oo ah dooddeeda kowaad iyo curiyaha DOM node oo ah kan labaad. Macnaha thisguud waxa loo dejiyay tusaale popover.
dooriye xadhig | been ah been ah Haddii doorasho la bixiyo, shayada soo boodaya waxa loo igmaday bartilmaameedyada la cayimay. Ficil ahaan, tan waxaa loo istcimaalaa in lagu suurtageliyo nuxurka HTML ee firfircoon in lagu daro popovers. Bal tan iyo tusaale wargelin ah eeg .
template xadhig '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

HTML saldhig si loo isticmaalo marka la abuurayo popover.

Popover's titleayaa lagu duri doonaa .popover-header.

Popover's contentayaa lagu duri doonaa .popover-body.

.arrowwaxay noqon doontaa fallaadha popover.

Cutubka duubka ugu dambeeya waa inuu lahaadaa .popoverfasalka.
horyaalka xadhig | element | shaqayn ''

Qiimaha cinwaanka caadiga ah haddii titlesifadu aanay jirin.

Haddii shaqo la bixiyo, waxa loo yeedhi doonaa iyada oo thistixraaceeda loo dejiyey curiyaha popover-ku ku dheggan yahay.
kicin xadhig 'guji' Sida popover u kiciyo - guji | dullid | diiradda | buug-gacmeedka. Waxaad ka gudbi kartaa kiciyeyaasha badan; meel bannaan ku kala saar. 'Buug' laguma dari karo kiciye kale.
dhimis lambarka | xadhig 0 Deminta popover marka loo eego bartilmaameedka. Macluumaad dheeraad ah ka eeg dukumeentiyada dhimista ee Popper.js .
fallbackPlacement xadhig | diyaarin 'rogid' Oggolow inuu caddeeyo booska Popper uu isticmaali doono dib-u-dhaca. Wixii macluumaad dheeraad ah tixraac dukumeentiyada dabeecadda Popper.js
xuduud xadhig | curiye 'waalidiinta' Xadka xad-dhaafka ah ee xaddidaadda popover. Aqbala qiyamka 'viewport', 'window', 'scrollParent', ama tixraaca HTMLElement (JavaScript kaliya). Macluumaad intaas ka badan ka eeg dukumeentiyada Popper.js ee ka hortagga qulqulka .

Sifooyinka xogta ee popovers shaqsi

Ikhtiyaarada popovers shakhsi ahaan waxaa lagu qeexi karaa iyada oo la isticmaalayo sifooyin xogta, sida kor lagu sharaxay.

Hababka

Hababka iyo kala-guurka asynchronous

Dhammaan hababka API waa isku mid waxayna bilaabaan kala-guurka . Waxay ku soo noqdaan qofka soo wacaya isla markii uu bilaabmo kala-guurka laakiin ka hor inta uusan dhammaan . Intaa waxaa dheer, hab ku baaqaya in qayb ka beddelka waa la iska indhatiray .

Ka eeg dukumeentiyada JavaScript wixii macluumaad dheeraad ah

$().popover(options)

Wuxuu u bilaabaa popovers ururinta curiyaha.

.popover('show')

Waxay daaha ka qaadaysaa soo boodada curiyaha Ku soo noqoshada soo wacaha ka hor inta aan si dhab ah loo muujin popover (tusaale ka hor intaanay shown.bs.popoverdhacdada dhicin). Tan waxa loo tixgaliyaa "buuga" kicinta popover. Popovers oo ciwaanka iyo nuxurkooduba yihiin eber-dherer weligood lama soo bandhigin.

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

.popover('hide')

Wuxuu qariyaa boodboodka curiyaha. Ku soo noqoshada soo wacaha ka hor inta aan bood-boodka dhab ahaantii la qarin (ie ka hor intaanay hidden.bs.popoverdhacdada dhicin). Tan waxa loo tixgaliyaa "buuga" kicinta popover.

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

.popover('toggle')

Beddelaa soo boodada curiyaha Ku soo noqda qofka soo wacaya ka hor inta aan bood-boodka dhab ahaantii la muujin ama la qarin (tusaale ka hor inta aanay dhacdada shown.bs.popoverama hidden.bs.popoverdhacdada dhicin). Tan waxa loo tixgaliyaa "buuga" kicinta popover.

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

.popover('dispose')

Qariyaa oo baabi'iyaa popover element. Popovers isticmaala ergada (kuwaas oo la abuuray iyadoo la isticmaalayo ikhtiyaarka selector) si gaar ah looma baabi'in karo walxaha kiciya faraca.

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

.popover('enable')

Siinaya popover element awood lagu muujiyo. Popovers waa la dajiyay si toos ah.

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

.popover('disable')

Waxay meesha ka saartaa awoodda soo-bandhigidda curiyaha si loo muujiyo. Booqashada ayaa la tusi karaa oo keliya haddii dib loo hawlgeliyo.

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

.popover('toggleEnabled')

Waxay beddeshaa awoodda boodboodka curiyaha si loo muujiyo ama loo qariyo.

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

.popover('update')

Waxay cusboonaysiisaa booska boodboodka curiyaha.

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

Dhacdooyinka

Nooca Dhacdada Sharaxaada
show.bs.popover Dhacdadani waxay isla markaaba gubataa marka showhabka tusaale ahaan la yiraahdo.
la tusay.bs.popover Dhacdadan waxa la eryaa marka popover-ka laga dhigo mid la arki karo isticmaaluhu (waxay sugi doontaa inta uu CSS ka gudbayo dhamaystirka).
qari.bs.popover Dhacdadan ayaa isla markaaba la eryaa marka hidehabka tusaale ahaan loo waco.
qarsoon.bs.popover Dhacdadan waxa la eryaa marka popover-ku dhammeeyo in laga qariyo isticmaalaha (waxay sugi doontaa inta uu CSS ka gudbayo dhamaystirka).
la geliyey.bs.popover Dhacdadan ayaa la eryaa dhacdada ka dib show.bs.popovermarka qaabka popover lagu daray DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})