Gurallar
CSS3 we ýerli at saklamak üçin maglumat atributlary üçin CSS3 ulanyp, CSS we JavaScript bilen ýörite Bootstrap gurallaryny goşmak üçin resminamalar we mysallar.
Gysgaça syn
Gurallar maslahatynyň pluginini ulananyňyzda bilmeli zatlar:
- Gurallar ýerleşişi üçin 3-nji tarap kitaphanasy Popper -e bil baglaýar . Bootstrap.js-dan öň popper.min.js goşmaly ýa -da gurallaryň işlemegi üçin Popper-i öz içine alýan
bootstrap.bundle.min.js
/ ulanmaly!bootstrap.bundle.js
- JavaScriptimizi çeşmeden gurýan bolsaňyz, talap edýär
util.js
. - Gurallar öndürijilik sebäplerine görä saýlanýar, şonuň üçin olary özüňiz başlamaly .
- Nol uzynlykdaky atlar bilen gurallar hiç haçan görkezilmeýär.
container: 'body'
Has çylşyrymly komponentlerde ýüze çykmazlyk üçin kesgitläň (giriş toparlarymyz, düwme toparlarymyz we ş.m.) .- Gizlin elementlerdäki gural gurallary işlemez.
- Gurallar
.disabled
ýa-dadisabled
elementler üçin örtük elementinde başlamaly. - Birnäçe setiri öz içine alýan giper-baglanyşyklardan başlanda, gurallar merkezleşdiriler. Bu gylyk-häsiýetden gaça durmak üçin s-leri
white-space: nowrap;
ulanyň .<a>
- Gurallar degişli elementleri DOM-dan aýrylmazdan ozal gizlenmeli.
- Gurallar, kölegeli DOM içindäki bir elementiň kömegi bilen işledilip bilner.
prefers-reduced-motion
media talaplaryna baglydyr. Elýeterlilik resminamalarymyzyň azaldylan hereket bölümine serediň
.
Bularyň hemmesi barmy? Ajaýyp, käbir mysallar bilen nähili işleýändigini göreliň.
Mysal: Gural gurallaryny hemme ýerde işlediň
Sahypadaky ähli gural görkezmelerini başlamagyň bir usuly, olary data-toggle
atributlary boýunça saýlamak bolar:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Mysallar
Gural görkezmelerini görmek üçin aşakdaky baglanyşyklara basyň:
Gurallar bilen käbir içerki baglanyşyklary görkezmek üçin ýer eýesi teksti . Bu indi diňe doldurgyç, ganhor däl. Bu ýerde diňe hakyky tekstiň barlygyny görkezmek üçin ýerleşdirilen mazmun . Bularyň hemmesi, hakyky ýagdaýlarda ulanylanda gurallaryň nähili görünjekdigi barada düşünje bermek üçin. Şeýlelik bilen, baglanyşyklardaky bu gurallaryň öz sahypaňyzda ýa-da taslamaňyzda ulananyňyzdan soň iş ýüzünde nähili işläp biljekdigini indi görersiňiz diýip umyt edýärin .
Dört gural görkezmesini görmek üçin aşakdaky düwmeleriň üstünden basyň: ýokarky, sag, aşaky we çep.
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
Customörite HTML goşuldy:
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
Ulanylyşy
Gurallar üçin plugin isleg boýunça mazmun we bellik döredýär we adaty ýagdaýda gural elementlerini trigger elementinden soň ýerleşdirýär.
Gurallar maslahatyny JavaScript arkaly işlediň:
$('#example').tooltip(options)
Daşmak auto
wescroll
overflow: auto
Tooltip ýagdaýy ene-atanyň konteýnerinde ýa-da overflow: scroll
bizde bolanda awtomatiki üýtgemäge synanyşýar .table-responsive
, emma asyl ýerleşişini saklaýar. Çözmek üçin, boundary
opsiýany deslapky bahadan başga zatlara düzüň 'scrollParent'
, meselem 'window'
:
$('#example').tooltip({ boundary: 'window' })
Bellik
Gurallar üçin zerur bellik diňe bir data
atribut bolup title
, gurallar maslahatyny almak isleýän HTML elementiňizde. Gurallar maslahatynyň döredilen belligi gaty ýönekeý, ýöne bir pozisiýa talap edýär (deslapky görnüşde, top
plugin tarapyndan kesgitlenýär).
Klawiatura we kömekçi tehnologiýa ulanyjylary üçin gural görkezmelerini işlemek
Diňe klawiatura gönükdirilen we interaktiw (baglanyşyklar ýa-da forma dolandyryşlary ýaly) HTML elementlerine gural görkezmelerini goşmaly. Esassyz HTML elementleri (meselem <span>
) tabindex="0"
atribut goşmak bilen ü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 gural görkezmesini yglan etmeýär. hover
Mundan başga-da, diňe gurallar maslahaty üçin trigger hökmünde bil baglamaň , sebäbi bu gural gurallaryňyzy klawiatura ulanyjylary üçin döredip bilmez.
<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>
Öçürilen elementler
Sypaty bolan elementler disabled
interaktiw däl, ýagny gurallar (ýa-da popover) açmak üçin ulanyjylar ünsi jemläp, aýlap ýa-da basyp bilmeýärler. Iş usuly hökmünde, gurallar maslahatyny örtükden <div>
ýa-da iň <span>
oňat klawiatura gönükdirilen ulanyp , ýapyk elementiň tabindex="0"
üstünden ýok etmek islärsiňiz.pointer-events
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
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 | Gurallar maslahatyna CSS solgun geçişini ulanyň |
gap | setir | element | ýalan | ýalan | Gurallar maslahatyny belli bir elemente goşýar. Mysal : |
gijikdirmek | sany | obýekt | 0 | Gural görkezmesini görkezmek we gizlemek (ms) - el bilen işleýän trigger görnüşine degişli däl San berilse, gizlemek / görkezmek üçin gijikdirme ulanylýar Obýektiň gurluşy: |
html | boolean | ýalan | Gurallar bölüminde HTML-e rugsat beriň. Çyn bolsa, gurallar maslahatynda HTML bellikleri gurallar maslahatynda XSS hüjümleri barada alada edýän bolsaňyz, tekst ulanyň. |
ýerleşdirmek | setir | funksiýasy | 'ýokarky' | Gurallar maslahatyny nädip ýerleşdirmeli - awto | ýokarky | aşagy | çep | dogry. Locationerleşişi kesgitlemek üçin bir funksiýa ulanylanda, ilkinji argument hökmünde gurallar 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, gurallar obýektleri görkezilen nyşanlara berler. Iş ýüzünde, bu dinamiki goşulan DOM elementlerine ( jQuery.on goldaw) gural görkezmelerini ulanmak üçin hem ulanylýar. Muny we maglumat beriji mysaly görüň . |
şablon | setir | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
Gurallar maslahatyny döredeniňizde ulanmak üçin HTML-i esaslaň. Gurallar maslahatyna
Daşarky örtük elementiniň |
ady | setir | element | funksiýasy | '' | Sypat ýok bolsa, deslapky at bahasy Eger bir funksiýa berilse, |
trigger | setir | 'ünsi jemlemek' | Gurallar maslahatynyň nädip döredilendigi - basyň | aýlanmak | fokus | gollanma. Birnäçe trigger geçirip bilersiňiz; boşluk bilen bölüň.
|
ofset | sany | setir | funksiýasy | 0 | Gurallar maslahatynyň nyşanyna görä ofset. Ofset kesgitlemek üçin bir funksiýa ulanylanda, ilkinji argumenti hökmünde ofset maglumatlary öz içine alýan obýekt bilen atlandyrylýar. Funksiýa şol bir gurluşly bir obýekti yzyna gaýtarmaly. Tüweleme elementi DOM düwmesi ikinji argument hökmünde geçýär. 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 gurallar maslahatyna 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' | Gurallar maslahatynyň artykmaç çäk çäkleri. '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' 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 gurallar üçin maglumatlar atributlary
Aýry-aýry gurallar üç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ň .
$().tooltip(options)
Gurallar işleýjisini elementler ýygyndysyna dakýar.
.tooltip('show')
Bir elementiň gural görkezmesini açýar. Gural görkezmesi hakykatdanam görkezilmänkä (ýagny shown.bs.tooltip
waka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär. Bu gurallar maslahatynyň “el bilen” başlamagy hasaplanýar. Nol uzynlykdaky atlar bilen gurallar hiç haçan görkezilmeýär.
$('#element').tooltip('show')
.tooltip('hide')
Bir elementiň gural görkezmesini gizleýär. Gurallar maslahaty hakykatdanam gizlenmänkä (ýagny hidden.bs.tooltip
waka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär. Bu gurallar maslahatynyň “el bilen” başlamagy hasaplanýar.
$('#element').tooltip('hide')
.tooltip('toggle')
Bir elementiň gurallar maslahatyny üýtgedýär. Gurallar görkezmesi hakykatdanam görkezilmän ýa-da gizlenmänkä (ýagny waka shown.bs.tooltip
ýa-da hidden.bs.tooltip
waka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär. Bu gurallar maslahatynyň “el bilen” başlamagy hasaplanýar.
$('#element').tooltip('toggle')
.tooltip('dispose')
Bir elementiň gural görkezmesini gizleýär we ýok edýär. Delegasiýany ulanýan gurallar (opsiýany ulanyp döredilýär ) selector
nesil trigger elementlerinde aýratyn ýok edilip bilinmez.
$('#element').tooltip('dispose')
.tooltip('enable')
Bir elementiň gural görkezmesini görkezmek ukybyny berýär. Gurallar adaty ýagdaýda işledilýär.
$('#element').tooltip('enable')
.tooltip('disable')
Bir elementiň gural görkezmesini görkezmek ukybyny aýyrýar. Gurallar maslahaty diňe täzeden işledilen ýagdaýynda görkezilip bilner.
$('#element').tooltip('disable')
.tooltip('toggleEnabled')
Bir elementiň gural görkezmesiniň görkezilmegi ýa-da gizlenmegi mümkinçiligini üýtgedýär.
$('#element').tooltip('toggleEnabled')
.tooltip('update')
Bir elementiň gurallar guralynyň ýagdaýyny täzeleýär.
$('#element').tooltip('update')
Wakalar
Çäräniň görnüşi | Düşündiriş |
---|---|
show.bs.tooltip | show Bu waka mysal usuly çagyrylanda derrew ýanýar . |
görkezilen.bs.tooltip | Bu waka gural gurallary ulanyja görünen mahaly atylýar (CSS geçişleriniň tamamlanmagyna garaşýar). |
hide.bs.tooltip | Bu waka hide mysal usuly çagyrylanda derrew atylýar. |
gizlenen.bs.tooltip | Bu waka, gural görkezmesi ulanyjydan gizlenip gutarandan soň (CSS geçişleriniň tamamlanmagyna garaşar). |
insert.bs.tooltip | show.bs.tooltip Bu waka , gurallar şablony DOM-a goşulandan soň atylýar . |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})