in English

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.jskei 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, meutil.js .
  • Ka uru mai nga Popovers mo nga take mahi, na me arawhiti koe i a koe ake .
  • Ko te roa-kore titleme contentnga 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 .disabledranei disabledme 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-nowrapi 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.
Ma te taunoa, ka whakamahia e tenei waahanga te kai horoi i roto i te ihirangi, ka tihorea nga huānga HTML kaore e tino whakaaetia. Tirohia te waahanga sanitizer i roto i a maatau tuhinga JavaScript mo etahi atu korero.
Ko te awe hākoritanga o tēnei wāhanga e whakawhirinaki ana ki te prefers-reduced-motionuiui 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-togglehuanga:

$(function () {
  $('[data-toggle="popover"]').popover()
})

Tauira: Te whakamahi i te containerkō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 containerkia 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 focuskeu 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 tabindexhuanga.

<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 disabledhuanga 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-eventsi 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 hoverhei 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 htmlkowhiringa, 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-describedbyhuanga. 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 whiteListhuanga 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="".

Kia mahara ko nga take haumaru e kore e taea te hoatu i nga sanitize, sanitizeFnme 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: container: 'body'. He tino whaihua tenei whiringa na te mea ka taea e koe te whakanoho i te popover i roto i te rerenga o te tuhinga e tata ana ki te huānga whakaoho - ka kore te popover e maanu atu i te huānga whakaoho i te huringa o te matapihi.

ihirangi aho | huānga | mahi ''

Uara ihirangi taunoa ki data-contentte kore te huanga.

Mena ka hoatu he taumahi, ka karangahia me tana thishuinga tohutoro ki te huānga e piri ana te popover.

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:delay: { "show": 500, "hide": 100 }

html boolean teka Kōkuhu HTML ki roto i te poupou. Mena he teka, textka 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 autotauwhāitihia, ka whakahihikohia te pouver.

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 thistautuhia te horopaki ki te tauira popover.

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 titleki roto i te .popover-header.

Ka werohia te popover's contentki roto i te .popover-body.

.arrowka waiho hei pere o te popover.

Ko te huānga takai o waho me whai .popoverakomanga.

taitara aho | huānga | mahi ''

Te uara taitara taunoa mena titlekarekau he huanga.

Mena ka hoatu he taumahi, ka karangahia me tana thishuinga tohutoro ki te huānga e piri ana te popover.

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. manuale 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ā: 'a b'.

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 .

Tirohia ta maatau tuhinga JavaScript mo etahi atu korero .

$().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.popoverputa 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.popoverputa 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.popoverte hidden.bs.popovertakahanga). 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 selectorwhiringa ) 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 showkarangahia 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 hidekua 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.popovertakahanga i te wa i taapirihia te tauira popover ki te DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})