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 maslahatynyň pluginini ulananyňyzda bilmeli zatlar:

  • Gurallar, ýerleşiş üç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 uzynlykly 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-da disabledelementler üçin gurallar, örtük elementinde bolmaly.
  • 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.

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 keffiyeh , belki , olar hakda eşitmediňiz. Suratly stend sakgal çig denim harplary wegetarian habarçy sumkasy. Fermer-stol stoluna seýtan, mcsweeney-iň durnukly kwino 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 msweeney-iň 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 maslahatynyň plugin islege görä 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)

Bellik

Gurallar üçin zerur bellik diňe bir dataatributdyr we titleHTML elementinde gurallar maslahatyny almak isleýärsiňiz. 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 bolan (baglanyşyklar ýa-da forma dolandyryşlary ýaly) HTML elementlerine gural görkezmelerini goşmaly. Özbaşdak HTML elementleri (meselem <span>) tabindex="0"atributy goşmak bilen ünsi jemläp boljakdygyna garamazdan, bu klawiatura ulanyjylary üçin interaktiw däl elementlerde potensial gaharlandyryjy we bulaşyk goýma duralgalaryny goşar. Mundan başga-da, häzirki wagtda kömekçi tehnologiýalaryň köpüsi 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="".

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şagy | ç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, dinamiki HTML mazmunyny açýanlary goşmak üçin 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şky örtük elementi .tooltipsynp bolmaly we role="tooltip".
ady setir | element | funksiýasy ''

Sypat ýok bolsa, deslapky at bahasy title.

Eger bir funksiýa berilse, thisgurallar maslahatynyň 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 0 Gurallar maslahatynyň nyşanyna görä ofset. Has giňişleýin maglumat üçin Popper.js-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 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ň .

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. Gurallar görkezmesi 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 uzynlykly 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. Gural 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…
})