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	i-boolean, intambo	amanga	Kufaka phakathi i-elementi ye-modal-backdrop. Misa okwasemuva ukuze "static"kuthi uma ungafuni ukuthi i-modal ivalwe lapho okwasemuva kuchofozwa.
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 = "static" > Imodi 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 ({
  keyboard : iqiniso 
})

.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

Isebenzisa i-bootstrap-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

Isebenzisa i-bootstrap-scrollspy.js

$ ( '#topbar' ). scrollSpy ()

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('vuselela')

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 ( 'vuselela' )

Idemo

Bheka ukuzulazula kwebha ephezulu kuleli khasi.

Le plugin inikeza ukusebenza okwengeziwe kokuphatha isimo sezinkinobho.

Landa

Ukusebenzisa i-bootstrap-buttons.js

$ ( '.amathebhu' ). inkinobho ()

Izindlela

$().inkinobho('guqula')

Iguqula isimo sohlelo. Inikeza btn ukubukeka kokuthi yenziwe yasebenza.

Isaziso Ungavumela ukuguqula okuzenzakalelayo kwenkinobho ngokusebenzisa data-toggleisibaluli.

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

$().inkinobho('iyalayisha')

Imisa isimo senkinobho ekulayisheni - inkinobho ikhubaza futhi ishintshanisa umbhalo ukuze ulayishe umbhalo. Ukulayisha umbhalo kufanele kuchazwe engxenyeni yenkinobho kusetshenziswa isibaluli sedatha data-loading-text.

<button class = "btn" data-loading-text = "ilayisha izinto..." > ... </button>   

$().inkinobho('setha kabusha')

Isetha kabusha isimo senkinobho - ishintsha umbhalo ube umbhalo wokuqala.

$().inkinobho(uchungechunge)

Isetha kabusha isimo senkinobho - ishintsha umbhalo uye kunoma yisiphi isimo sombhalo esichazwe idatha.

<button class = "btn" data-complete-text = "kuqediwe!" > ... </inkinobho>   
<script>
  $('.btn').inkinobho('qedile')
</script>

Idemo

Ilayisha idemo Guqula iDemo

Le plugin yengeza ithebhu esheshayo, eguqukayo kanye nokusebenza kwamaphilisi.

Landa

Ukusebenzisa i-bootstrap-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> 
</div>
 
<script>
  $ ( umsebenzi () {  
    $ ( '.amathebhu' ). amathebhu ()
  })
</script>

Imicimbi

Umcimbi	Incazelo
ushintsho	Lo mcimbi uvutha ekushintsheni kwethebhu. Sebenzisa event.targetfuthi event.relatedTargetuqondise ithebhu esebenzayo kanye nethebhu esebenzayo yangaphambilini ngokulandelanayo.

$ ( '#.amathebhu' ). bopha ( 'shintsha' , umsebenzi ( e ) {   
  e . target // ithebhu evuliwe
  e . relatedTarget // ithebhu yangaphambilini
})

Idemo

• Ikhaya
• Iphrofayela
• Imilayezo
• Izilungiselelo
• Okwehlayo
  • @amafutha
  • @mdo

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
isifanekiso	umucu	[imakhaphu ezenzakalelayo]	Isifanekiso se-html esisetshenziselwa ukwenza i-twipsy.

Isaziso Izinketho zezibonelo ze-twipsy zomuntu ngamunye zingacaciswa ngokusetshenziswa kwezibaluli zedatha.

<a href = "#" data-placement = "ngezansi" rel = 'twipsy' title = 'Umbhalo othile wesihloko' > umbhalo </a>    

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 -bootstrap-twipsy.js , ngakho qiniseka ukuthi uyalibamba lelo fayela futhi uma ufaka ama-popover kuphrojekthi yakho !

Isaziso Kufanele ufake ifayela le-bootstrap-twipsy.js ngaphambi kwe -bootstrap-popover.js.

Landa

Isebenzisa i-bootstrap-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'	iyunithi yezinhlamvu noma indlela yokubuyisa umbhalo wokuqukethwe. uma kungekho okunikezwayo, okuqukethwe kuzotholwa kusibaluli sokuqukethwe kwedatha.
inhlamvu	umucu	'hambahamba'	ukuthi ithiphu yamathuluzi icushwa kanjani - hambisa phezulu | gxila | imanuwali
isifanekiso	umucu	[imakhaphu ezenzakalelayo]	Isifanekiso se-html esisetshenziselwa ukwenza i-popover.

Isaziso Izinketho zezibonelo ze-popover ngazinye zingacaciswa ngokusebenzisa izibaluli zedatha.

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

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.

Izinketho

Igama	uhlobo	okuzenzakalelayo	incazelo
isikhethi	umucu	'.vala'	Isiphi isikhethi okufanele usiqondise ukuze uvale isexwayiso.

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