Popovers
Tuhituhi me nga tauira mo te taapiri i nga popovers Bootstrap, pera i era i kitea i roto i te iOS, ki tetahi huānga o to pae.
Tirohanga
Nga mea hei mohio ina whakamahi ana i te mono popover:
- Ka whakawhirinaki nga Popovers ki te whare pukapuka tuatoru Popper mo te tuunga. Me whakauru koe i te popper.min.js i mua i te bootstrap.js me te whakamahi ranei
bootstrap.bundle.min.js
/bootstrap.bundle.js
kei roto te Popper kia mahi ai nga popovers! - Ka hiahia nga Popovers ki te mono taputapu taputapu hei whakawhirinakitanga.
- Mena kei te hanga koe i to maatau JavaScript mai i te puna, me
util.js
. - Ka uru mai nga Popovers mo nga take mahi, na me arawhiti koe i a koe ake .
- Ko te roa-kore
title
mecontent
nga uara e kore e whakaatu i te popover. - Tauwhāitihia
container: 'body'
kia karohia nga raru ki roto i nga waahanga uaua ake (penei i a maatau roopu whakauru, roopu paatene, aha atu). - Ka kore e mahi te whakaoho i nga popovers i runga i nga huānga huna.
- Ko nga popovers mo nga huānga
.disabled
raneidisabled
me whakaoho i runga i te huānga takai. - Ina puta mai i nga punga e takai ana ki nga raina maha, ka whakatetahi nga popovers ki waenga i te whanui whanui o nga punga. Whakamahia
.text-nowrap
i runga i to<a>
s ki te karo i tenei whanonga. - Me huna nga Popovers i mua i te tangohanga o ona huānga e rite ana i te DOM.
- Ka taea te whakakorikori i nga popovers na tetahi huānga kei roto i te atarangi DOM.
prefers-reduced-motion
uiui pāpāho. Tirohia te
waahanga motini whakaheke o a maatau tuhinga whakaurunga .
Kia mau ki te panui kia kite i te mahi a nga popovers me etahi tauira.
Tauira: Whakahohehia nga popovers ki nga waahi katoa
Ko tetahi huarahi ki te arawhiti i nga popovers katoa i runga i te wharangi ko te kowhiri ma o raatau data-toggle
huanga:
$(function () {
$('[data-toggle="popover"]').popover()
})
Tauira: Te whakamahi i te container
kōwhiringa
Mena kei a koe etahi momo ahua i runga i tetahi huānga matua e whakararu ana i te popover, ka hiahia koe ki te tautuhi i tetahi ritenga container
kia puta ai te HTML o te popover i roto i taua huānga.
$(function () {
$('.example-popover').popover({
container: 'body'
})
})
Tauira
<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>
E wha nga ahunga
E wha nga whiringa e waatea ana: runga, matau, raro me te taha maui.
<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>
Waiho i runga i te patene ka whai ake
Whakamahia te focus
keu ki te whakakore i nga popovers i runga i te paatene a te kaiwhakamahi i muri mai o tetahi huānga rereke atu i te huānga takahuri.
Ko te tohu tohu motuhake e hiahiatia ana mo te whakakore-i-paa-muri
Mo te pai o te kaitirotiro me te whanonga whakawhiti, me whakamahi koe i te <a>
tohu, kaua ko te <button>
tohu, me whakauru ano hoki he tabindex
huanga.
<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'
})
Huānga hauā
Ko nga huānga me te disabled
huanga kaore i te tauwhitiwhiti, ko te tikanga kaore e taea e nga kaiwhakamahi te whakaparo, te paato ranei i a raatau ki te whakaoho i te pouver (te taputapu taputapu ranei). Hei whakatika, ka hiahia koe ki te whakaoho i te popover mai i te takai <div>
, <span>
ka turaki ranei i te pointer-events
i runga i te huānga hauā.
Mo nga keu popover haua, ka pai pea koe data-trigger="hover"
kia puta te popover hei urupare ataata tonu ki o kaiwhakamahi na te mea kare pea ratou e whakaaro ki te paato i tetahi huānga haua.
<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>
Whakamahinga
Whakahohehia nga popovers ma JavaScript:
$('#example').popover(options)
Whakatere GPU
I etahi wa ka ahua pouri nga Popovers Windows 10 nga taputapu na te tere o te GPU me te DPI punaha whakarereke. Ko te mahi mo tenei i roto i te v4 ko te whakakore i te whakatere GPU ina hiahiatia i runga i o popovers.
Kua whakaarohia te whakatika:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
Ko te mahi popover mo te papapātuhi me nga kaiwhakamahi hangarau awhina
Hei tuku i nga kaiwhakamahi papapātuhi ki te whakahohe i o popovers, me taapiri noa atu ki nga huānga HTML e aro nui ana ki te papapātuhi me te tauwhitiwhiti (pērā i ngā hononga, ngā mana puka). Ahakoa ko nga huānga HTML noa (pērā i <span>
te s) ka taea te arotahi ma te taapiri i te tabindex="0"
huanga, ka taapiri atu i nga tuunga ripa hoha me te rangirua i runga i nga huānga tauwhitiwhiti-kore mo nga kaiwhakamahi papapātuhi, me te nuinga o nga hangarau awhina i tenei wa kaore i te panui i nga ihirangi o te popover i tenei ahuatanga. . I tua atu, kaua e whakawhirinaki ki runga anake hover
hei keu mo o popovers, na te mea ka kore e taea te whakaoho mo nga kaiwhakamahi papapātuhi.
Ahakoa ka taea e koe te whakauru i te HTML whai rawa, hanganga ki roto i nga popovers me te html
kowhiringa, ka tino tūtohu koe kia karo koe i te taapiri i te nui o nga ihirangi. Ko te huarahi e mahi ai nga popovers i tenei wa, ka whakaatuhia, ka herea o raatau ihirangi ki te huānga whakaoho me te aria-describedby
huanga. Ko te mutunga, ka panuitia te katoa o nga ihirangi o te popover ki nga kaiwhakamahi hangarau awhina hei awa roa, kore e haukotia.
I tua atu, ahakoa ka taea hoki te whakauru i nga mana tauwhitiwhiti (pēnei i nga huānga puka, hononga hononga ranei) ki roto i to popover (ma te taapiri i enei huānga ki nga whiteList
huanga me nga tohu e whakaaetia ana), kia mohio koe i tenei wa kaore te popover e whakahaere i te raupapa arotahi papapātuhi. Ina whakatuwherahia e te kaiwhakamahi papapātuhi he paopao, ka noho tonu te aro ki te huānga whakaoho, na te mea karekau te popover e whai tonu i te keu i roto i te hanganga o te tuhinga, karekau he taurangi ka neke whakamua/penei.TABka nukuhia he kaiwhakamahi papapātuhi ki roto i te popover ake. Hei poto, ko te taapiri noa i nga mana tauwhitiwhiti ki te popover ka kore e taea e enei mana te toro atu/kaore e taea te whakamahi mo nga kaiwhakamahi papapātuhi me nga kaiwhakamahi hangarau awhina, i te mea iti rawa ranei te hanga i tetahi ota arotahi koretake. I roto i enei ahuatanga, whakaarohia te whakamahi i te korero aratau.
Kōwhiringa
Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-
, penei i te data-animation=""
.
sanitize
,
sanitizeFn
me
nga whiringa ma te whakamahi i nga huanga raraunga.whiteList
Ingoa | Momo | Taunoa | Whakaahuatanga |
---|---|---|---|
hākoritanga | boolean | pono | Hoatu he whakawhiti memeha CSS ki te popover |
ipu | aho | huānga | teka | teka | He taapiri i te pouver ki tetahi huānga motuhake. Tauira: |
ihirangi | aho | huānga | mahi | '' | Uara ihirangi taunoa ki Mena ka hoatu he taumahi, ka karangahia me tana |
whakaroa | tau | ahanoa | 0 | Whakaroa te whakaatu me te huna i te popover (ms) - kaore e pa ki te momo keu a-ringa Mena ka tukuna he nama, ka tukuna he whakaroa ki te huna/whakakitenga e rua Ko te hanganga ahanoa: |
html | boolean | teka | Kōkuhu HTML ki roto i te poupou. Mena he teka, text ka whakamahia te tikanga a jQuery ki te whakauru ihirangi ki te DOM. Whakamahia te kuputuhi mena kei te awangawanga koe mo nga whakaeke XSS. |
whakanohonga | aho | mahi | 'tika' | Me pehea te whakanoho i te popover - auto | runga | raro | maui | tika. Ina whakamahia he taumahi hei whakatau i te tuunga, ka kiia ko te popover DOM node hei tohenga tuatahi me te huānga whakaoho DOM node hei tuarua. Kua |
kaiwhiriwhiri | aho | teka | teka | Mena ka tukuna he kaiwhiriwhiri, ka tukuna nga taonga popover ki nga whaainga kua tohua. I roto i te mahi, ka whakamahia tenei hei whakaahei i nga ihirangi HTML hihiri ki te whakauru i nga popovers. Tirohia tenei me tetahi tauira korero . |
tauira | aho | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Ko te HTML turanga hei whakamahi i te wa e hanga ana te popover. Ka werohia te popover's Ka werohia te popover's
Ko te huānga takai o waho me whai |
taitara | aho | huānga | mahi | '' | Te uara taitara taunoa mena Mena ka hoatu he taumahi, ka karangahia me tana |
keu | aho | 'pāwhiri' | Me pehea te whakaoho i te popover - pawhiria | whakaparo | arotahi | ā-ringa. Ka taea e koe te whakawhiti i nga keu maha; wehehia me te waahi. manual e kore e taea te whakakotahi ki tetahi atu keu. |
whakatiki | tau | aho | 0 | Wehenga o te popover e pa ana ki tana whaainga. Mo etahi atu korero tirohia nga tuhinga a Popper . |
takahuriWhakaahua | aho | huinga | 'poho' | Tukua ki te whakapūtā ko tēhea te tūnga ka whakamahia e Popper ki te takahuri. Mo etahi atu korero tirohia nga tuhinga whanonga a Popper |
ritengaClass | aho | mahi | '' | Taapirihia nga karaehe ki te poupou ina whakaatuhia. Kia mahara ko enei karaehe ka taapiri atu ki nga karaehe kua tohua ki te tauira. Hei taapiri i nga karaehe maha, wehehia ki nga mokowā: Ka taea hoki e koe te tuku i tetahi mahi hei whakahoki i te aho kotahi kei roto etahi atu ingoa akomanga. |
rohe | aho | huānga | 'scrollParent' | Te rohe herenga waipuke o te popover. Ka whakaae ki nga uara o 'viewport' , 'window' , 'scrollParent' , he tohutoro HTMLElement ranei (JavaScript anake). Mo etahi atu korero tirohia nga tuhinga a Popper preventOverflow . |
horoi | boolean | pono | Whakahohe, whakakorehia ranei te horoi. Mena ka whakahohehia 'template' , 'content' ka 'title' horoia nga whiringa. Tirohia te waahanga sanitizer i roto i ta maatau tuhinga JavaScript . |
Rarangi ma | ahanoa | Uara taunoa | Ahanoa kei roto nga huanga me nga tohu kua whakaaetia |
horoiFn | null | mahi | null | I konei ka taea e koe te whakarato i a koe ake mahi horoi. Ka whai hua tenei ki te hiahia koe ki te whakamahi i te whare pukapuka whakatapua ki te mahi horoi. |
popperConfig | null | ahanoa | null | Hei huri i te whirihora Popper taunoa a Bootstrap, tirohia te whirihoranga a Popper |
Nga huanga raraunga mo nga popovers takitahi
Ko nga whiringa mo nga popovers takitahi ka taea te tautuhi ma te whakamahi i nga huanga raraunga, pera i te whakamarama i runga ake nei.
Nga tikanga
Nga tikanga tukutahi me nga whakawhitinga
Ko nga tikanga API katoa he tukutahi ka timata te whakawhiti . Ka hoki mai ano ki te kaikaranga ina timata te whakawhiti engari i mua i te mutunga . I tua atu, ka warewarehia te karanga tikanga mo tetahi waahanga whakawhiti .
$().popover(options)
Ka arataki popover mo te kohinga huānga.
.popover('show')
He whakaatu i te popover o tetahi huānga. Ka hoki ki te kaiwaea i mua i te whakaaturanga o te popover (arā i mua i te shown.bs.popover
puta o te takahanga). Ka kiia tenei he "a-ringa" te whakaoho o te popover. Ko nga Popovers ko te taitara me te ihirangi he kore-roa te roa e kore e whakaatuhia.
$('#element').popover('show')
.popover('hide')
Hunaia te popover o te huānga. Ka hoki ki te kaiwaea i mua i te hunanga o te popover (arā i mua i te hidden.bs.popover
puta o te takahanga). Ka kiia tenei he "a-ringa" te whakaoho o te popover.
$('#element').popover('hide')
.popover('toggle')
Ka takahuri i te poupou o tetahi huānga. Ka hoki ki te kaiwaea i mua i te whakaaturanga, i hunahia ranei te popover (arā, i mua i te puta o shown.bs.popover
te hidden.bs.popover
takahanga). Ka kiia tenei he "a-ringa" te whakaoho o te popover.
$('#element').popover('toggle')
.popover('dispose')
He huna me te whakangaro i te popover o tetahi huānga. Ko nga popovers e whakamahi ana i te tuku (he mea hanga ma te whakamahi i te selector
whiringa ) kaore e taea te whakakore takitahi i runga i nga huānga whakaoho uri.
$('#element').popover('dispose')
.popover('enable')
Ka hoatu i te popover o tetahi huānga te kaha ki te whakaatu. Ka taea te taunoa te Popovers.
$('#element').popover('enable')
.popover('disable')
Ka tango i te kaha mo te whakaatu i te popover o tetahi huānga. Ka taea anake te whakaatu i te popover mena ka whakahohea ano.
$('#element').popover('disable')
.popover('toggleEnabled')
Ka takahuri i te kaha mo te whakaatu, te huna ranei i te pouver o tetahi huānga.
$('#element').popover('toggleEnabled')
.popover('update')
He whakahōu i te tūnga o te popover o te huānga.
$('#element').popover('update')
Nga huihuinga
Momo Takahanga | Whakaahuatanga |
---|---|
show.bs.popover | Ka pupuhi tenei takahanga ina ka show karangahia te aratuka tauira. |
whakaaturia.bs.popover | Ka pupuhihia tenei takahanga i te wa i kitea ai te popover ki te kaiwhakamahi (ka tatari kia oti nga whakawhitinga CSS). |
huna.bs.popover | Ka puhia tonutia tenei takahanga ina hide kua karangahia te aratuka tauira. |
huna.bs.popover | Ka puhia tenei takahanga ina mutu te hunanga o te popover mai i te kaiwhakamahi (ka tatari kia oti nga whakawhitinga CSS). |
inserted.bs.popover | Ka puhia tenei takahanga i muri i te show.bs.popover takahanga i te wa i taapirihia te tauira popover ki te DOM. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})