Iplagi yethu ye-Modal yinto encinci kakhulu yokuthatha i-plugin ye-modal ye-js, ukuthatha ngononophelo olulodwa ukubandakanya kuphela ukusebenza okungenanto esikufunayo apha ku-twitter.

Khuphela

Ukusebenzisa i-bootstrap-modal

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

Iinketho

Igama	uhlobo	ukungagqibeki	inkcazelo
ngasemva	boolean	bubuxoki	Ibandakanya i-modal-backdrop element
ikhibhodi	boolean	bubuxoki	Ivala imodal xa iqhosha lokubaleka licofa
bonisa	boolean	bubuxoki	Ivula imodal ekuqalisweni kweklasi

IMarkup

Unokwenza iimodyuli kwiphepha lakho ngokulula ngaphandle kokubhala umgca omnye wejavascript. Nika nje isiqalelo data-controls-modaluphawu oluhambelana ne-id yesiqalelo se-modal, kwaye xa ucofa, iyakwazisa imodal yakho. Ukongeza iinketho zemodal, zibandakanye nje njengeempawu zedatha ngokunjalo.

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

Qaphela Ukuba ufuna imodal yakho iphile ngaphakathi nangaphandle, yongeza nje .fadeiklasi kwinto yakho .modal(jonga kwidemo ukubona oku kusebenza).

Iindlela

.modal(iinketho)

Yenza umxholo wakho ube yimodali. Yamkela iinketho ozikhethelayo object.

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

.modal('tshintsha')

Yenza imodal ngesandla.

$ ( '#my-modal' ). imodali ( 'tshintsha' )

.modal('umboniso')

Ivula imodali ngesandla.

$ ( '#my-modal' ). imodali ( 'bonisa' )

.modal('fihla')

Ufihla imodali ngesandla.

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

.modal(yinyani)

Ibuyisela umzekelo weklasi ye-elementi.

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

Qaphela Ngenye indlela, oku kunokubuyiselwa nge $().data('modal').

Iziganeko

Iklasi ye-modal ye-Bootstrap iveza iminyhadala embalwa yokuqhagamshelwa ekusebenzeni kwe-modal.

Isiganeko	Inkcazo
bonisa	Esi siganeko sivutha ngokukhawuleza xa showkubizwa indlela yomzekelo.
ibonisiwe	Esi siganeko sigxothwa xa i-modal yenziwe yabonakala kumsebenzisi (iya kulinda iinguqu ze-css ukuba zigqibe).
fihla	Esi siganeko sigxothwa ngokukhawuleza xa hideindlela yomzekelo ibiziwe.
efihliweyo	Esi siganeko siyagxothwa xa i-modal igqibile ukufihlwa kumsebenzisi (iya kulinda i-css transitions ukuba igqibe).

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

Idemo

Qalisa i-Modal

Le plugin yeyokongeza unxibelelwano oluhlayo kwibar engaphezulu ye-bootstrap okanye ukukhangela okusekwe kwi-tabbed.

Khuphela

Ukusebenzisa i-boostrap-dropdown.js

$ ( '#topbar' ). ukwehla ()

IMarkup

Ukongeza ngokukhawuleza umsebenzi wokwehla kuyo nayiphi na into ye-nav, sebenzisa data-dropdownuphawu loyelelwano. Nayiphi na into eyehlayo ye-bootstrap esebenzayo iya kwenziwa isebenze ngokuzenzekelayo.

<ul iklasi = "iithebhu" > 
  <li iklasi = "esebenzayo" > <a href = "#"> Ekhaya </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle"> Ukwehla </a> _  
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > Ikhonkco lesibini </a></li> 
      <li><a href = "#" > Enye into apha </a></li> 
      <li iklasi = "isahluli" > </ li> 
      <li><a href = "#"> Enye ikhonkco </a></li> 
    </ul>
  </ li>
</ul>

Qaphela Ukuba i-ui yakho inokwehla okuliqela, cinga ngokudibanisa data-dropdownuphawu lwento ebaluleke ngakumbi yesikhongozeli njenge .tabsokanye .topbar.

Iindlela

$().ukwehla()

I-api ecwangcisiweyo yokuvula iimenyu zebar ephezulu enikiweyo okanye ukhangelo lwetab.

Idemo

Le plugin yokongeza i-scrollspy (uhlaziyo oluzenzekelayo lwe-nav) udibaniso kwibar engaphezulu ye-bootstrap.

Khuphela

Ukusebenzisa i-boostrap-scrollspy.js

$ ( '#topbar' ). ukwehla ()

IMarkup

Ukongeza ngokulula isimilo sokuskrola kwi-nav yakho, yongeza nje data-scrollspyuphawu kwi .topbar.

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

Iindlela

$().scrollspy()

Ngokuzenzekela amaqhosha okukhangela ngabasebenzisi skrola indawo.

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

Isaziso iithegi ze-ankile ye-Topbar kufuneka ibe nethagethi ye-id enokusombululeka. Umzekelo, <a href="#home">home</a>kufuneka ihambelane nento ekwidom efana <div id="home"></div>.

.skrola('hlaziya')

I-scrollspy cache amaqhosha e-nav kunye nolungelelwaniso lwecandelo lomsebenzi. Ukuba ufuna ukuhlaziya le cache (mhlawumbi ukuba unomxholo oguqukayo) vele ubize le ndlela yokuhlaziya. Ukuba usebenzise uphawu lwedatha ukuchaza i-scrollspy yakho, vele ufowunele ukuhlaziya emzimbeni.

$ ( 'umzimba' ). scrollspy ( 'hlaziya' )

Idemo

Jonga ukukhangela kwebar ephezulu kweli phepha.

Le plugin yongeza ithebhu ekhawulezayo, eguquguqukayo kunye nokusebenza kweepilisi.

Khuphela

Ukusebenzisa i-boostrap-tabs.js

$ ( '.iithebhu' ). iithebhu ()

IMarkup

Unokwenza ithebhu okanye ujongo lwepilisi ngaphandle kokubhala nayiphi na i-javascript ngokubanika ngokulula data-tabsokanye data-pillsuphawu.

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

Iindlela

$().iithebhu okanye $().iipilisi

Yenza ithebhu kunye nokusebenza kwepilisi kusebenze kwisikhongozeli esinikiweyo. Iilinki ze Tab kufuneka zibhekiselele kwizazisi kuxwebhu.

<ul iklasi = "iithebhu" > 
  <li iklasi = "esebenzayo" > <a href = "#ikhaya"> Ekhaya </a></li>  
  <li><a href = "#profile"> Inkangeleko yesimo </a></li> 
  <li><a href = "#imiyalezo"> Imiyalezo </a> </li> 
  <li><a href = "#iisetingi"> Useto </a> </li> 
</ul>
 
<div class = "ipilisi-umxholo" > 
  <div class = "active" id = "ikhaya" > ... </div>  
  <div id = "iprofayile" > ... </div> 
  <div id = "imiyalezo" > ... </div> 
  <div id = "iisetingi" > ... </div> 
</ul>
 
<script>
  $ ( umsebenzi () {  
    $ ( '.iithebhu' ). iithebhu ()
  })
</script>

Idemo

• Ekhaya
• Inkangeleko yesimo
• Imiyalezo
• Iisetingi

Ngokusekwe kweyona plugin igqwesileyo ye-jQuery.tipsy ebhalwe nguJason Frame; i-twipsy yinguqulelo ehlaziyiweyo, engathembeli kwimifanekiso, isebenzisa i-css3 yoopopayi, kunye nedatha yeempawu zogcino lwesihloko!

Khuphela

Ukusebenzisa i-bootstrap-twipsy.js

$ ( '#example' ). twipsy ( iinketho )

Iinketho

Igama	uhlobo	ukungagqibeki	inkcazelo
phila	boolean	yinyani	sebenzisa i-css fade inguqu kwisixhobo sesixhobo
ulibaziseko	inani	0	ulibaziseko phambi kokubonisa ingcebiso yesixhobo (ms)
Libazisa	inani	0	ulibaziseko phambi kokufihla ingcebiso yesixhobo (ms)
ubuyela kundalashe	umtya	''	okubhaliweyo okufuneka kusetyenziswe xa kungekho sihloko sikhoyo
ukubekwa	umtya	'ngasentla'	indlela yokubeka inqaku lesixhobo - ngaphezulu | ngezantsi | ekhohlo | kunene
html	boolean	bubuxoki	ivumela umxholo we-html ngaphakathi kwesixhobo
phila	boolean	bubuxoki	sebenzisa ugunyaziso lomsitho endaweni yabaphathi bomsitho ngamnye
i-offset	inani	0	pixel offset yesixhobo ukusuka kwinto ekujoliswe kuyo
isihloko	umtya | umsebenzi	'isihloko'	uphawu okanye indlela yokufumana umbhalo wesihloko
ukuxhokonxa	umtya	'hamba phezulu'	ivuswa njani ithiphu yesixhobo - hambisa | gxila | incwadi yesandla

Iindlela

$().twipsy(iinketho)

Iqhoboshela i-twipsy handler kwingqokelela yezinto.

.twipsy('bonisa')

Utyhila i-elementi twipsy.

$ ( '#isiqalelo' ). twipsy ( 'bonisa' )

.twipsy('fihla')

Ifihla ielementi twipsy.

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

.twipsy(yinyaniso)

Ibuyisela umzekelo weklasi yeelementi.

$ ( '#isiqalelo' ). twipsy ( yinyani )

Qaphela Ngenye indlela, oku kunokubuyiselwa nge $().data('twipsy').

Idemo

Iplagi yepopover ibonelela ngendlela elula yokongeza iipopovers kwisicelo sakho. Yandisa iplagi ye -boostrap-twipsy.js , ke qiniseka ukuba uyayibamba loo fayile xa ubandakanya iipopovers kwiprojekthi yakho!

Khuphela

Ukusebenzisa i-boostrap-popover.js

$ ( '#example' ). popover ( iinketho )

Iinketho

Igama	uhlobo	ukungagqibeki	inkcazelo
phila	boolean	yinyani	sebenzisa i-css fade inguqu kwisixhobo sesixhobo
ulibaziseko	inani	0	ulibaziseko phambi kokubonisa ingcebiso yesixhobo (ms)
Libazisa	inani	0	ulibaziseko phambi kokufihla ingcebiso yesixhobo (ms)
ubuyela kundalashe	umtya	''	okubhaliweyo okufuneka kusetyenziswe xa kungekho sihloko sikhoyo
ukubekwa	umtya	'kunene'	indlela yokubeka inqaku lesixhobo - ngaphezulu | ngezantsi | ekhohlo | kunene
html	boolean	bubuxoki	ivumela umxholo we-html ngaphakathi kwesixhobo
phila	boolean	bubuxoki	sebenzisa ugunyaziso lomsitho endaweni yabaphathi bomsitho ngamnye
i-offset	inani	0	pixel offset yesixhobo ukusuka kwinto ekujoliswe kuyo
isihloko	umtya | umsebenzi	'isihloko'	uphawu okanye indlela yokufumana umbhalo wesihloko
umxholo	umtya | umsebenzi	'umxholo wedatha'	uphawu okanye indlela yokufumana umxholo wokubhaliweyo
ukuxhokonxa	umtya	'hamba phezulu'	ivuswa njani ithiphu yesixhobo - hambisa | gxila | incwadi yesandla

Iindlela

$().popover(iinketho)

Uqalisa iipopovers zengqokelela yezinto.

.popover('bonisa')

Ityhila i-elementi popover.

$ ( '#isiqalelo' ). popover ( 'bonisa' )

.popover('fihla')

Ifihla i-elements popover.

$ ( '#isiqalelo' ). popover ( 'fihla' )

Idemo

jonga phezulu kwi-popover

Iplagi yesilumkiso yiklasi encinci kakhulu yokongeza ukusebenza ngokusondeleyo kwizilumkiso.

Khuphela

Ukusebenzisa i-bootstrap-alerts.js

$ ( ".alert-message" ). lumkisa ()

IMarkup

Yongeza nje data-alertuphawu kwimiyalezo yakho yesilumkiso ukubanika ngokuzenzekelayo ukusebenza okusondeleyo.

Iindlela

$().isilumkiso()

Isonga zonke izilumkiso ngokusebenza ngokusondeleyo. Ukuze izilumkiso zakho ziphile xa zivaliwe, qiniseka ukuba zine .fadekwaye .inudidi sele lufakiwe kuzo.

.alert('vala')

Ivala isilumkiso.

$ ( ".alert-message" ). lumkisa ( 'vala' )

Idemo