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 .text-nowrapaad <a>uga fogaato dhaqankan.
Rabshadaha waa in la qariyaa ka hor inta aan laga saarin walxaha u dhigma ee DOM.
Popovers waa la kicin karaa iyada oo ay ugu wacan tahay shay ku jira hadhka DOM.

Saamaynta animation ee qaybtani waxay ku xidhan tahay prefers-reduced-motionwaydiinta warbaahinta. Eeg qaybta dhaqdhaqaaqa la dhimay ee dukumeenti gelitaankeena .

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 `container`ikhtiyaarka

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="".

Ogsoonow in sababo ammaan dartood sanitize, sanitizeFniyo whiteListikhtiyaarrada aan lagu bixin karin iyadoo la adeegsanayo sifooyinka xogta.

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-content`sifadu aanay jirin. Haddii shaqo la bixiyo, waxa loo yeedhi doonaa iyada oo `this`tixraaceeda 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, `text`habka 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 `auto`la 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 `this`guud 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 `title`ayaa lagu duri doonaa `.popover-header`. Popover's `content`ayaa lagu duri doonaa `.popover-body`. `.arrow`waxay noqon doontaa fallaadha popover. Cutubka duubka ugu dambeeya waa inuu lahaadaa `.popover`fasalka.
horyaalka	xadhig \| element \| shaqayn	''	Qiimaha cinwaanka caadiga ah haddii `title`sifadu aanay jirin. Haddii shaqo la bixiyo, waxa loo yeedhi doonaa iyada oo `this`tixraaceeda 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. `manual`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 .
nadaafadda	booliyan	run	Daar ama dami nadaafadda Haddii la hawlgeliyo `'template'`, `'content'`iyo `'title'`fursadaha waa la nadiifin doonaa.
Liis cad	walax	Qiimaha caadiga ah	Shayga oo ka kooban sifooyin iyo calaamado la oggol yahay
nadaafaddaFn	waxba \| shaqayn	waxba	Halkan waxa aad ku keeni kartaa shaqadaada nadaafadda. Tani waxay noqon kartaa mid faa'iido leh haddii aad doorbidayso inaad isticmaasho maktabad gaar ah si aad u sameyso nadaafadda.

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 `show`habka tusaalaha 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 `hide`habka 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.popover`marka qaabka popover lagu daray DOM.

$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})