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, umtya	bubuxoki	Ibandakanya i-modal-backdrop element. Cwangcisa indawo yangasemva "static"ukuba awufuni imodal ivalwe xa indawo yangasemva icofa.
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 = "static" > 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 ({
  keyboard : 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-bootstrap-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-bootstrap-scrollspy.js

$ ( '#topbar' ). scrollSpy ()

IMarkup

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

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

Iindlela

$().skrolaSpy()

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

.scrollSpy('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 inikezela ngomsebenzi owongezelelweyo wokulawula ubume beqhosha.

Khuphela

Ukusebenzisa i-bootstrap-buttons.js

$ ( '.iithebhu' ). iqhosha ()

Iindlela

$().iqhosha('tshintsha')

Itshintsha imeko yokutyhala. Inika btn inkangeleko yokuba yenziwe yasebenza.

Isaziso Unokwenza uguqulelo oluzenzekelayo lweqhosha ngokusebenzisa data-toggleuphawu.

< iklasi yeqhosha = "btn" data-toggle = "toggle" > ... </iqhosha>   

$().iqhosha('iyalayisha')

Icwangcisa imeko yeqhosha kulayisho - licima iqhosha kwaye utshintshise okubhaliweyo kukulayisha okubhaliweyo. Ukulayisha okubhaliweyo kufuneka kuchazwe kwiqhosha kusetyenziswa uphawu loyelelwano lwedatha data-loading-text.

< iklasi yeqhosha = "btn" data-loading-text = "ilayisha izinto..." > ... </iqhosha>   

$().iqhosha('seta ngokutsha')

Seta kwakhona imeko yeqhosha-tshintshanisa umbhalo ukuya kumbhalo wokuqala.

$().iqhosha(umtya)

Seta kwakhona ubume beqhosha-tshintshanisa okubhaliweyo kuyo nayiphi na idatha echazwe kwimeko yokubhaliweyo.

< iklasi yeqhosha = "btn" data-complete-text = "kugqityiwe!" > ... </ iqhosha>   
<script>
  $('.btn').iqhosha('gqiba')
</ iskripthi>

Idemo

Ilayisha iDemo Guqula iDemo

Le plugin yongeza ngokukhawuleza, ithebhu eguquguqukayo kunye nokusebenza kweepilisi.

Khuphela

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

Iziganeko

Isiganeko	Inkcazo
utshintsho	Esi siganeko sivula utshintsho lwethebhu. Sebenzisa event.targetkunye event.relatedTargetnokujolisa ithebhu esebenzayo kunye nethebhu esebenzayo yangaphambili ngokulandelelanayo.

$ ( '#.iithebhu' ). bopha ( 'tshintsha' , umsebenzi ( e ) {   
  e . ekujoliswe kuko // ithebhu evuliwe
  e . relatedTarget // ithebhu yangaphambili
})

Idemo

• Ekhaya
• Inkangeleko yesimo
• Imiyalezo
• Iisetingi
• Lahla phantsi
  • @fat
  • @mdo

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
ithempleyithi	umtya	[uphawu oluhlala lukhona]	Itemplate yehtml esetyenziselwa unikezelo twipsy.

Isaziso Iinketho zomzekelo we-twipsy zingachazwa ngokusetyenziswa kweempawu zedatha.

<a href = "#" data-place = "ezantsi" rel = 'twipsy' title = 'Esinye isihloko' > umbhalo </a>    

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 -bootstrap-twipsy.js , ke qiniseka ukuba uyayibamba loo fayile xa ubandakanya iipopovers kwiprojekthi yakho!

Isaziso Kufuneka uquke ifayile ye-bootstrap-twipsy.js phambi kwe -bootstrap-popover.js.

Khuphela

Ukusebenzisa i-bootstrap-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'	umtya okanye indlela yokufumana umxholo wokubhaliweyo. ukuba akukho nanye enikeziweyo, umxholo uya kufunyanwa kuphawu lomxholo wedatha.
ukuxhokonxa	umtya	'hamba phezulu'	ivuswa njani ithiphu yesixhobo - hambisa | gxila | incwadi yesandla
ithempleyithi	umtya	[uphawu oluhlala lukhona]	Itemplate yehtml esetyenziselwa unikezelo lwe popover.

Isaziso Iinketho zomzekelo ngamnye we popover zingachazwa ngokusetyenziswa kweempawu zedatha.

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

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.

Iinketho

Igama	uhlobo	ukungagqibeki	inkcazelo
umkhethi	umtya	'.vala'	Ngowuphi umkhethi omawujolise ekuvaleni isilumkiso.

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