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	bulean, setir	ýalan	Modal-fon elementini öz içine alýar. "static"Fonda basylanda modalyň ýapylmagyny islemeýän bolsaňyz, fonuny düzüň .
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 = "static"> 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 ({
  klawiatura : 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

Bootstrap-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

Bootstrap-scrollspy.js ulanmak

$ ( '#topbar' ). scrollSpy ()

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 düwmäniň ýagdaýyny dolandyrmak üçin goşmaça funksiýalary hödürleýär.

Göçürip al

Bootstrap-buttons.js ulanmak

$ ( '.tabs' ). düwmesi ()

Usullar

$ (). düwmesi ('üýtgetmek')

Toggles ýagdaýy basýar. Işledilen görnüşe btn berýär.

Bellik Aýratynlygy ulanyp, düwmäni awtomatiki usulda açyp bilersiňiz data-toggle.

<button class = "btn" data-toggle = "üýtgetmek" > ... </button>   

$ (). düwmesi ('ýüklemek')

Düwme ýagdaýyny ýüklemek üçin düzýär - düwmäni öçürýär we teksti ýüklemek üçin teksti çalyşýar. Textüklenýän tekst, maglumat atributyny ulanyp, düwme elementinde kesgitlenmeli data-loading-text.

<button class = "btn" data-load-text = "zatlary ýüklemek ..." > ... </button>   

$ (). düwmesi ('täzeden düzmek')

Düwme ýagdaýyny täzeden düzýär - teksti asyl tekste çalyşýar.

$ () düwmesi (setir)

Düwme ýagdaýyny täzeden düzýär - teksti kesgitlenen tekst ýagdaýyna tekst çalşýar.

<button class = "btn" data-complete-text = "gutardy!" > ... </button>   
<script>
  $ ('. btn'). düwmesi ('doly')
</scrip>

Demo

Demo ýüklemek Demo çalşyň

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

Göçürip al

Bootstrap-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> 
</div>
 
<script>
  $ ( funksiýa () {  
    $ ( '.tabs' ). bellikler ()
  })
</script>

Wakalar

Waka	Düşündiriş
üýtgetmek	Bu waka goýmanyň üýtgemegine sebäp bolýar. Işjeň goýmany we öňki işjeň goýmany degişlilikde ulanyň event.targetwe nyşana alyň.event.relatedTarget

$ ( '# .tabs' ). baglamak ( 'üýtgetmek' , funksiýa ( e ) {   
  e . nyşan // işjeňleşdirilen goýma
  e . baglanyşyklyTarget // öňki goýma
})

Demo

• Öý
• Profil
• Habarlar
• Sazlamalar
• Aşak
  • @fat
  • @mdo

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ýa	'titul'	atyň tekstini almak üçin atribut ýa-da usul
trigger	setir	'aýlanmak'	gurallar maslahatynyň nädip başlamagy - aýlanmak | fokus | gollanma
şablon	setir	[deslapky bellik]	Tüweleme görkezmek üçin ulanylýan html şablony.

Üns beriň Aýry-aýry öwrümli mysallar maglumat atributlaryny ulanmak arkaly başgaça kesgitlenip bilner.

<a href = "#" data-placement = "below" rel ='twipsy' title = 'Käbir adyň teksti'> tekst </a>    

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. “ Bootstrap-twipsy.js ” pluginini giňeldýär , şonuň üçin taslamaňyza açylýan ýerleri goşanyňyzda şol faýly hem ele alyň!

Üns beriň , bootstrap-popover.js-dan öň bootstrap- twipsy.js faýlyny goşmaly.

Göçürip al

Bootstrap-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ýa	'titul'	atyň tekstini almak üçin atribut ýa-da usul
mazmuny	setir, funksiýa	'maglumat mazmuny'	mazmun tekstini almak üçin setir ýa-da usul. hiç biri berilmese, mazmun maglumat mazmuny atributyndan alynar.
trigger	setir	'aýlanmak'	gurallar maslahatynyň nädip başlamagy - aýlanmak | fokus | gollanma
şablon	setir	[deslapky bellik]	Açylýan ýer görkezmek üçin ulanylýan html şablony.

Bellik Aýry-aýry popover mysal opsiýalary maglumat atributlaryny ulanmak arkaly başgaça kesgitlenip bilner.

<a data-placement = "below" href = "#" class = "btn danger" rel = "popover"> text </a>    

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ň .

Görnüş

Ady	görnüşi	gaýybana	beýany
saýlaýjy	setir	'ýapyň'	Duýduryşy ýapmak üçin haýsy saýlaýjy.

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