Popovers jedhaman
Dokumantarii fi fakkeenyota Bootstrap popovers, akkuma kanneen iOS keessatti argaman, elementii kamiyyuu marsariitii keessan irratti dabaluudhaaf.
Haala Waliigalaa
Wantoota yeroo popover plugin fayyadamtan beekuu qabdan:
- Popovers ejjennoodhaaf mana kitaabaa qaama 3ffaa Popper irratti hirkatu. Poppers akka hojjetuuf bootstrap.js dura popper.min.js dabaluu qabda ykn
bootstrap.bundle.min.js
/bootstrap.bundle.js
kan Popper of keessaa qabu fayyadamuu qabda! - Popovers akka hirkattummaatti tooltip plugin barbaadu.
- Yoo JavaScript
util.js
keenya madda irraa ijaaraa jirta ta'e, . - Popovers sababa raawwii hojiitiin opt-in waan ta'aniif ofii keetii jalqabuu qabda .
- Zeeroo-dheerina
title
ficontent
gatiiwwan gonkumaa popover hin agarsiisan. container: 'body'
Qaamolee walxaxaa ta'an keessatti (akka gareewwan galtee keenyaa, gareewwan qaree fi kkf) keessatti rakkoolee agarsiisuu akka hin uumamneef ifteessi .- Elementiiwwan dhokatan irratti popovers kakaasuun hin hojjetu.
- Popovers for
.disabled
ykndisabled
elementoota elementii marfataa irratti kakaafamuu qabu. - Yeroo anchors sarara hedduu qaxxaamuran irraa kakaafamu, popovers bal'ina waliigalaa anchors' gidduutti giddugaleessa ta'a. Amala kana irraa of eeguuf s
.text-nowrap
kee irratti fayyadami .<a>
- Popovers osoo elementoonni isaanii walgitan DOM keessaa hin baafamin dura dhokfamuu qabu.
- Popovers galata elementii shadow DOM keessa jiruun kakaafamuu danda'a.
prefers-reduced-motion
gaaffii miidiyaa irratti hundaa'a. Kutaa sochii hir'ate sanada dhaqqabummaa keenyaa ilaali
.
Fakkeenyota tokko tokkoon popovers akkamitti akka hojjetan ilaaluuf dubbisuu itti fufi.
Fakkeenya: Popovers bakka hundatti dandeessisi
data-toggle
Karaan tokko fuula tokko irratti popovers hunda jalqabsiisuu danda'an amaloota isaaniitiin filachuu ta'a :
$(function () {
$('[data-toggle="popover"]').popover()
})
Fakkeenya: container
Filannoo fayyadamuu
container
Yeroo akkaataawwan tokko tokko qaama warraa irratti kanneen popover gidduu seenan qabdu, akka HTML popover'n bakka isaa qaama sana keessaa mul'atutti amala ifteessuu barbaadda .
$(function () {
$('.example-popover').popover({
container: 'body'
})
})
Fakkeenya
<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>
Kallattii afur
Filannoon afur ni jiru: gubbaa, mirgaa, jalaa, fi bitaa qindaa'e.
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
Popover on left
</button>
Cuqaasuu itti aanu irratti hojii irraa ari'i
Cuqaasuu itti aanu fayyadamaa focus
qaama adda ta'e qaama jijjiirraa irraa popovers kuffisuuf kaka'umsa fayyadami.
Mallattoo addaa cuqaasuu itti aanu irratti ari'uuf barbaachisa
Amala qaxxaamuraa-browser fi qaxxaamuraa-waltajjii sirrii ta'eef, mallattoo fayyadamuu qabda malee mallattoo fayyadamuu qabda , akkasumas<a>
amalli hammachuu qabda .<button>
tabindex
<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'
})
Qaamolee hanqifaman
Qaamonni disabled
amaloota qaban wal-qunnamsiisoo miti, jechuun fayyadamtoonni popover (ykn tooltip) kakaasuuf hover ykn cuqaasuu hin danda'an. Akka furmaataatti, popover marfata irraa kakaasuu barbaadda <div>
ykn <span>
fi pointer-events
on the on the disabled element irra darbuu barbaadda.
Kakaasitoota popover hanqifamaniif, akkasumas data-trigger="hover"
akka popover fayyadamtoota keetiif yaada mul'ataa battalumatti mul'atu filachuu dandeessa sababiin isaas isaan qaama hanqifame irratti cuqaasuu hin eegne.
<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>
Fayyadama
Popovers karaa JavaScript dandeessisi:
$('#example').popover(options)
Saffisa GPU
Popovers yeroo tokko tokko meeshaalee Windows 10 irratti sababa saffisa GPU fi DPI sirna fooyya'een blurry ta'ee mul'ata. Furmaanni kanaaf v4 keessatti akka barbaachisummaa isaatti popovers keessan irratti saffisa GPU hanqisuudha.
Sirreeffama yaadame:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
Popovers fayyadamtoota kiiboordii fi teeknooloojii gargaaraaf akka hojjetu gochuu
Fayyadamtoonni kiiboordii popovers kee akka kakaasan hayyamuuf, elementoota HTML kanneen akka aadaa kiiboordii irratti xiyyeeffachuu danda'anii fi wal-qunnamsiisoo ta'an qofatti dabaluu qabda (kan akka hidhannoo ykn too'annoo unkaa). Qaamolee HTML fedhii malee (kan akka <span>
s) amallicha dabaluudhaan xiyyeeffannoo akka qabaatan gochuun kan danda'amu ta'us tabindex="0"
, kun fayyadamtoota kiiboordiidhaaf qaamolee wal-qunnamtii hin taane irratti dhaabbii caancalaa nama aarsu fi burjaajessu danda'u ni dabala, fi teeknooloojiiwwan gargaaraa baay'een yeroo ammaa haala kana keessatti qabiyyee popover hin beeksisan . hover
Dabalataanis, akka kaka'umsa popovers keessaniif qofa irratti hin hirkatinaa , kunis fayyadamtoota kiiboordiidhaaf kakaasuun akka hin danda'amne waan taasisuuf.
Filannoo waliin popovers keessatti HTML badhaadhaa, caaseffama qabu galchuu kan dandeessu yoo ta'ellee, html
qabiyyee garmalee dabaluu irraa akka of qusattan cimsinee isin gorsina. Akkaataan popovers yeroo ammaa hojjetan, erga agarsiifamee booda, qabiyyeen isaanii elementii kaka'umsaa aria-describedby
amaloota waliin hidhamee jira. Kanarraa kan ka'e, guutummaan qabiyyee popover fayyadamtoota teeknooloojii gargaarsaaf akka yaa'a dheeraa, addaan hin cinne tokkootti ni ifooma.
Dabalataan, too'annoo walqunnamtii (kan akka qaamolee unkaa ykn hidhannoo) popover kee keessattis hammachuun kan danda'amu yoo ta'ellee (qaamolee kana whiteList
amaloota fi mallattoolee ykn hayyamaman irratti dabaluudhaan), yeroo ammaa popover tartiiba xiyyeeffannoo kiiboordii akka hin bulchine beekaa. Yeroo fayyadamaan kiiboordii popover banu, xiyyeeffannaan elementii kakaasu irratti hafa, akkasumas popover yeroo baay'ee caasaa galmee keessatti battalumatti kakaasuu waan hin hordofneef, gara fuulduraatti/dhiibuun wabii hin jiruTABfayyadamaa kiiboordii gara popover ofii isaatii ni sochoosa. Gabaabumatti, salphaatti to'annoo wal-qunnamtii popover tokkotti dabaluun too'annoowwan kana fayyadamtoota kiiboordii fi fayyadamtoota teeknooloojiiwwan gargaarsaatiif akka hin dhaqqabne/hin fayyadamne gochuu hin oolu, ykn yoo xiqqaate tartiiba xiyyeeffannoo waliigalaa loojikii hin qabne taasisuu hin oolu. Haalota kanneen keessatti, bakka isaa qaaqa moodaalii fayyadamuu yaadaa.
Filannoowwan
Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-
, akkuma keessatti dabali data-animation=""
.
sanitize
,
sanitizeFn
fi
whiteList
amaloota deetaa fayyadamuun dhiyeessuu hin danda'an.
Maqaa | Akaakuu | Durtii dha | Ibsa |
---|---|---|---|
sochii qaamaa (animation). | boolee | dhugaa | Ce'umsa CSS fade gara popover tti hojiirra oolchi |
qabduu | tarree | elementii | soba | soba | Poopover elementii murtaa'e tokkotti dabalata. Fakkeenyaaf: |
qabiyyee | tarree | elementii | faayidaa | '' . | Gatii qabiyyee durtii yoo Yoo faankishiniin kenname, |
boodatti hafuu | lakkoofsa | meeshaa | 0. | Harkifannaa agarsiisuu fi dhoksuu popover (ms) - gosa kaka'umsa harkaa irratti hin hojjetu Yoo lakkoofsi kenname, harkifannaa dhoksuu/agarsiisi lamaan irratti hojii irra oola Caasaan wantaa: 1.1. |
html | boolee | soba | HTML popover keessa galchi. Yoo soba ta'e, text mala jQuery qabiyyee gara DOMtti galchuuf fayyadama. Yoo waa'ee haleellaa XSS si yaaddesse barreeffama fayyadami. |
ramaddii | tarree | faayidaa | 'sirrii' | Akkaataa popover itti dhaabdan - auto | gubbaa | jalaa | bitaa | sirrii. Faankishiniin tokko iddoo murteessuuf yeroo fayyadamu, noodiin popover DOM akka falmii isaa isa jalqabaatti fi elementii kakaasu DOM noodiin akka lammaffaatti waamama. Yaadni |
filannoodha | tarree | soba | soba | Yoo filataan kenname, wantoonni popover galmoota ifteessamaniif ni kennamu. Qabatamaan, kun qabiyyee HTML daayinamikii popovers akka dabalaman dandeessisuuf fayyadama. Kanaa fi fakkeenya odeeffannoo qabu ilaalaa . |
unkaa | hidhaa | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
HTML yeroo popover uumtu fayyadamuuf bu'uura. Popover's Popover's
Qaamni marfataa alaa |
mata-duree | tarree | elementii | faayidaa | '' . | Gatii mata duree durtii yoo Yoo faankishiniin kenname, |
dammaqsuu | hidhaa | 'cuqaasaa'. | Akkaataa popover itti kaka'u - | cuqaasaa hover | xiyyeeffannoo | kan harkaanii. Kaka’umsa hedduu darbuu dandeessa; bakka adda baasuun addaan baasuu. manual trigger biraa kamiinuu waliin walitti makamuu hin danda’u. |
ofseeti jechuun ni danda’ama | lakkoofsa | hidhaa | 0. | Ofseeti popover kan galma isaa wajjin wal bira qabamee yoo ilaalamu. Odeeffannoo dabalataaf Popper's offset docs ilaali . |
fallbackIddoo kaa'uu | tarree | tarree | 'garagalchuu' | Popper fallback irratti ejjennoo kam akka fayyadamu ibsuuf hayyami. Odeeffannoo dabalataaf docs amala Popper ilaali |
CustomClass jedhamuun beekama | tarree | faayidaa | '' . | Yeroo agarsiifamu popover irratti kutaalee dabali. Hubadhu, gitawwan kun gitawwan kamiyyuu unkaa keessatti ifteessaman irratti dabalataan akka dabalaman. Gitoota hedduu dabaluudhaaf, iddoowwan addaan baafadhu: Akkasumas faankishinii tarree tokko maqaa gita dabalataa of keessaa qabu deebisuu qabu dabarsuu dandeessa. |
daangaa | tarree | qabiyyee | 'Warra garagalchuu'. | Daangaa danqaa dhangala'aa popover. Gatii 'viewport' , 'window' , 'scrollParent' , ykn wabii HTMLElement fudhata (JavaScript qofa). Odeeffannoo dabalataaf galmeewwan PreventOverflow Popper ilaali . |
sanitize gochuu | boolee | dhugaa | Sanitization dandeessisi ykn hanqisi. If activated 'template' , 'content' fi 'title' filannoowwan sanitized ta'u. Kutaa saanitaayizarii galmee JaavaScript keenya keessatti ilaali . |
Tarree adii | meeshaa | Gatii durtii | Wanti amaloota fi mallattoolee hayyamaman of keessaa qabu |
qulqulleessuuFn | null | faayidaa | duwwaa | Asirratti sanitize function mataa keessanii dhiyeessuu dandeessu. Kun faayidaa qabaachuu danda’a yoo mana kitaabaa addaa fayyadamuun qulqulleessuu raawwachuu barbaadde. |
popperQindeessaa | null | meeshaa | duwwaa | Qindaa'ina Popper durtii Bootstrap jijjiiruuf, qindeessaa Popper ilaali |
Amaloota deetaa popovers dhuunfaa
Filannoon popovers dhuunfaa filannoodhaan karaa fayyadama amaloota deetaa ifteessuun ni danda'ama, akkuma armaan olitti ibsame.
Malawwan
Malawwanii fi ce’umsawwan wal hin simne
Malleen API hundi wal hin simnee fi ce'umsa jalqabu . Akkuma ce'umsi jalqabame garuu osoo hin xumuramin gara nama bilbileetti deebi'u . Dabalataan, waamichi malaa qaama ce'umsaa irratti ni tuffatama .
$().popover(options)
Kuusaa elementii tokkoof popovers jalqaba.
.popover('show')
Poopover elementii tokkoo mul'isa. Poopover qabatamaan osoo hin agarsiifamiin dura (jechuunis shown.bs.popover
taatee osoo hin uumamin dura) gara waamichaatti deebi'a. Kun akka “harkaan” popover kakaasutti ilaalama. Popovers mata duree fi qabiyyeen isaanii lamaan isaanii dheerina zeeroo ta'an gonkumaa hin agarsiifaman.
$('#element').popover('show')
.popover('hide')
Poopover elementii tokkoo dhoksa. Osoo popover qabatamaan hin dhokatin (jechuun osoo hidden.bs.popover
taatee hin uumamin dura) gara waamichaatti deebi'a. Kun akka “harkaan” popover kakaasutti ilaalama.
$('#element').popover('hide')
.popover('toggle')
Poopover elementii tokkoo jijjiira. Osoo popover qabatamaan hin agarsiifamin ykn hin dhokatiin dura gara waamichaatti deebi'a (jechuunis osoo taatee shown.bs.popover
ykn hin uumamin dura hidden.bs.popover
). Kun akka “harkaan” popover kakaasutti ilaalama.
$('#element').popover('toggle')
.popover('dispose')
Popover elementii tokkoo dhoksee balleessa. Popovers kanneen delegation fayyadaman ( kanneen selector
filannoo fayyadamuun uumaman ) elementoota kaka'umsa sanyii irratti dhuunfaan balleessuu hin danda'an.
$('#element').popover('dispose')
.popover('enable')
Poopover elementii tokkoo dandeettii agarsiifamuu kenna. Popovers durtiidhan dandeessifama.
$('#element').popover('enable')
.popover('disable')
Dandeettii popover elementii tokkoo agarsiisuuf qabu ni haqa. Popover agarsiisuu kan danda'u yoo irra deebi'amee dandeessifame qofa.
$('#element').popover('disable')
.popover('toggleEnabled')
Dandeettii popover elementii akka agarsiifamu ykn dhokfamuuf jijjiira.
$('#element').popover('toggleEnabled')
.popover('update')
Ejjennoo popover elementii tokkoo fooyyessa.
$('#element').popover('update')
Taateewwan
Gosa Taatee | Ibsa |
---|---|
agarsiisi.bs.hiyyummaa | Taatee kun yeroo show mala fakkeenyaa waamamu battalumatti dhukaasa. |
agarsiise.bs.hiyyummaa | Taatee kun yeroo popover fayyadamaaf mul'atu taasifamu ni ari'ama (ce'umsa CSS xumuramu ni eega). |
dhoksi.bs.hiyyummaa | Taatee kun yeroo hide mala fakkeenyaa waamame battalumatti dhukaafama. |
dhokataa.bs.hiyyummaa | Taatee kun yeroo popover fayyadamaa irraa dhokatee xumure ni ari'ama (ce'umsa CSS xumuramu ni eega). |
galfame.bs.hiyyummaa | Taatee kun taatee booda show.bs.popover yeroo unkaan popover DOM irratti dabalame ari'ama. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})