Source

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.js 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 Popper.js 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 white-space: 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.

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="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

Waiho i te pawhiri 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.

Ka taea te whakakore 
<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)

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="".

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 kia taea ai e nga ihirangi HTML hihiri te taapiri 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. Ko te 'manual' kaore e taea te whakakotahi me 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.js .
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.js
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.js preventOverflow .

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 popovers 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 nga 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 Takahanga

Momo Takahanga Whakaahuatanga
show.bs.popover Ka pupuhi tenei takahanga ina ka showkarangahia te aratuka tauira.
whakaaturia.bs.popover Ka puhia 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 pupuhihia 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…
})