Popovers
Dokumentazzjoni u eżempji għaż-żieda ta 'popovers Bootstrap, bħal dawk misjuba fl-iOS, ma' kwalunkwe element fuq is-sit tiegħek.
Ħarsa ġenerali
Affarijiet li għandek tkun taf meta tuża l-plugin popover:
- Popovers jiddependu fuq il-librerija tal-parti 3 Popper għall-ippożizzjonar. Int trid tinkludi popper.min.js qabel bootstrap.js jew tuża
bootstrap.bundle.min.js
/bootstrap.bundle.js
li fih Popper sabiex popovers jaħdmu! - Popovers jeħtieġu l- plugin tooltip bħala dipendenza.
- Jekk qed tibni JavaScript tagħna mis-sors, teħtieġ
util.js
. - Popovers huma opt-in għal raġunijiet ta' prestazzjoni, għalhekk trid tinizjalizzahom lilek innifsek .
- Tul żero
title
ucontent
valuri qatt mhu se juru popover. - Speċifika
container: 'body'
biex tevita problemi ta' rendering f'komponenti aktar kumplessi (bħal gruppi ta' input tagħna, gruppi ta' buttuni, eċċ). - Li tqajjem popovers fuq elementi moħbija mhux se taħdem.
- Popovers għal
.disabled
jewdisabled
elementi għandhom jiġu attivati fuq element tat-tgeżwir. - Meta attivata minn ankri li jkebbew fuq linji multipli, popovers se jkunu ċċentrati bejn il-wisa 'ġenerali tal-ankri. Uża
.text-nowrap
fuq tiegħek<a>
biex tevita din l-imġieba. - Popovers għandhom ikunu moħbija qabel ma l-elementi korrispondenti tagħhom ikunu tneħħew mid-DOM.
- Popovers jistgħu jiġu attivati grazzi għal element ġewwa dell DOM.
prefers-reduced-motion
-mistoqsija tal-midja. Ara t-
taqsima tal-mozzjoni mnaqqsa tad-dokumentazzjoni tagħna dwar l-aċċessibbiltà .
Kompli aqra biex tara kif jaħdmu popovers b'xi eżempji.
Eżempju: Ippermetti popovers kullimkien
Mod wieħed biex jiġu inizjalizzati l-popovers kollha fuq paġna jkun li tagħżelhom skont l- data-toggle
attribut tagħhom:
$(function () {
$('[data-toggle="popover"]').popover()
})
Eżempju: Uża l- container
għażla
Meta jkollok xi stili fuq element ġenitur li jinterferixxu ma 'popover, tkun trid tispeċifika custom container
sabiex l-HTML tal-popover jidher f'dak l-element minflok.
$(function () {
$('.example-popover').popover({
container: 'body'
})
})
Eżempju
<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>
Erba' direzzjonijiet
Erba' għażliet huma disponibbli: fuq, lemin, qiegħ, u xellug allinjat.
<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>
Tkeċċi fuq ikklikkja li jmiss
Uża l- focus
grillu biex tkeċċi popovers fuq il-klikk li jmiss tal-utent ta 'element differenti mill-element toggle.
Markup speċifiku meħtieġ għal dismiss-on-next-click
Għal imġieba xierqa cross-browser u cross-platform, trid tuża t- <a>
tikketta, mhux it- <button>
tikketta, u trid tinkludi wkoll tabindex
attribut.
<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'
})
Elementi b'diżabilità
L-elementi bl- disabled
attribut mhumiex interattivi, jiġifieri l-utenti ma jistgħux jgħadduhom jew ikklikkjahom biex iqanqlu popover (jew tooltip). Bħala soluzzjoni, tkun trid tiskatta l-popover minn tgeżwir <div>
jew <span>
u tegħleb l pointer-events
-element fuq l-element b'diżabilità.
Għal popover triggers b'diżabilità, tista 'wkoll tippreferi data-trigger="hover"
sabiex il-popover jidher bħala feedback viżwali immedjat lill-utenti tiegħek peress li jistgħu ma jistennewx li jikklikkjaw fuq element b'diżabilità.
<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>
Użu
Ippermetti popovers permezz ta' JavaScript:
$('#example').popover(options)
Aċċelerazzjoni tal-GPU
Popovers kultant jidhru mċajpra fuq it-tagħmir Windows 10 minħabba l-aċċelerazzjoni tal-GPU u DPI tas-sistema modifikata. Il-soluzzjoni għal dan f'v4 hija li tiddiżattiva l-aċċelerazzjoni tal-GPU kif meħtieġ fuq il-popovers tiegħek.
Soluzzjoni suġġerita:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
Li tagħmel popovers jaħdmu għall-utenti tat-tastiera u tat-teknoloġija assistiva
Biex tippermetti lill-utenti tat-tastiera jattivaw il-popovers tiegħek, għandek iżżidhom biss ma' elementi HTML li tradizzjonalment huma ffukati fuq it-tastiera u interattivi (bħal links jew kontrolli tal-formoli). Għalkemm elementi HTML arbitrarji (bħal <span>
s) jistgħu jsiru ffukabbli billi żżid l- tabindex="0"
attribut, dan iżid tab stops potenzjalment tedjanti u konfużi fuq elementi mhux interattivi għall-utenti tat-tastiera, u l-biċċa l-kbira tat-teknoloġiji ta’ assistenza bħalissa ma jħabbrux il-kontenut tal-popover f’din is-sitwazzjoni . Barra minn hekk, tistrieħx biss fuq hover
bħala l-grillu għall-popovers tiegħek, peress li dan jagħmilha impossibbli li jiġu attivati għall-utenti tat-tastiera.
Filwaqt li tista' ddaħħal HTML sinjuri u strutturat f'popovers bl- html
għażla, nirrakkomandaw bil-qawwa li tevita li żżid ammont eċċessiv ta' kontenut. Il-mod kif jaħdmu l-popovers bħalissa huwa li, ladarba jintwerew, il-kontenut tagħhom huwa marbut mal-element grillu bl- aria-describedby
attribut. Bħala riżultat, il-kontenut kollu tal-popover se jitħabbar lill-utenti tat-teknoloġija assistiva bħala fluss wieħed twil u mhux interrott.
Barra minn hekk, filwaqt li huwa possibbli li tinkludi wkoll kontrolli interattivi (bħal elementi tal-formola jew links) fil-popover tiegħek (billi żżid dawn l-elementi mal- whiteList
attributi u t-tags permessi jew), kun konxju li bħalissa l-popover ma jamministrax l-ordni tal-fokus tat-tastiera. Meta utent tat-tastiera jiftaħ popover, l-attenzjoni tibqa 'fuq l-element ta' attivazzjoni, u peress li l-popover normalment ma jsegwix immedjatament il-grillu fl-istruttura tad-dokument, m'hemm l-ebda garanzija li jimxi 'l quddiem/ippressarTABse tmexxi utent tat-tastiera fil-popover innifsu. Fil-qosor, sempliċiment li żżid kontrolli interattivi ma 'popover x'aktarx li tagħmel dawn il-kontrolli ma jistgħux jintlaħqu/ma jistgħux jintużaw għall-utenti tat-tastiera u l-utenti ta' teknoloġiji ta 'assistenza, jew għall-inqas tagħmel ordni ta' fokus ġenerali illoġika. F'dawn il-każijiet, ikkunsidra li tuża djalogu modali minflok.
Għażliet
L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-
, bħal f' data-animation=""
.
sanitize
,
sanitizeFn
u
l- whiteList
għażliet ma jistgħux jiġu forniti bl-użu ta' attributi tad-dejta.
Isem | Tip | Default | Deskrizzjoni |
---|---|---|---|
animazzjoni | boolean | veru | Applika transizzjoni ta' fade CSS għall-popover |
kontenitur | spag | element | falza | falza | Jwaħħal il-popover ma' element speċifiku. Eżempju: |
kontenut | spag | element | funzjoni | '' | Valur tal-kontenut default jekk Jekk tingħata funzjoni, tissejjaħ bir- |
dewmien | numru | oġġett | 0 | Dewmien li juri u jaħbi l-popover (ms) - ma japplikax għat-tip ta' grillu manwali Jekk jiġi fornut numru, id-dewmien jiġi applikat kemm għall-ħbi/turi L-istruttura tal-oġġett hija: |
html | boolean | falza | Daħħal HTML fil-popover. Jekk falz, il-metodu ta' jQuery text se jintuża biex jiddaħħal kontenut fid-DOM. Uża test jekk int inkwetat dwar attakki XSS. |
tqegħid | spag | funzjoni | 'dritt' | Kif tpoġġi l-popover - auto | fuq | qiegħ | xellug | dritt. Meta funzjoni tintuża biex tiddetermina t-tqegħid, tissejjaħ bin-node DOM popover bħala l-ewwel argument tagħha u n-nodu DOM tal-element triggering bħala t-tieni. Il- |
selettur | spag | falza | falza | Jekk jiġi pprovdut selettur, oġġetti popover jiġu delegati lill-miri speċifikati. Fil-prattika, dan jintuża biex jippermetti kontenut HTML dinamiku li jkollu popovers miżjuda. Ara dan u eżempju informattiv . |
mudell | spag | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Bażi HTML biex tuża meta toħloq il-popover. Il-popover's Il-popover's
L-element tat-tgeżwir l-aktar 'il barra għandu jkollu l- |
titolu | spag | element | funzjoni | '' | Valur tat-titlu default jekk Jekk tingħata funzjoni, tissejjaħ bir- |
grillu | spag | 'ikklikkja' | Kif jinqabad popover - ikklikkja | iddur | tiffoka | manwal. Inti tista 'tgħaddi triggers multipli; jifredhom bi spazju. manual ma jistax jiġi kkombinat ma' kwalunkwe trigger ieħor. |
offset | numru | spag | 0 | Offset tal-popover relattiv mal-mira tiegħu. Għal aktar informazzjoni irreferi għad-dokumenti tal- offset ta’ Popper . |
FallbackPlacement | spag | firxa | 'flip' | Ħalli tispeċifika liema pożizzjoni se juża Popper fuq riżerva. Għal aktar informazzjoni irreferi għad-dokumenti tal- imġieba ta’ Popper |
customClass | spag | funzjoni | '' | Żid klassijiet mal-popover meta jintwera. Innota li dawn il-klassijiet se jiġu miżjuda flimkien ma' kwalunkwe klassi speċifikata fil-mudell. Biex iżżid klassijiet multipli, isseparahom bi spazji: Tista 'wkoll tgħaddi funzjoni li għandha tirritorna string waħda li fiha ismijiet ta' klassi addizzjonali. |
fruntiera | spag | element | 'scrollParent' | Limitu ta' restrizzjoni ta' overflow tal-popover. Jaċċetta l-valuri ta' 'viewport' , 'window' , 'scrollParent' , jew referenza HTMLElement (JavaScript biss). Għal aktar informazzjoni irreferi għad- doks preventOverflow ta' Popper . |
sanitizza | boolean | veru | Ippermetti jew tiddiżattiva s-sanitizzazzjoni. Jekk jiġi attivat 'template' , 'content' u l- 'title' għażliet jiġu sanitizzati. Ara s- sezzjoni ta' sanitizer fid-dokumentazzjoni JavaScript tagħna . |
lista bajda | oġġett | Valur default | Oġġett li fih attributi u tags permessi |
sanitizeFn | null | funzjoni | null | Hawnhekk tista 'tforni l-funzjoni ta' sanitizza tiegħek stess. Dan jista 'jkun utli jekk tippreferi tuża librerija ddedikata biex twettaq sanitizzazzjoni. |
popperConfig | null | oġġett | null | Biex tibdel il-konfigurazzjoni default Popper ta' Bootstrap, ara l-konfigurazzjoni ta' Popper |
Attributi tad-dejta għal popovers individwali
Għażliet għal popovers individwali jistgħu alternattivament jiġu speċifikati permezz tal-użu tal-attributi tad-dejta, kif spjegat hawn fuq.
Metodi
Metodi asinkroniċi u tranżizzjonijiet
Il-metodi kollha tal-API huma asinkroniċi u jibdew transizzjoni . Jirritornaw għand min iċempel hekk kif tinbeda t-tranżizzjoni iżda qabel ma tispiċċa . Barra minn hekk, sejħa ta' metodu fuq komponent ta' tranżizzjoni se tiġi injorata .
Ara d-dokumentazzjoni JavaScript tagħna għal aktar informazzjoni .
$().popover(options)
Inizjalizza popovers għal ġabra ta' elementi.
.popover('show')
Tiżvela popover ta' element. Jirritorna lil min iċempel qabel ma l-popover fil-fatt intwera (jiġifieri qabel ma shown.bs.popover
jseħħ l-avveniment). Dan huwa meqjus bħala attivazzjoni "manwali" tal-popover. Popovers li t-titlu u l-kontenut tagħhom huma t-tnejn ta' tul żero qatt ma jintwerew.
$('#element').popover('show')
.popover('hide')
Jaħbi popover ta' element. Jirritorna lil min iċempel qabel ma l-popover fil-fatt ġie moħbi (jiġifieri qabel ma hidden.bs.popover
jseħħ l-avveniment). Dan huwa meqjus bħala attivazzjoni "manwali" tal-popover.
$('#element').popover('hide')
.popover('toggle')
Jiddawwar il-popover ta' element. Jirritorna lil min iċempel qabel ma l-popover fil-fatt intwera jew moħbi (jiġifieri qabel ma jseħħ l-avveniment shown.bs.popover
jew ). hidden.bs.popover
Dan huwa meqjus bħala attivazzjoni "manwali" tal-popover.
$('#element').popover('toggle')
.popover('dispose')
Jaħbi u jeqred il-popover ta' element. Popovers li jużaw id-delega (li huma maħluqa bl -użu tal - selector
għażla ) ma jistgħux jinqerdu individwalment fuq elementi trigger dixxendenti.
$('#element').popover('dispose')
.popover('enable')
Jagħti popover ta' element l-abbiltà li jintwera. Popovers huma attivati awtomatikament.
$('#element').popover('enable')
.popover('disable')
Tneħħi l-abbiltà li tintwera popover ta' element. Il-popover ikun jista' jintwera biss jekk jerġa' jiġi attivat.
$('#element').popover('disable')
.popover('toggleEnabled')
Jiddawwar il-ħila biex il-popover ta' element jintwera jew moħbi.
$('#element').popover('toggleEnabled')
.popover('update')
Taġġorna l-pożizzjoni tal-popover ta' element.
$('#element').popover('update')
Avvenimenti
Tip ta' Avveniment | Deskrizzjoni |
---|---|
juru.bs.popover | Dan l-avveniment jispara immedjatament meta show jissejjaħ il-metodu tal-istanza. |
muri.bs.popover | Dan l-avveniment jiġi sparat meta l-popover ikun sar viżibbli għall-utent (se jistenna li jitlestew it-tranżizzjonijiet CSS). |
hide.bs.popover | Dan l-avveniment jiġi sparat immedjatament meta l- hide metodu tal-istanza jkun ġie msejjaħ. |
moħbija.bs.popover | Dan l-avveniment jiġi sparat meta l-popover ikun spiċċa moħbi mill-utent (se jistenna li jitlestew it-tranżizzjonijiet CSS). |
inserit.bs.popover | Dan l-avveniment jiġi sparat wara l- show.bs.popover avveniment meta l-mudell popover ikun ġie miżjud mad-DOM. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})