Popovers
Sahypaňyzdaky islendik elemente, iOS-daky ýaly Bootstrap popoversini goşmak üçin resminamalar we mysallar.
Gysgaça syn
Açylýan plugin ulanylanda bilmeli zatlar:
- Popovers ýerleşmek üçin 3-nji tarap kitaphanasy Popper -ä bil baglaýar . Bootstrap.js-dan öň popper.min.js goşmaly ýa -da popoversiň işlemegi üçin Popper-i ulanmaly
bootstrap.bundle.min.js
/ ulanmalybootstrap.bundle.js
! - Popovers garaşlylyk hökmünde gurallar pluginini talap edýär.
- JavaScriptimizi çeşmeden gurýan bolsaňyz, talap edýär
util.js
. - Popovers öndürijilik sebäplerine görä saýlanýar, şonuň üçin olary özüňiz başlamaly .
- Nol uzynlygy
title
wecontent
bahalary 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-dadisabled
elementler üçin ýazgylar, örtük elementinde başlamaly. - Birnäçe çyzyk bilen örtülen labyrlardan başlanda, gämi duralgalarynyň umumy giňliginiň arasynda jemlener. Bu gylyk-häsiýetden gaça durmak üçin s-leri
.text-nowrap
ulanyň .<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.
prefers-reduced-motion
media 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-toggle
atributlary boýunça saýlamak bolar:
$(function () {
$('[data-toggle="popover"]').popover()
})
Mysal: container
Opsiýany ulanmak
Esasy elementde popover-a päsgel berýän käbir stilleriňiz bar bolsa, container
ýerine ýetirijiniň 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="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>
Indiki gezek basyň
focus
Ulanyjynyň üýtgetmek elementinden başga bir elementiň indiki gezek basylmagynda açylanlary aýyrmak üçin trigger ulanyň .
Işden çykarmak üçin indiki basmak üçin zerur bellik
Dogry kross-brauzer we platforma häsiýeti üçin bellik däl -de, <a>
belligi ulanmaly we 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
Aýratynlygy bolan elementler disabled
interaktiw däl, ýagny ulanyjylar bir popover (ýa-da gural görkezmesi) açmak üçin basyp ýa-da basyp bilmeýärler. Işleýiş hökmünde, açylýan ýeri bir gabykdan çykarmak <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)
GPU tizlenmesi
GPU tizlenmesi we üýtgedilen DPI ulgamy sebäpli popovers käwagt Windows 10 enjamlarynda bulaşyk görünýär. V4-de munuň çözgüdi, açylýan ýerleriňize görä GPU tizlenmesini öçürmekdir.
Teklip edilen düzediş:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
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. . hover
Mundan 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-describedby
Hä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=""
.
sanitize
,
sanitizeFn
we
whiteList
atributlary 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 : |
mazmuny | setir | element | funksiýasy | '' | Sypat ýok bolsa, deslapky mazmun bahasy Eger bir funksiýa berilse, |
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: |
html | boolean | ýalan | Açylýan ýere HTML salyň. Falsealňyş bolsa, jQuery text usuly 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şagy | çep | dogry. Görkezilende, popover-i dinamiki üýtgeder Placerleşişi kesgitlemek üçin bir funksiýa ulanylanda, ilkinji argumenti hökmünde açylýan DOM düwünine, ikinjisi hökmünde hereketlendiriji element DOM düwünine diýilýär. Kontekst |
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ň Açylanlaryň
Daşky örtük elementi |
ady | setir | element | funksiýasy | '' | Sypat ýok bolsa, deslapky at bahasy Eger bir funksiýa berilse, |
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üň. manual baş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-iň ofset resminamalaryna serediň . |
yza gaýtmak | setir | massiw | 'flip' | Popperiň yza gaýdyp haýsy pozisiýany ulanjakdygyny kesgitlemäge rugsat beriň. Has giňişleýin maglumat üçin Popperiň özüni alyp baryş resminamalaryna serediň |
CustomClass | setir | funksiýasy | '' | Görkezilende açylýan ýere sapak goşuň. Bu synplaryň şablonda görkezilen islendik sapaklara goşmaça goşuljakdygyny unutmaň. Birnäçe synp goşmak üçin boşluklar bilen bölüň : Şeýle hem goşmaça synp atlaryny öz içine alýan bir setiri yzyna gaýtarmaly funksiýany geçirip bilersiňiz. |
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-iň öňüni alyşOverflow resminamalaryna serediň . |
arassaçylyk | boolean | dogry | Arassaçylygy işletmek ýa-da öçürmek. Işledilen 'template' bolsa 'content' we 'title' opsiýalar arassalanar. JavaScript resminamalarymyzdaky arassaçylyk bölümine serediň . |
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 konfigurasiýasyny üýtgetmek üçin Popper-iň 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.popover
waka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär. Bu popoveriň “el bilen” başlamagy 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.popover
waka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär. Bu popoveriň “el bilen” başlamagy 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.popover
waka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär. Bu popoveriň “el bilen” başlamagy 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 ) selector
nesil trigger elementlerinde aýratyn ýok edilip bilinmez.
$('#element').popover('dispose')
.popover('enable')
Bir elementiň açylmagyna 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 | show Bu waka mysal usuly çagyrylanda derrew ýanýar . |
görkezilen.bs.popover | Bu waka, ulanyjy üçin açyk görkezilende (CSS geçişleriniň tamamlanmagyna garaşar) atylýar. |
hide.bs.popover | Bu waka hide mysal usuly çagyrylanda derrew atylýar. |
gizlenen.bs.popover | Bu waka, ulanyjydan gizlenip gutarandan soň (CSS geçişleriniň tamamlanmagyna garaşar) atylýar. |
insert.bs.popover | show.bs.popover Bu waka , DOM-a popover şablony goşulandan soň atylýar . |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})