Source

Popovers

Sahypaňyzdaky islendik elemente iOS-da tapylanlar ýaly Bootstrap popoversini goşmak üçin resminamalar we mysallar.

Gysgaça syn

Açylýan plugin ulanylanda bilmeli zatlar:

  • Popovers ýerleşiş üçin 3-nji tarap kitaphanasy Popper.js -e bil baglaýar . Bootstrap.js-dan öň popper.min.js goşmaly ýa -da popoversiň işlemegi üçin Popper.js-i ulanmaly bootstrap.bundle.min.js/ ulanmaly bootstrap.bundle.js!
  • Popovers garaşlylyk hökmünde gurallar pluginini talap edýär.
  • JavaScriptimizi çeşmeden gurýan bolsaňyz, talap edýärutil.js .
  • Popovers öndürijilik sebäplerine görä saýlanýar, şonuň üçin olary özüňiz başlamaly .
  • Nol uzynlygy titlewe contentbahalary hiç haçan açylmaz.
  • container: 'body'Has çylşyrymly komponentlerde kynçylyk döretmezligi kesgitläň (giriş toparlarymyz, düwme toparlarymyz we ş.m.) .
  • Gizlin elementlerde açylan popowerler işlemez.
  • Elementler .disabledýa-da disabledelementler üçin ýazgylar, örtük elementinde başlamaly.
  • Birnäçe setir bilen gurşalan labyrlardan başlanda, gämi duralgalarynyň umumy giňliginiň arasynda jemlener. Bu gylyk-häsiýetden gaça durmak üçin s-leri .text-nowrapulanyň .<a>
  • Popovers degişli elementleri DOM-dan aýrylmazdan ozal gizlenmeli.
  • Popovers kölegeli DOM içindäki bir elementiň kömegi bilen ýüze çykyp biler.

Bu komponentiň animasiýa täsiri prefers-reduced-motionmedia talaplaryna baglydyr. Elýeterlilik resminamalarymyzyň azaldylan hereket bölümine serediň .

Käbir mysallar bilen popoversiň nähili işleýändigini görmek üçin okaň.

Mysal: Her ýerde popovers açyň

Sahypadaky ähli açyjylary başlamagyň bir usuly, olary data-toggleatributlary boýunça saýlamak bolar:

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

Mysal: containerOpsiýany ulanmak

Esasy elementde popover-a päsgel berýän käbir stilleriňiz bar bolsa, containeraç-açan HTML-iň ýerine şol elementiň içinde peýda bolmagy üçin bir adat görkezmek islärsiňiz.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Mysal

<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>

Dört ugur

Dört wariant bar: ýokarky, sag, aşaky we çep deňleşdirilen.

<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>

Indiki gezek basyň

focusUlanyjynyň üýtgetmek elementinden başga bir elementiň indiki gezek basylmagynda triggerleri ulanyň .

Işden çykarmak üçin indiki basmak üçin zerur bellik

Dogry kross-brauzer we platforma bilen özüňi alyp barmak üçin belligi däl -de, <a>belligi ulanmaly, bir atribut hem goşmaly .<button>tabindex

<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'
})

Öçürilen elementler

Sypaty bolan elementler disabledinteraktiw däl, ýagny ulanyjylar bir popover (ýa-da gural görkezmesi) açmak üçin basyp ýa-da basyp bilmeýärler. Iş usuly hökmünde, aç-açan gapjagazy açyp <div>ýa -da ýapyk elementiň <span>üstünden ýazmak islärsiňiz.pointer-events

Maýyp popover triggerleri üçin, popover ulanyjylaryňyza ýapyk elemente basmagynadata-trigger="hover" garaşmazlygy sebäpli derrew wizual seslenme bolup görünmegini isläp bilersiňiz .

<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>

Ulanylyşy

JavaScript arkaly açylýan ýerleri açyň:

$('#example').popover(options)

Klawiatura we kömekçi tehnologiýa ulanyjylary üçin popovers işlemek

Klawiatura ulanyjylarynyň açylýan ýerleriňizi işjeňleşdirmegine rugsat bermek üçin olary diňe klawiatura gönükdirilen we interaktiw (baglanyşyklar ýa-da forma dolandyryşlary ýaly) HTML elementlerine goşmaly. Hususy HTML elementleri (meselem <span>) tabindex="0"atribut goşmak arkaly ünsi jemläp boljakdygyna garamazdan, bu klawiatura ulanyjylary üçin interaktiw däl elementlere potensial gaharlandyryjy we bulaşyk goýma duralgalaryny goşar we häzirki wagtda köp kömekçi tehnologiýalar bu ýagdaýda popoveriň mazmunyny yglan etmeýär. . hoverMundan başga-da, diňe açýanlaryňyz üçin trigger hökmünde bil baglamaň , sebäbi bu klawiatura ulanyjylary üçin itergi bermez.

Opsiýa bilen popoverslere baý, gurluşly HTML goýup bilersiňiz html, aşa köp mazmun goşmazlygy maslahat berýäris. aria-describedbyHäzirki wagtda açylýan işleriň usuly, bir gezek görkezilenden soň, mazmuny atribut bilen trigger elementine baglydyr. Netijede, açylan mazmunyň tutuşlygyna tehnologiýa ulanyjylaryna bir uzyn, üznüksiz akym hökmünde kömek etmek yglan ediler.

Mundan başga-da, popoveriňize interaktiw dolandyryşlary (forma elementleri ýa-da baglanyşyklar ýaly) goşmak mümkin bolsa-da (bu elementleri whiteListýa-da rugsat berlen atributlara we belliklere goşmak bilen), häzirki wagtda açylýan ýeriň klawiatura fokus tertibini dolandyrmaýandygyny biliň. Klawiatura ulanyjy açylýan ýerini açanda, ünsi tüweleme elementine gönükdirýär we popover adatça resminamanyň gurluşynda triggeri yzarlamaýandygy sebäpli, öňe gitmek / basmak kepilligi ýokTABklawiatura ulanyjysyny açylýan ýerine geçirer. Gysgaça aýdylanda, aç-açan ýerine interaktiw dolandyryşlary goşmak, bu dolandyryşlary klawiatura ulanyjylary we kömekçi tehnologiýalary ulanyjylar üçin elýeterli / ulanyp bolmajak ýa-da iň bolmanda logiki däl fokus tertibini döredip biler. Bu ýagdaýlarda, ýerine modal gepleşik penjiresini ulanmagy göz öňünde tutuň.

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-animation="".

Howpsuzlyk sebäpli sanitize, sanitizeFnwe whiteListatributlary maglumat atributlary bilen üpjün edip bolmaýandygyny unutmaň.

Ady Görnüşi Bellenen Düşündiriş
animasiýa boolean dogry Açylýan ýerine CSS solgun geçişini ulanyň
gap setir | element | ýalan ýalan

Açylýan ýeri belli bir elemente goşýar. Mysal : container: 'body'. Bu opsiýa, esasanam, penjiräniň ölçegini üýtgedýän mahaly resminamanyň akymyna resminamanyň akymynda ýerleşdirmäge mümkinçilik berýänligi üçin peýdalydyr.

mazmuny setir | element | funksiýasy ''

Sypat ýok bolsa, deslapky mazmun bahasy data-content.

Eger bir funksiýa berilse, thisaçylan elementiň salgylanmasy bilen atlandyrylar.

gijikdirmek sany | obýekt 0

Açylýan ýeri (ms) görkezmek we gizlemek - el bilen trigger görnüşine degişli däl

San berilse, gizlemek / görkezmek üçin gijikdirme ulanylýar

Obýektiň gurluşy:delay: { "show": 500, "hide": 100 }

html boolean ýalan Açylýan ýere HTML salyň. Falsealňyş bolsa, jQuery textusuly DOM-a mazmun girizmek üçin ulanylar. XSS hüjümleri barada alada edýän bolsaňyz, tekst ulanyň.
ýerleşdirmek setir | funksiýasy 'dogry'

Açylýan ýeri nädip ýerleşdirmeli - awto | ýokarky | aşaky | çep | dogry. Görkezilende, popover-i dinamiki üýtgeder
.auto

Locationerleşişi kesgitlemek üçin bir funksiýa ulanylanda, ilkinji argumenti hökmünde çykýan DOM düwünine, ikinjisi hökmünde hereketlendiriji element DOM düwünine diýilýär. Kontekst thisaçylan meselä düzüldi.

saýlaýjy setir | ýalan ýalan Eger saýlaýjy üpjün edilse, açylan obýektler görkezilen nyşanlara berler. Iş ýüzünde, dinamiki HTML mazmunyny açýanlary goşmak üçin ulanylýar. Muny we maglumat beriji mysaly görüň .
şablon setir '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Açylýan ýer döredilende ulanjak HTML-i esaslaň.

Açylanlaryň titleiçine sanjym ediler .popover-header.

Açylanlaryň contentiçine sanjym ediler .popover-body.

.arrowaçylýan ok bolar.

Daşky örtük elementi .popoversynp bolmaly.

ady setir | element | funksiýasy ''

Sypat ýok bolsa, deslapky at bahasy title.

Eger bir funksiýa berilse, thisaçylan elementiň salgylanmasy bilen atlandyrylar.

trigger setir 'basyň' Nädip açylýandygy - basyň | aýlanmak | fokus | gollanma. Birnäçe trigger geçirip bilersiňiz; boşluk bilen bölüň. manualbaşga bir trigger bilen birleşdirip bolmaz.
ofset sany | setir 0 Maksadyna görä çykýan ýeriň ofset. Has giňişleýin maglumat üçin Popper.js-iň ofset resminamalaryna serediň .
yza gaýtmak setir | massiw 'flip' Popper yza gaýdyp gelende haýsy pozisiýany ulanjakdygyny kesgitlemäge rugsat beriň. Has giňişleýin maglumat üçin Popper.js-iň özüni alyp baryş resminamalaryna serediň
araçäk setir | elementi 'scrollParent' Açylýan çäkden çykýan çäk. 'viewport',, ora 'window'- 'scrollParent'da HTMLElement salgylanmasynyň bahalaryny kabul edýär (diňe JavaScript). Has giňişleýin maglumat üçin Popper.js-iň öňüni alyş resminamalaryna serediň .
arassaçylyk boolean dogry Arassaçylygy işletmek ýa-da öçürmek. Işledilen 'template'bolsa 'content'we 'title'opsiýalar arassalanar.
ak sanaw obýekt Bellenen baha Rugsat berlen atributlary we bellikleri öz içine alýan obýekt
sanitizeFn null | funksiýasy null Bu ýerde öz arassaçylyk funksiýaňyzy üpjün edip bilersiňiz. Arassaçylyk işini geçirmek üçin ýörite kitaphanany ulanmagy makul bilýän bolsaňyz, bu peýdaly bolup biler.
popperConfig null | obýekt null Bootstrap-yň deslapky Popper.js konfigurasiýasyny üýtgetmek üçin Popper.js konfigurasiýasyna serediň

Aýry-aýry açyjylar üçin maglumatlar atributlary

Aýry-aýry açyjylar üçin opsiýalar, ýokarda düşündirilişi ýaly maglumat atributlaryny ulanmak arkaly kesgitlenip bilner.

Usullar

Asynkron usullar we geçişler

APIhli API usullary asynkron bolup, geçişe başlaýar . Geçiş başlan badyna, ýöne gutarmanka jaň edijä gaýdyp gelýärler . Mundan başga-da, geçiş komponentine çagyryş usuly hasaba alynmaz .

Has giňişleýin maglumat üçin JavaScript resminamalarymyza serediň .

$().popover(options)

Element ýygnamak üçin açylanlary başlaýar.

.popover('show')

Bir elementiň açylýan ýerini açýar. Açylýan ýer görkezilmänkä (ýagny shown.bs.popoverwaka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär. Bu popoveriň “gollanma” başlangyjy hasaplanýar. Ady we mazmuny ikisi nol uzynlykdaky popovers hiç haçan görkezilmeýär.

$('#element').popover('show')

.popover('hide')

Bir elementiň açylýan ýerini gizleýär. Açylýan ýer hakykatdanam gizlenmänkä (ýagny hidden.bs.popoverwaka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär. Bu popoveriň “gollanma” başlangyjy hasaplanýar.

$('#element').popover('hide')

.popover('toggle')

Bir elementiň açylýan ýerini üýtgedýär. Açylýan ýer görkezilmän ýa-da gizlenmänkä (ýagny waka shown.bs.popoverýa-da hidden.bs.popoverwaka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär. Bu popoveriň “gollanma” başlangyjy hasaplanýar.

$('#element').popover('toggle')

.popover('dispose')

Bir elementiň açylýan ýerini gizleýär we ýok edýär. Delegasiýany ulanýan poplar (opsiýany ulanyp döredilýär ) selectornesil trigger elementlerinde aýratyn ýok edilip bilinmez.

$('#element').popover('dispose')

.popover('enable')

Bir elementiň açylýan ýerini görkezmek ukybyny berýär. Popovers deslapky görnüşde işledilýär.

$('#element').popover('enable')

.popover('disable')

Bir elementiň açylýan ýerini görkezmek ukybyny aýyrýar. Açylýan ýer diňe täzeden işledilen ýagdaýynda görkezilip bilner.

$('#element').popover('disable')

.popover('toggleEnabled')

Bir elementiň açylýan ýerini görkezmek ýa-da gizlemek ukybyny üýtgedýär.

$('#element').popover('toggleEnabled')

.popover('update')

Bir elementiň açylýan ýerini täzeleýär.

$('#element').popover('update')

Wakalar

Çäräniň görnüşi Düşündiriş
show.bs.popover showBu waka mysal usuly çagyrylanda derrew ýanýar .
görkezilen.bs.popover Bu waka, ulanyjynyň adyna açyk görkezilende (CSS geçişleriniň tamamlanmagyna garaşýar) atylýar.
hide.bs.popover Bu waka hidemysal usuly çagyrylanda derrew atylýar.
gizlenen.bs.popover Bu waka, ulanyjydan gizlenenden soň (CSS geçişleriniň tamamlanmagyna garaşýar) atylýar.
insert.bs.popover show.bs.popoverBu waka , DOM-a popover şablony goşulandan soň atylýar .
$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})