Source

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 üçin plugin ulanylanda bilmeli zatlar:

  • Gurallar ýerleşdirmek üçin 3-nji tarap kitaphanasy Popper.js -e bil baglaýar . Bootstrap.js-dan öň popper.min.js goşmaly ýa -da gurallaryň işlemegi üçin Popper.js-i öz içine alýan bootstrap.bundle.min.js/ ulanmaly!bootstrap.bundle.js
  • JavaScriptimizi çeşmeden gurýan bolsaňyz, talap edýärutil.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 kynçylyk döretmezligi kesgitläň (giriş toparlarymyz, düwme toparlarymyz we ş.m.) .
  • Gizlin elementlerdäki gural gurallary işlemez.
  • Gurallar .disabledýa-da disabledelementler üç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.

Bu komponentiň animasiýa täsiri prefers-reduced-motionmedia 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-toggleatributlary boýunça saýlamak bolar:

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

Mysallar

Gural görkezmelerini görmek üçin aşakdaky baglanyşyklara basyň:

Indiki derejeli berk balak , belki , olar hakda eşitmediňiz. Surat stendiniň sakgal çig denim harpy, wegetarian habarçy sumkasy. Fermer-stol stoly, mcsweeney-iň durnukly kwinoa 8 bitli amerikan eşiginde terri Riçardson winil çembraýy bar . Sakgal saklanýar, kardiganlar banh mi lomo ýyldyrym çakýar. Tofu biodizel williamsburg marfa, dört loko msweeniniň arassa wegetarian kamerasy. Çyndanam gülkünç bir senetçi , haýsy açar, sahna fermasy-stol banksy Austin twitter , freegan kredit denim ýeke-täk kofe wirusly.

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 autowescroll

overflow: autoTooltip ýagdaýy ene-atanyň konteýnerinde ýa-da overflow: scrollbizde bolanda awtomatiki üýtgemäge synanyşýar .table-responsive, emma asyl ýerleşişini saklaýar. Çözmek üçin, boundaryopsiýany deslapky bahadan başga zatlara düzüň 'scrollParent', meselem 'window':

$('#example').tooltip({ boundary: 'window' })

Bellik

Gurallar üçin zerur bellik diňe bir dataatribut 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, topplugin 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. hoverMundan 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 disabledinteraktiw 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="".

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 Gurallar maslahatyna CSS solgun geçişini ulanyň
gap setir | element | ýalan ýalan

Gurallar maslahatyny belli bir elemente goşýar. Mysal : container: 'body'. Bu opsiýa, gural görkezijisini resminamanyň akymynda hereketlendiriji elementiň ýanynda ýerleşdirmäge mümkinçilik berýänligi üçin peýdalydyr - bu penjiräniň ölçegi üýtgän mahaly gural görkezijisiniň hereketlendiriji elementden uzaklaşmagynyň öňüni alar.
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:delay: { "show": 500, "hide": 100 }
html boolean ýalan

Gurallar bölüminde HTML-e rugsat beriň.

Çyn bolsa, gurallar maslahatynda HTML bellikleri gurallar maslahatynda titlegörkeziler. 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 'ýokarky'

Gurallar maslahatyny nädip ýerleşdirmeli - awto | ýokarky | aşaky | çep | dogry.
Görkezilende, gurallar automaslahatyny dinamiki üýtgeder.

Placerleşişi kesgitlemek üçin bir funksiýa ulanylanda, ilkinji argumenti hökmünde gural gurallary DOM düwünine, ikinjisi hökmünde hereketlendiriji element DOM düwünine diýilýär. Kontekst thisgurallar maslahatyna düzüldi.
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.ongoldaw) 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 esaslaň.

Gurallar maslahatyna titlesanjym ediler .tooltip-inner.

.arrowgurallaryň oky bolar.

Daşarky örtük elementiniň .tooltipsynpy we role="tooltip".
ady setir | element | funksiýasy ''

Sypat ýok bolsa, deslapky at bahasy title.

Eger bir funksiýa berilse, thisgurallar toplumynyň birikdirilen elementine salgylanma toplumy bilen çagyrylar.
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üň.

'manual'gurallar maslahatynyň programma we .tooltip('show')usullar arkaly başlajakdygyny görkezýär ; bu bahany başga bir trigger bilen birleşdirip bolmaz..tooltip('hide').tooltip('toggle')

'hover'öz-özünden klawiatura arkaly işledip bolmaýan gurallar görkezer we diňe klawiatura ulanyjylary üçin şol bir maglumatlary bermegiň alternatiw usullary bar bolsa ulanylmalydyr.
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.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' 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.js-iň öňüni alyş resminamalaryna serediň .
arassaçylyk boolean dogry Arassaçylygy işletmek ýa-da öçürmek. Işledilen 'template'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 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.tooltipwaka ýü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.tooltipwaka ýü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.tooltipwaka ýü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 ) selectornesil 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örkezilmegini aradan 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 showBu waka mysal usuly çagyrylanda derrew ýanýar .
görkezildi.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 hidemysal 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.tooltipBu waka , gurallar şablony DOM-a goşulandan soň atylýar . 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})