Popovers
Dokumintaasje en foarbylden foar it tafoegjen fan Bootstrap-popovers, lykas dy fûn yn iOS, oan elk elemint op jo side.
Oersicht
Dingen om te witten by it brûken fan de popover-plugin:
- Popovers fertrouwe op de 3rd party bibleteek Popper foar posisjonearring. Jo moatte popper.min.js opnimme foardat bootstrap.js of brûke
bootstrap.bundle.min.js
/bootstrap.bundle.js
dy't Popper befettet om popovers te wurkjen! - Popovers fereaskje de tooltip-plugin as ôfhinklikens.
- As jo ús JavaScript bouwe fanút boarne, fereasket
util.js
it . - Popovers binne opt-in foar prestaasjesredenen, dus jo moatte se sels inisjalisearje .
- Nullengte
title
encontent
wearden sille nea in popover sjen litte. - Spesifisearje
container: 'body'
om it werjaan fan problemen yn kompleksere komponinten te foarkommen (lykas ús ynfiergroepen, knopgroepen, ensfh.). - It triggerjen fan popovers op ferburgen eleminten sil net wurkje.
- Popovers foar
.disabled
ofdisabled
eleminten moatte wurde aktivearre op in wrapper elemint. - Wannear't aktivearre fan ankers dy't wrap oer meardere rigels, popovers wurde sintraal tusken de ankers 'algemiene breedte. Brûk
.text-nowrap
op jo<a>
s om dit gedrach te foarkommen. - Popovers moatte ferburgen wurde foardat har oerienkommende eleminten binne fuortsmiten fan 'e DOM.
- Popovers kinne wurde oanlutsen troch in elemint binnen in skaad DOM.
prefers-reduced-motion
mediafraach. Sjoch de
seksje mei fermindere beweging fan ús dokumintaasje foar tagonklikens .
Bliuw lêze om te sjen hoe't popovers wurkje mei guon foarbylden.
Foarbyld: ynskeakelje popovers oeral
Ien manier om alle popovers op in side te initialisearjen soe wêze om se te selektearjen troch har data-toggle
attribút:
$(function () {
$('[data-toggle="popover"]').popover()
})
Foarbyld: Brûk de container
opsje
As jo in pear stilen hawwe op in âlderelemint dy't ynterferearje mei in popover, wolle jo in oanpaste spesifisearje container
sadat de HTML fan 'e popover yn dat elemint ferskynt.
$(function () {
$('.example-popover').popover({
container: 'body'
})
})
Foarbyld
<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>
Fjouwer rjochtingen
Fjouwer opsjes binne beskikber: boppe, rjochts, ûnder, en lofts rjochte.
<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>
Ferwiderje by folgjende klik
Brûk de focus
trigger om popovers op de folgjende klik fan de brûker fan in oar elemint dan it wikselelemint te ûntslaan.
Spesifike opmaak nedich foar ôfwizen-op-folgjende-klik
Foar goed cross-browser en cross-platform gedrach moatte jo de <a>
tag brûke, net de <button>
tag, en jo moatte ek in tabindex
attribút opnimme.
<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'
})
Utskeakele eleminten
Eleminten mei it disabled
attribút binne net ynteraktyf, wat betsjuttet dat brûkers net kinne hoverje of klikke om in popover (of tooltip) te triggerjen. As oplossing wolle jo de popover út in wrapper triggerje <div>
of <span>
it pointer-events
op it útskeakele elemint oerskriuwe.
Foar útskeakele popover-triggers kinne jo ek leaver data-trigger="hover"
dat de popover ferskynt as direkte fisuele feedback foar jo brûkers, om't se miskien net ferwachtsje te klikken op in útskeakele elemint.
<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>
Gebrûk
Popovers ynskeakelje fia JavaScript:
$('#example').popover(options)
GPU fersnelling
Popovers ferskine soms wazig op Windows 10-apparaten fanwegen GPU-fersnelling en in wizige systeem-DPI. De oplossing foar dit yn v4 is om GPU-fersnelling út te skeakeljen as nedich op jo popovers.
Foarstelde fix:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
Popovers meitsje wurkje foar brûkers fan toetseboerd en assistinte technology
Om toetseboerdbrûkers jo popovers te aktivearjen, moatte jo se allinich tafoegje oan HTML-eleminten dy't tradisjoneel toetseboerdfokusber en ynteraktyf binne (lykas keppelings of formulierkontrôles). Hoewol't willekeurige HTML-eleminten (lykas <span>
s) fokusber makke wurde kinne troch it tafoegjen fan it tabindex="0"
attribút, sil dit potinsjeel ferfelende en betiizjende ljepperstops tafoegje oan net-ynteraktive eleminten foar toetseboerdbrûkers, en de measte assistive technologyen kundigje op it stuit de ynhâld fan 'e popover yn dizze situaasje net oan. . Fertrouwe ek net allinich op hover
as de trigger foar jo popovers, om't dit sil meitsje dat se ûnmooglik wurde trigger foar toetseboerdbrûkers.
Wylst jo rike, strukturearre HTML kinne ynfoegje yn popovers mei de html
opsje, riede wy sterk oan dat jo foarkomme dat jo in oerstallige hoemannichte ynhâld tafoegje. De manier wêrop popovers op it stuit wurkje is dat, ienris werjûn, har ynhâld is bûn oan it trigger-elemint mei it aria-describedby
attribút. As resultaat sil de heule ynhâld fan 'e popover wurde oankundige oan brûkers fan assistinte technology as ien lange, ûnûnderbrutsen stream.
Derneist, hoewol it mooglik is om ek ynteraktive kontrôles (lykas formuliereleminten of keppelings) yn jo popover op te nimmen (troch dizze eleminten ta te foegjen oan 'e whiteList
of tastiene attributen en tags), wês bewust dat op it stuit de popover gjin toetseboerdfokusopdracht beheart. As in toetseboerdbrûker in popover iepenet, bliuwt de fokus op it triggerende elemint, en om't de popover meastentiids de trigger yn 'e struktuer fan it dokumint net direkt folget, is d'r gjin garânsje dat foarút gean / drukkeTABsil in toetseboerdbrûker yn 'e popover sels ferpleatse. Koartsein, it gewoan tafoegjen fan ynteraktive kontrôles oan in popover sil dizze kontrôles wierskynlik ûnberikber / ûnbrûkber meitsje foar toetseboerdbrûkers en brûkers fan assistinte technologyen, of op syn minst in ûnlogyske algemiene fokusfolchoarder meitsje. Yn dizze gefallen, beskôgje it brûken fan in modaal dialooch ynstee.
Opsjes
Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-
, lykas yn data-animation=""
.
sanitize
,
sanitizeFn
en
whiteList
opsjes kinne net wurde levere mei gegevens attributen.
Namme | Type | Standert | Beskriuwing |
---|---|---|---|
animaasje | boolean | wier | Tapasse in CSS-fade-oergong op 'e popover |
kontener | string | elemint | falsk | falsk | Foegje de popover ta oan in spesifyk elemint. Foarbyld |
ynhâld | string | elemint | funksje | '' | Standert ynhâldwearde as As in funksje wurdt jûn, wurdt it neamd mei syn |
fertraging | nûmer | objekt | 0 | Fertraging fan it sjen en ferbergjen fan de popover (ms) - jildt net foar manuele triggertype As in nûmer wurdt levere, wurdt fertraging tapast op sawol hide / show Objektstruktuer is: |
html | boolean | falsk | Foegje HTML yn 'e popover. As it falsk is, text sil de metoade fan jQuery brûkt wurde om ynhâld yn 'e DOM yn te foegjen. Brûk tekst as jo soargen meitsje oer XSS-oanfallen. |
pleatsing | string | funksje | 'rjochts' | Hoe te pleatsen de popover - auto | top | ûnderen | lofts | rjochts. As in funksje brûkt wurdt om de pleatsing te bepalen, wurdt it neamd mei de popover DOM-knooppunt as earste argumint en it triggerelemint DOM-knooppunt as twadde. De |
selector | string | falsk | falsk | As in selector wurdt foarsjoen, sil popover objekten wurde delegearre oan de oantsjutte doelen. Yn 'e praktyk wurdt dit brûkt om dynamyske HTML-ynhâld yn te skeakeljen om popovers tafoege te hawwen. Sjoch dit en in ynformatyf foarbyld . |
sjabloan | string | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Basis HTML om te brûken by it meitsjen fan de popover. De popover's De popover's
De bûtenste wrapper elemint moat hawwe de |
titel | string | elemint | funksje | '' | Standert titelwearde as As in funksje wurdt jûn, wurdt it neamd mei syn |
trekker | string | 'klik' | Hoe popover wurdt aktivearre - klik | sweef | fokus | hantlieding. Jo kinne meardere triggers trochjaan; skiede se mei in romte. manual kin net wurde kombinearre mei in oare trigger. |
offset | nûmer | string | 0 | Offset fan 'e popover relatyf oan syn doel. Foar mear ynformaasje ferwize nei Popper's offset -dokuminten . |
fallbackPlacement | string | array | 'flip' | Tastean om oan te jaan hokker posysje Popper sil brûke by fallback. Foar mear ynformaasje ferwize nei Popper's gedrachsdokuminten |
customClass | string | funksje | '' | Foegje klassen ta oan de popover as it wurdt toand. Tink derom dat dizze klassen sille wurde tafoege neist alle klassen oantsjutte yn it sjabloan. Om meardere klassen ta te foegjen, skiede se mei spaasjes: Jo kinne ek in funksje trochjaan dy't in inkele tekenrige moat weromjaan mei ekstra klassenammen. |
skieding | string | elemint | 'scrollParent' | Overflow beheining grins fan de popover. Akseptearret de wearden fan 'viewport' , 'window' , 'scrollParent' , of in HTMLElement-referinsje (allinich JavaScript). Foar mear ynformaasje ferwize nei Popper's preventOverflow-dokuminten . |
sanitize | boolean | wier | De sanearring ynskeakelje of útskeakelje. As aktivearre 'template' , 'content' en 'title' opsjes sille wurde sanearre. Sjoch de seksje fan sanitizer yn ús JavaScript-dokumintaasje . |
whiteList | objekt | Standertwearde | Objekt dat tastiene attributen en tags befettet |
sanitizeFn | null | funksje | null | Hjir kinne jo jo eigen sanearringsfunksje leverje. Dit kin handich wêze as jo leaver in tawijd bibleteek brûke om sanitaasje út te fieren. |
popperConfig | null | objekt | null | Om de standert Popper-konfiguraasje fan Bootstrap te feroarjen, sjoch Popper's konfiguraasje |
Gegevensattributen foar yndividuele popovers
Opsjes foar yndividuele popovers kinne alternatyf wurde oantsjutte troch it brûken fan gegevensattributen, lykas hjirboppe útlein.
Metoaden
Asynchrone metoaden en transysjes
Alle API-metoaden binne asynchrone en begjinne in oergong . Se komme werom nei de beller sa gau as de oergong is begon, mar foardat it einiget . Derneist sil in metoadeoprop op in oergongskomponint wurde negearre .
$().popover(options)
Inisjalisearje popovers foar in elemint kolleksje.
.popover('show')
Bliuwt in popover fan in elemint. Keart werom nei de beller foardat de popover wirklik werjûn is (dus foardat it shown.bs.popover
evenemint bart). Dit wurdt beskôge as in "hânlieding" triggering fan de popover. Popovers wêrfan de titel en ynhâld beide gjin lingte hawwe, wurde nea werjûn.
$('#element').popover('show')
.popover('hide')
Ferberget de popover fan in elemint. Keart werom nei de beller foardat de popover eins ferburgen is (dus foardat it hidden.bs.popover
barren plakfynt). Dit wurdt beskôge as in "hânlieding" triggering fan de popover.
$('#element').popover('hide')
.popover('toggle')
Skeakelt de popover fan in elemint. Keart werom nei de beller foardat de popover feitlik werjûn of ferburgen is (dus foardat it barren shown.bs.popover
of hidden.bs.popover
bart). Dit wurdt beskôge as in "hânlieding" triggering fan de popover.
$('#element').popover('toggle')
.popover('dispose')
Ferberget en ferneatiget popover fan in elemint. Popovers dy't delegaasje brûke (dy't makke binne mei de selector
opsje ) kinne net yndividueel ferneatige wurde op neikommende trigger-eleminten.
$('#element').popover('dispose')
.popover('enable')
Jout in popover fan in elemint de mooglikheid om te sjen. Popovers binne standert ynskeakele.
$('#element').popover('enable')
.popover('disable')
Ferwidert de mooglikheid om in popover fan in elemint te sjen. De popover sil allinich te sjen wêze kinne as it opnij ynskeakele is.
$('#element').popover('disable')
.popover('toggleEnabled')
Wizigje de mooglikheid om in popover fan in elemint te sjen of te ferbergjen.
$('#element').popover('toggleEnabled')
.popover('update')
Updatet de posysje fan in popover fan in elemint.
$('#element').popover('update')
Eveneminten
Event Type | Beskriuwing |
---|---|
show.bs.popover | Dit evenemint fjoer fuortendaliks as de show eksimplaar metoade wurdt oanroppen. |
shown.bs.popover | Dit evenemint wurdt ûntslein as de popover sichtber makke is foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen). |
hide.bs.popover | Dit barren wurdt fuortendaliks ûntslein as de hide eksimplaarmetoade oanroppen is. |
hidden.bs.popover | Dit evenemint wurdt ûntslein as de popover klear is ferburgen foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen). |
ynfoege.bs.popover | Dit evenemint wurdt ûntslein nei it show.bs.popover evenemint as it popover-sjabloan is tafoege oan de DOM. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})