I-plugin yethu ye-Modal iwukuthatha okuncane kakhulu kwe-plugin ye-modal yendabuko ye-js, ithatha ukunakekela okukhethekile ukuze ifake kuphela umsebenzi ongenalutho esiwudinga lapha ku-twitter.

Landa

Ukusebenzisa i-bootstrap-modal

$ ( '#my-modal' ). imodeli ( izinketho )

Izinketho

Igama	uhlobo	okuzenzakalelayo	incazelo
okwasemuva	boolean	amanga	Ifaka i-elementi ye-modal-backdrop
ikhibhodi	boolean	amanga	Ivala i-modal lapho ukhiye we-escape ucindezelwa
umbukiso	boolean	amanga	Ivula i-modal ekuqaliseni ikilasi

Imakhaphu

Ungavula amamodali ekhasini lakho kalula ngaphandle kokuthi ubhale umugqa owodwa we-javascript. Vele unikeze isici isici data-controls-modalesihambisana ne-id yesici se-modal, futhi uma ichofozwa, izokwethula i-modal yakho. Ukwengeza izinketho ze-modal, vele uzifake njengezibaluli zedatha futhi.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true" > Inqubo yokwethula </a>    

Isaziso Uma ufuna i-modal yakho iphile ngaphandle nangaphakathi, mane ungeze .fadeikilasi .modalkusici sakho (bheka idemo ukuze ubone lokhu kusebenza).

Izindlela

.modal(izinketho)

Yenza okuqukethwe kwakho kusebenze njengemodeli. Yamukela izinketho ozikhethela object.

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

.modal('guqula')

Iguqula ngokwenza i-modal.

$ ( '#my-modal' ). i-modal ( 'guqula' )

.modal('show')

Ivula mathupha i-modal.

$ ( '#my-modal' ). imodeli ( 'show' )

.modal('fihla')

Ifihla i-modal ngokwenza.

$ ( '#my-modal' ). i-modal ( 'fihla' )

.modal(iqiniso)

Ibuyisela isibonelo sekilasi le-elementi.

$ ( '#my-modal' ). i-modal ( iqiniso )

Qaphela Kungenjalo, lokhu kungabuyiswa nge- $().data('modal').

Imicimbi

Ikilasi le-modal ye-Bootstrap lidalula imicimbi embalwa ukuze ixhume ekusebenzeni kwe-modal.

Umcimbi	Incazelo
umbukiso	Lo mcimbi uvutha ngokushesha lapho showindlela yesibonelo ibizwa.
kubonisiwe	Lo mcimbi uxoshwa lapho i-modal yenziwe yabonakala kumsebenzisi (izolinda ukuthi izinguquko ze-css ziqedele).
fihla	Lo mcimbi uxoshwa ngokushesha lapho hideindlela yesibonelo ibizwa.
kufihliwe	Lo mcimbi uxoshwa lapho i-modal isiqedile ukufihlwa kumsebenzisi (izolinda ukuthi izinguquko ze-css ziqedele).

$ ( '#my-modal' ). bopha ( 'kufihliwe' , umsebenzi () {   
  // enza into ...
})

Idemo

Yethula i-Modal

Le plugin ingeyokwengeza ukusebenzisana okwehlayo kubha ephezulu ye-bootstrap noma ukuzulazula okunethebhu.

Landa

Ukusebenzisa i-boostrap-dropdown.js

$ ( '#topbar' ). okwehlayo ()

Imakhaphu

Ukwengeza ngokushesha ukusebenza okwehlayo kunoma iyiphi into ye-nav, sebenzisa data-dropdownisibaluli. Noma yikuphi okwehliswayo kwe-bootstrap okuvumelekile kuzovulwa ngokuzenzakalelayo.

<ul class = "amathebhu" > 
  <li class = "active" ><a href = "#" > Ikhaya </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Okwehlayo </a>  
    <ul class = "imenyu eyehlayo" > 
      <li><a href = "#" > Isixhumanisi sesibili </a></li> 
      <li><a href = "#" > Okunye okunye lapha </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Esinye isixhumanisi </a></li> 
    </ul>
  </li>
</ul>

Isaziso Uma i-ui yakho inokwehliswayo okumbalwa, cabanga ukwengeza data-dropdownisibaluli kusici esibaluleke kakhulu sesiqukathi esifana .tabsnoma .topbar.

Izindlela

$().okwehlayo()

I-api ehlelekile yokwenza amamenyu asebenze kubha ephezulu noma ukuzulazula okunethebhu.

Idemo

Le plugin ingeyokwengeza ukusebenzisana kwe-scrollspy (i-auto update nav) kubha yangaphezulu ye-bootstrap.

Landa

Ukusebenzisa i-boostrap-scrollspy.js

$ ( '#topbar' ). okwehlayo ()

Imakhaphu

Ukwengeza kalula ukuziphatha kwe-scrollspy ku-nav yakho, mane ungeze data-scrollspyisibaluli ku- .topbar.

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

Izindlela

$().scrollspy()

Ivula ngokuzenzakalelayo izinkinobho zokuzulazula ngabasebenzisi ngendawo yokuskrola.

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

Isaziso omaka be-Topbar anchor kumele babe nethagethi ye-id exazululekayo. Isibonelo, i-a <a href="#home">home</a>must ihambisane nento ethile edomini efana <div id="home"></div>.

.scrollspy('refresh')

I-scrollspy inqolobane yezinkinobho ze-nav kanye nezixhumanisi zesigaba ukuze kusebenze. Uma udinga ukubuyekeza le cache (cishe uma unokuqukethwe okunamandla) mane ushayele le ndlela yokuvuselela. Uma usebenzise isibaluli sedatha ukuchaza i-scrollspy yakho, vele ushayele ukuvuselela emzimbeni.

$ ( 'umzimba' ). scrollspy ( 'refresh' )

Idemo

Bheka ukuzulazula kwebha ephezulu kuleli khasi.

Le plugin yengeza ithebhu esheshayo, eguqukayo kanye nokusebenza kwamaphilisi.

Landa

Ukusebenzisa i-boostrap-tabs.js

$ ( '.amathebhu' ). amathebhu ()

Imakhaphu

Ungakwazi ukwenza kusebenze ithebhu noma ukuzulazula kwephilisi ngaphandle kokubhala noma iyiphi i-javascript ngokumane ubanikeze data-tabsnoma data-pillsisibaluli.

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

Izindlela

$().amathebhu noma $().amaphilisi

Yenza kusebenze ithebhu nephilisi esitsheni esinikeziwe. Izixhumanisi zamathebhu kufanele zibhekise ama-id kudokhumenti.

<ul class = "amathebhu" > 
  <li class = "active" ><a href = "#home"> Ikhaya </a></li >  
  <li > <a href = "#iphrofayili"> Iphrofayili </a></li> 
  <li><a href = "#imiyalezo" > Imilayezo </a></li> 
  <li > <a href = "#settings"> Izilungiselelo </a></li> 
</ul>
 
<div class = "okuqukethwe kwephilisi" > 
  <div class = "active" id = "ekhaya" > ... </div>  
  <div id = "iphrofayili" > ... </div> 
  <div id = "imiyalezo" > ... </div> 
  <div id = "izilungiselelo" > ... </div> 
</ul>
 
<script>
  $ ( umsebenzi () {  
    $ ( '.amathebhu' ). amathebhu ()
  })
</script>

Idemo

• Ikhaya
• Iphrofayela
• Imilayezo
• Izilungiselelo

Ngokusekelwe ku-plugin enhle kakhulu ye-jQuery.tipsy ebhalwe ngu-Jason Frame; I-twipsy inguqulo ebuyekeziwe, engancikile ezithombeni, isebenzisa i-css3 ukugqwayiza, kanye nezibaluli zedatha zokulondoloza isihloko!

Landa

Isebenzisa i-bootstrap-twipsy.js

$ ( '#isibonelo' ). twipsy ( izinketho )

Izinketho

Igama	uhlobo	okuzenzakalelayo	incazelo
phila	boolean	iqiniso	sebenzisa inguquko ye-css fade ethiphu yamathuluzi
delayIn	inombolo	0	ukubambezeleka ngaphambi kokubonisa ithiphu (ms)
delayOut	inombolo	0	ukubambezeleka ngaphambi kokufihla ithiphu (ms)
ozowela kuyo	umucu	''	umbhalo ozosetshenziswa uma singekho isihloko sethiphu
ukubekwa	umucu	'ngenhla'	indlela yokubeka ithiphu yamathuluzi - ngenhla | ngezansi | kwesokunxele | kwesokudla
html	boolean	amanga	ivumela okuqukethwe kwe-html ngaphakathi kwethiphu yamathuluzi
phila	boolean	amanga	sebenzisa ukuthunyelwa komcimbi esikhundleni seziphathi zomcimbi ngazinye
offset	inombolo	0	I-pixel offset yethulithiphu kusukela kusici esiqondiwe
isihloko	umucu | umsebenzi	'isihloko'	isibaluli noma indlela yokubuyisa umbhalo wesihloko
inhlamvu	umucu	'hambahamba'	ukuthi ithiphu yamathuluzi icushwa kanjani - hambisa phezulu | gxila | imanuwali

Izindlela

$().twipsy(izinketho)

Inamathisela isibambi se-twipsy eqoqweni le-elementi.

.twipsy('show')

Iveza i-elementi twipsy.

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

.twipsy('fihla')

Ifihla i-elementi twipsy.

$ ( '#element' ). twipsy ( 'fihla' )

.twipsy(iqiniso)

Ibuyisela isibonelo sekilasi le-elementi.

$ ( '#element' ). twipsy ( iqiniso )

Qaphela Kungenjalo, lokhu kungabuyiswa nge- $().data('twipsy').

Idemo

I-plugin ye-popover inikeza isixhumi esibonakalayo esilula sokwengeza ama-popover kuhlelo lwakho lokusebenza. Inweba i-plugin ye -boostrap-twipsy.js , ngakho qiniseka ukuthi uyalibamba lelo fayela futhi lapho ufaka ama-popover kuphrojekthi yakho !

Landa

Ukusebenzisa i-boostrap-popover.js

$ ( '#isibonelo' ). i- popover ( izinketho )

Izinketho

Igama	uhlobo	okuzenzakalelayo	incazelo
phila	boolean	iqiniso	sebenzisa inguquko ye-css fade ethiphu yamathuluzi
delayIn	inombolo	0	ukubambezeleka ngaphambi kokubonisa ithiphu (ms)
delayOut	inombolo	0	ukubambezeleka ngaphambi kokufihla ithiphu (ms)
ozowela kuyo	umucu	''	umbhalo ozosetshenziswa uma singekho isihloko sethiphu
ukubekwa	umucu	'kwesokudla'	indlela yokubeka ithiphu yamathuluzi - ngenhla | ngezansi | kwesokunxele | kwesokudla
html	boolean	amanga	ivumela okuqukethwe kwe-html ngaphakathi kwethiphu yamathuluzi
phila	boolean	amanga	sebenzisa ukuthunyelwa komcimbi esikhundleni seziphathi zomcimbi ngazinye
offset	inombolo	0	I-pixel offset yethulithiphu kusukela kusici esiqondiwe
isihloko	umucu | umsebenzi	'isihloko'	isibaluli noma indlela yokubuyisa umbhalo wesihloko
okuqukethwe	umucu | umsebenzi	'okuqukethwe kwedatha'	isibaluli noma indlela yokubuyisa umbhalo wokuqukethwe
inhlamvu	umucu	'hambahamba'	ukuthi ithiphu yamathuluzi icushwa kanjani - hambisa phezulu | gxila | imanuwali

Izindlela

$().i-popover(izinketho)

Iqalisa ama-popover eqoqo le-elementi.

.popover('show')

Iveza i-popover yama-elementi.

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

.popover('fihla')

Ifihla i-popover yama-elementi.

$ ( '#element' ). i- popover ( 'fihla' )

Idemo

hambisa phezulu ukuze uthole i-popover

I-plugin yesixwayiso iyikilasi elincane kakhulu lokwengeza ukusebenza okuseduze kuzaziso.

Landa

Ukusebenzisa i-bootstrap-alerts.js

$ ( ".isaziso-umlayezo" ). qaphela ()

Imakhaphu

Vele wengeze data-alertisibaluli emilayezweni yakho yesexwayiso ukuze uyinikeze ngokuzenzakalelayo ukusebenza okuseduze.

Izindlela

$().isaziso()

Igoqa zonke izexwayiso ngokusebenza okuseduze. Ukuze izexwayiso zakho zigqwayize uma zivaliwe, qiniseka ukuthi sezisetshenzisiwe .fadefuthi .innekilasi kuzo.

.sexwayiso('vala')

Ivala isexwayiso.

$ ( ".isaziso-umlayezo" ). isixwayiso ( 'vala' )

Idemo