Modal pluginimiz, adaty modal js pluginini gaty ýuka, twitterde diňe şu ýerde talap edýän ýalaňaç funksiýamyzy goşmak üçin aýratyn üns berýär.

Göçürip al

Bootstrap-modal ulanmak

$ ( '# my-modal' ). modal ( opsiýalar )

Görnüş

Ady	görnüşi	gaýybana	beýany
fon	boolean	ýalan	Modal-fon elementini öz içine alýar
klawiatura	boolean	ýalan	Gaçmak düwmesi basylanda modaly ýapýar
görkezmek	boolean	ýalan	Synp başlangyjynda modal açýar

Bellik

Javascriptiň bir setirini ýazman, sahypaňyzdaky modallary aňsatlyk bilen işjeňleşdirip bilersiňiz. Diňe data-controls-modalmodal element idine gabat gelýän bir element beriň, basylanda modalyňyzy işe girizer. Modal opsiýalary goşmak üçin olary diňe maglumat atributlary hökmünde goşuň.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true"> Modal açmak </a>    

Üns beriň Modalyňyzyň içerde we daşarda janlanmagyny isleseňiz, elementiňize diňe bir .fadesynp goşuň .modal(muny hereketde görmek üçin demo serediň).

Usullar

.modal (opsiýalar)

Mazmunyňyzy modal hökmünde işjeňleşdirýär. Goşmaça wariantlary kabul edýär object.

$ ( '# my-modal' ). modal ({
  closeOnEscape : dogry 
})

.modal ('üýtgetmek')

Modal bilen el bilen çalşyň.

$ ( '# my-modal' ). modal ( 'üýtgetmek' )

.modal ('görkezmek')

Modal bilen el bilen açýar.

$ ( '# my-modal' ). modal ( 'görkezmek' )

.modal ('gizlemek')

Modaly el bilen gizleýär.

$ ( '# my-modal' ). modal ( 'gizlemek' )

.modal (dogry)

Elementleriň modal synp mysalyny görkezýär.

$ ( '# my-modal' ). modal ( dogry )

Üns beriň Başgaça, muny alyp bilersiňiz $().data('modal').

Wakalar

“Bootstrap” -yň modal synpy modal işleýşi üçin birnäçe wakany paş edýär.

Waka	Düşündiriş
görkezmek	showBu waka mysal usuly çagyrylanda derrew ýanýar .
görkezildi	Bu waka modal ulanyja görünen mahaly atylýar (css geçişleriniň tamamlanmagyna garaşýar).
gizle	Bu waka hidemysal usuly çagyrylanda derrew atylýar.
gizlenen	Bu waka, modal ulanyjydan gizlenip gutarandan soň atylýar (css geçişleriniň tamamlanmagyna garaşýar).

$ ( '# my-modal' ). daňmak ( 'gizlenen' , funksiýa () {   
  // bir zatlar et ...
})

Demo

Modal işe giriziň

Bu plugin, bootstrap topbar ýa-da bellikli nawigasiýalara aşak düşýän täsirini goşmak üçin.

Göçürip al

Boostrap-dropdown.js ulanmak

$ ( '#topbar' ). aşak düşmek ()

Bellik

Islendik bir elemente aşak gaçma funksiýasyny çalt goşmak üçin data-dropdownatributdan peýdalanyň. Islendik dogry bootstrap açylmagy awtomatiki usulda işjeňleşdiriler.

<ul class = "tabs" > 
  <li class = "işjeň" > <a href = "#"> Baş sahypa </a> </li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle"> Açylma </a> _  
    <ul class = "drop-menu" > 
      <li> <a href = "#"> Ikinji baglanyşyk </a> </li> 
      <li> <a href = "#"> Bu ýerde başga bir zat </a> </li> 
      <li class = "bölüji" > </li> 
      <li> <a href = "#"> Başga bir baglanyşyk </a> </li> 
    </ul>
  </li>
</ul>

Üns beriň , ui-de birnäçe açylma bar bolsa, ýa-da data-dropdownýaly has möhüm konteýner elementine atribut goşmagy göz öňünde tutuň ..tabs.topbar

Usullar

aşak düşmek ()

Berlen topbar ýa-da bellikli nawigasiýa üçin menýulary işjeňleşdirmek üçin programma api.

Demo

Bu plugin, bootstrap topbarsyna scrollspy (awtomatik täzelenýän nav) täsirini goşmak üçin.

Göçürip al

Boostrap-scrollspy.js ulanmak

$ ( '#topbar' ). aşak düşmek ()

Bellik

Deňiziňize skrollspy häsiýetini aňsatlyk bilen goşmak üçin diňe data-scrollspyatributyny goşuň .topbar.

<div class = "topbar" data-scrollspy = "scrollspy" > ... </div>   

Usullar

$ (). scrollspy ()

Ulanyjylar aýlaw ýagdaýy bilen nawigasiýa düwmelerini awtomatik işjeňleşdirýär.

$ ( 'beden> .topbar' ). scrollSpy ()

Üns beriň Topbar labyr belliklerinde çözülip bilinýän ID nyşanlary bolmaly. Mysal üçin, <a href="#home">home</a>domdaky ýaly bir zada laýyk bolmaly <div id="home"></div>.

.scrollspy ('täzele')

“Scrollspy” keş düwmeleri we ýerine ýetiriş üçin bölüm koordinatlary. Bu keş keşini täzelemeli bolsaňyz (dinamiki mazmunyňyz bar bolsa), bu täzeleme usulyna jaň ediň. Scrollspy kesgitlemek üçin maglumat atributyny ulanan bolsaňyz, bedeniňize täzelenme çagyryň.

$ ( 'beden' ). scrollspy ( 'täzele' )

Demo

Bu sahypadaky ýokarky panel nawigasiýasyna göz aýlaň.

Bu plugin çalt, dinamiki tab we tabletka funksiýasyny goşýar.

Göçürip al

Boostrap-tabs.js ulanmak

$ ( '.tabs' ). bellikler ()

Bellik

data-tabsDiňe bir ýa-da data-pillsatribut bermek bilen haýsydyr bir javascript ýazmazdan bir tab ýa-da tablet nawigasiýasyny işjeňleşdirip bilersiňiz .

 <ul class = "tabs" data-tabs = "tabs" > ... </ul>   

Usullar

$ (). goýmalar ýa-da $ (). dermanlar

Berlen gap üçin tab we tabletka işleýşini işjeňleşdirýär. Salgy baglanyşyklary resminamadaky id-leri görkezmeli.

<ul class = "tabs" > 
  <li class = "işjeň" > <a href = "#home"> Öý </a> </li>  
  <li> <a href = "#profile"> Profil </a> </li> 
  <li> <a href = "#messages"> Habarlar </a> </li> 
  <li> <a href = "#settings"> Sazlamalar </a> </li> 
</ul>
 
<div class = "tablet-content" > 
  <div class = "işjeň" id = "home" > ... </div>  
  <div id = "profil" > ... </div> 
  <div id = "habarlar" > ... </div> 
  <div id = "sazlamalar" > ... </div> 
</ul>
 
<script>
  $ ( funksiýa () {  
    $ ( '.tabs' ). bellikler ()
  })
</script>

Demo

• Öý
• Profil
• Habarlar
• Sazlamalar

Jeýson Frame tarapyndan ýazylan ajaýyp jQuery.tipsy plugin esasynda; twipsy, şekillere bil baglamaýan, animasiýa üçin css3 we at saklamak üçin maglumat atributlaryny ulanýan täzelenen wersiýa!

Göçürip al

Bootstrap-twipsy.js ulanmak

$ ( '# mysal' ). çişirmek ( opsiýalar )

Görnüş

Ady	görnüşi	gaýybana	beýany
janlandyrmak	boolean	dogry	gurallar maslahatyna css solup geçişini ulanyň
Gijä galmak	sany	0	gural görkezmesini görkezmezden gijä galmak (ms)
Gijä goýmak	sany	0	gurallar maslahatyny (ms) gizlemezden gijä galmak
yza çekilmek	setir	''	gurallar ady ýok wagty ulanmaly tekst
ýerleşdirmek	setir	'ýokarda'	gural görkezijisini nädip ýerleşdirmeli - ýokarda | aşakda | çep | dogry
html	boolean	ýalan	gurallar maslahatynyň içinde html mazmunyna mümkinçilik berýär
ýaşa	boolean	ýalan	aýratyn hadysalary işleýänleriň ýerine waka wekiliýetini ulanyň
ofset	sany	0	nyşan elementinden gural görkezijisiniň piksel ofset
ady	setir | funksiýasy	'titul'	atyň tekstini almak üçin atribut ýa-da usul
trigger	setir	'aýlanmak'	gurallar maslahatynyň nädip başlamagy - aýlanmak | fokus | gollanma

Usullar

$ ().

Elementler ýygyndysyna iki esse işleýjini dakýar.

.twipsy ('görkezmek')

Bir elementi aç-açan görkezýär.

$ ( '#element' ). tüýdük ( 'görkezmek' )

.twipsy ('gizlemek')

Bir elementi gizleýär.

$ ( '#element' ). çişirmek ( 'gizlemek' )

.twipsy (dogry)

Elementleriň goşa synp mysalyny görkezýär.

$ ( '#element' ). tüýdük ( dogry )

Üns beriň Başgaça, muny alyp bilersiňiz $().data('twipsy').

Demo

Açylýan plugin, programmaňyza popovers goşmak üçin ýönekeý interfeýs hödürleýär. Boostrap-twipsy.js pluginini giňeldýär , şonuň üçin taslamaňyza popovers goşanyňyzda şol faýly hem ele alyň!

Göçürip al

Boostrap-popover.js ulanmak

$ ( '# mysal' ). popover ( opsiýalar )

Görnüş

Ady	görnüşi	gaýybana	beýany
janlandyrmak	boolean	dogry	gurallar maslahatyna css solup geçişini ulanyň
Gijä galmak	sany	0	gural görkezmesini görkezmezden gijä galmak (ms)
Gijä goýmak	sany	0	gurallar maslahatyny (ms) gizlemezden gijä galmak
yza çekilmek	setir	''	gurallar ady ýok wagty ulanmaly tekst
ýerleşdirmek	setir	'dogry'	gural görkezijisini nädip ýerleşdirmeli - ýokarda | aşakda | çep | dogry
html	boolean	ýalan	gurallar maslahatynyň içinde html mazmunyna mümkinçilik berýär
ýaşa	boolean	ýalan	aýratyn hadysalary işleýänleriň ýerine waka wekiliýetini ulanyň
ofset	sany	0	nyşan elementinden gural görkezijisiniň piksel ofset
ady	setir | funksiýasy	'titul'	atyň tekstini almak üçin atribut ýa-da usul
mazmuny	setir | funksiýasy	'maglumat mazmuny'	mazmun tekstini almak üçin atribut ýa-da usul
trigger	setir	'aýlanmak'	gurallar maslahatynyň nädip başlamagy - aýlanmak | fokus | gollanma

Usullar

$ (). popover (opsiýalar)

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

.popover ('görkezmek')

Bir elementiň açylmagyny açýar.

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

.popover ('gizlemek')

Bir elementi açýar.

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

Demo

popover üçin aýlan

Duýduryş plugin, duýduryşlara ýakyn işlemek üçin gaty kiçi synpdyr.

Göçürip al

Bootstrap-alerts.js ulanmak

$ ( ".alert-habar" ). duýduryş ()

Bellik

data-alertAwtomatiki usulda ýakyn işlemek üçin duýduryş habarlaryňyza bir aýratynlyk goşuň .

Usullar

$ () duýduryş ()

Allhli duýduryşlary ýakyn işlemek bilen örtýär. .fadeClosedapylanda duýduryşlaryňyzy janlandyrmak üçin, eýýäm olara we synplara degişlidigine göz ýetiriň .in.

.alert ('ýakyn')

Duýduryşy ýapýar.

$ ( ".alert-habar" ). duýduryş ( 'ýap' )

Demo