IJavascript yeBootstrap

Zisa izinto ze-Bootstrap ebomini-ngoku kunye neeplagi ze- jQuery zesiko ezili-12 .

Iimodeli

I-plugin elungelelanisiweyo, kodwa eguquguqukayo, ithatha i-plugin ye-javascript ye-modal yendabuko enobuncinane obufunekayo obufunekayo kunye nokusilela okuhlakaniphile.

Ukwehla

Yongeza iimenyu ezihlayo phantse kuyo yonke into eBootstrap ngale plugin ilula. I-Bootstrap inenkxaso epheleleyo yemenyu eyehlayo kwi-navbar, iithebhu, kunye neepilisi.

Scrollspy

Sebenzisa i-scrollspy ukuhlaziya ngokuzenzekelayo amakhonkco kwi-navbar yakho ukubonisa ikhonkco elisebenzayo langoku elisekwe kwindawo yokuskrola.

Iithebhu eziguqukayo

Sebenzisa le plugin ukwenza iithebhu kunye neepilisi zibe luncedo ngakumbi ngokuzivumela ukuba ziguqule kwiipaneli ze-tabhable zomxholo wendawo.

Iingcebiso

Ukuthatha okutsha kwiplagi ye-jQuery Tipsy, Iingcebiso zezixhobo azithembeli kwimifanekiso-zisebenzisa i-CSS3 yoopopayi kunye neempawu zedatha zogcino lwesihloko sendawo.

Iipopovers *

Yongeza imixholo emincinci, njengaleyo ikwi-iPad, kuyo nayiphi na into yolwazi lwesibini lwezindlu.

* Ifuna iingcebiso zesixhobo ukuba zibandakanywe

Imiyalezo yesilumkiso

Iplagi yesilumkiso yiklasi encinci yokongeza ukusebenza ngokusondeleyo kwizilumkiso.

Amaqhosha

Yenza ngakumbi ngamaqhosha. Iqhosha lokulawula lixela okanye wenze amaqela amaqhosha amalungu amaninzi njengebar yesixhobo.

Ukuwa

Fumana izitayile ezisisiseko kunye nenkxaso ebhetyebhetye kumacandelo aqengqelekayo anje ngeaccordion kunye nokuhamba.

I-Carousel

Yenza umjikelo wolonwabo lwawo nawuphi na umxholo onqwenela ukubonelela ngomboniso wesilayidi esisebenzisanayo somxholo.

I-Typehead

I-plugin esisiseko, eyandisiweyo ngokulula yokwenza ngokukhawuleza iintloko zokuchwetheza ezintle ngalo naluphi na uhlobo lokufakwa kombhalo.

Utshintsho *

Ngeziphumo ezilula zotshintsho, quka i-bootstrap-transition.js kube kanye ukutyibilika kwiimodyuli okanye ukucima izilumkiso.

* Iyimfuneko kuopopayi kwiiplagi

Iintloko phezulu! Zonke iiplagi zejavascript zifuna inguqulelo yamva nje yejQuery.

Malunga neemodeli

I-plugin elungelelanisiweyo, kodwa eguquguqukayo, ithatha i-plugin ye-javascript ye-modal yendabuko enobuncinane obufunekayo obufunekayo kunye nokusilela okuhlakaniphile.

Khuphela ifayile

Umzekelo omileyo

Apha ngezantsi kukho imodali enikezelwe ngokwezibalo.

Idemo ephilayo

Guqula imodal ngejavascript ngokucofa iqhosha elingezantsi. Iza kutyibilika phantsi kwaye iphele ukusuka phezulu ephepheni.

Qalisa imodal yedemo

Ukusebenzisa i-bootstrap-modal

Fowunela imodal usebenzisa ijavascript:

  1. $ ( '#myModal' ). imodeli ( iinketho )

Iinketho

Igama uhlobo ukungagqibeki inkcazelo
ngasemva boolean yinyani Ibandakanya i-modal-backdrop element. Kungenjalo, khankanya staticimeko yangasemva engayivaliyo imodal ngokucofa.
ikhibhodi boolean yinyani Ivala imodal xa iqhosha lokubaleka licofa
bonisa boolean yinyani Ibonisa imodali xa iqaliswa.

IMarkup

Unokwenza iimodyuli kwiphepha lakho ngokulula ngaphandle kokubhala umgca omnye wejavascript. Ukuseta data-toggle="modal"nje into yokulawula ene data-target="#foo"okanye href="#foo"ehambelana ne-id yesiqalelo se-modal, kwaye xa ucofa, iyakusungula imodal yakho.

Kwakhona, ukongeza iinketho kumzekelo wakho wemodal, zibandakanye nje njengeempawu ezongezelelweyo zedatha nokuba yinto yolawulo okanye imodal markup ngokwayo.

  1. <a iklasi = "btn" data-toggle = "modal" href = "#myModal" > Yazisa iNdlela </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. < uhlobo lweqhosha = "iqhosha" iklasi = "vala" idatha-dismiss = "modal" > × </ iqhosha>
  4. <h3> imodal header </h3>
  5. </ div>
  6. <div class = "modal-body" >
  7. <p> Umzimba omnye olungileyo… </p>
  8. </ div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal"> Vala </a> _
  11. <a href = "#" class = "btn btn-primary"> Gcina utshintsho </a>
  12. </ div>
  13. </ div>
Iintloko phezulu! Ukuba ufuna imodal yakho iphile ngaphakathi nangaphandle, yongeza nje .fadeiklasi .modalkwinto (jonga kwidemo ukuze ubone oku kusebenza) kwaye uquke i-bootstrap-transition.js.

Iindlela

.modal(iinketho)

Yenza umxholo wakho ube yimodali. Yamkela iinketho ozikhethelayo object.

  1. $ ( '#myModal' ). imodeli ({
  2. keyboard : bubuxoki
  3. })

.modal('tshintsha')

Yenza imodal ngesandla.

  1. $ ( '#myModal' ). imodali ( 'tshintsha' )

.modal('umboniso')

Ivula imodali ngesandla.

  1. $ ( '#myModal' ). imodali ( 'bonisa' )

.modal('fihla')

Ufihla imodali ngesandla.

  1. $ ( '#myModal' ). imodali ( 'fihla' )

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).
  1. $ ( '#myModal' ). kwi ( 'ifihliwe' , umsebenzi () {
  2. // Yenza into…
  3. })

I-plugin yeScrollSpy yeyokuhlaziya ngokuzenzekelayo iithagethi ze-nav ngokusekelwe kwindawo yokuskrola.

Khuphela ifayile

Umzekelo we-navbar ene-scrollspy

Skrolela indawo engezantsi kwaye ubukele uhlaziyo lokukhangela. Imiba esezantsi yokwehla nayo iya kuphawulwa. Yizame!

@fat

Ad leggings keytar, brunch id art party dolor labore. I-Pitchfork ngonyaka enim lo-fi ngaphambi kokuba bathengise yonke into. Tumblr ifama-to-itheyibhile amalungelo ibhayisekile nantoni na. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Ijezi kaCosby ilomo yejean ezimfutshane, williamsburg hoodie minim qui mhlawumbi awuzange uve ngazo et cardigan trust fund culpa biodiesel wes anderson aesthetic. UNihil une tattoo accsamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa amadevu ngesityibiliki, adipisicing fugiat velit pitchfork iindevu. Freegan iindevu aliqua cupidatat mcsweeney's vero. Cupidatat ezine loko nisi, ea helvetica nulla carles. I-Tattooed cosby sweater ilori yokutya, i-mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. EBrooklyn adipisicing craft beer vice keytar deserunt.

Nye

Occaecat commodo aliqua deelectus. Fap craft beer deserunt skateboard ea. Amalungelo ebhayisekile eLomo adipisicing banh mi, velit ea sunt kwinqanaba elilandelayo locavore ikofu enemvelaphi eyodwa e magna veniam. Ubomi obuphezulu id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, ezinzileyo deelectus consectetur fanny pack iphone.

Mbini

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa isithunywa bag marfa nantoni na ilori yokutya deelectus. Sapiente synth id guessnda. Locavore sed helvetica cliche irony, thundercats mhlawumbi awuzange uve ngazo consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat phambi kokuba bathengise, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Ukusebenzisa i-bootstrap-scrollspy.js

Fowunela iscrollspy ngejavascript:

  1. $ ( '#navbar' ). skrola ()

IMarkup

Ukongeza ngokulula isimilo sokuskrola kulawulo lwakho lwebar ephezulu, yongeza data-spy="scroll"nje kwinto ofuna ukuyihlola (ubukhulu becala lo iyakuba ngumzimba).

  1. <body data-spy = "skrola" > ... </ body>
Iintloko phezulu! Unxulumano lwebar yeNavbar kufuneka lube nethagethi ye-id enokusombululeka. Umzekelo, <a href="#home">home</a>kufuneka ihambelane nento ekwidom efana <div id="home"></div>.

Iindlela

.skrola('hlaziya')

Xa usebenzisa i-scrollspy ngokudibanisa okanye ukususa izinto kwi-DOM, kuya kufuneka ufowunele indlela yokuhlaziya ngolu hlobo:

  1. $ ( '[data-spy="scroll"]' ). Nganye ( umsebenzi () {
  2. var $ hlola = $ ( le ). scrollspy ( 'hlaziya' )
  3. });

Iinketho

Igama uhlobo ukungagqibeki inkcazelo
i-offset inani 10 Iipikseli zokulinganisa ukusuka phezulu xa ubala indawo yokuskrola.

Iziganeko

Isiganeko Inkcazo
vula Esi siganeko sivutha nanini na into entsha ivuliwe yi-scrollspy.

Le plugin yongeza ithebhu ekhawulezayo, eguquguqukayo kunye nokusebenza kweepilisi zokutshintshwa ngomxholo wendawo.

Khuphela ifayile

Iithebhu zemizekelo

Cofa iithebhu ezingezantsi ukuguqula phakathi kweefestile ezifihliweyo, nokuba usebenzisa imenu eyehlayo.

Idenim ekrwada mhlawumbi awuzange uve ngabo ibhulukhwe yejean yaseAustin. Nesciunt tofu stumptown aliqua, retro synth master coca. Amadevu cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Ijezi yeCosby eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american iimpahla, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


Ukusebenzisa i-bootstrap-tab.js

Yenza iithebhu ezinokubakho usebenzisa i-javascript (ithebhu nganye kufuneka ivulwe ngokwayo):

  1. $ ( '#myTab a' ). cofa ( umsebenzi ( e ) {
  2. e . preventDefault ();
  3. $ ( oku ). ithebhu ( 'bonisa' );
  4. })

Unokwenza ithebhu nganye isebenze ngeendlela ezininzi:

  1. $ ( '#myTab a[href="#profile"]' ). ithebhu ( 'bonisa' ); // Khetha isithuba ngegama
  2. $ ( '#myTab a:first' ). ithebhu ( 'bonisa' ); // Khetha ithebhu yokuqala
  3. $ ( '#myTab a:last' ). ithebhu ( 'bonisa' ); // Khetha isithuba sokugqibela
  4. $ ( '#myTab li:eq(2) a' ). ithebhu ( 'bonisa' ); // Khetha ithebhu yesithathu (0-isalathisi)

IMarkup

Unokwenza ithebhu okanye ujongo lwepilisi ngaphandle kokubhala nayiphi na i-javascript ngokuchaza ngokulula data-toggle="tab"okanye data-toggle="pill"kwinto. Ukongeza i navkunye nav-tabsneeklasi kwithebhu ulkuya kusebenzisa isitayile sethebhu ye-bootstrap.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#ikhaya" data-toggle = "tab"> Ekhaya </a> < /li>
  3. <li><a href = "#profile" data-toggle = "tab"> Inkangeleko yesimo </a></li >
  4. <li><a href = "# imiyalezo" data-toggle = "tab"> Imiyalezo </a> < /li>
  5. <li><a href = "#settings" data-toggle = "tab"> Useto </a> </li>
  6. </ul>

Iindlela

$().tab

Yenza isiqalelo sethebhu kunye nesiqulatho sisebenze. Isithuba kufuneka sibenendawo data-targetokanye indawo hrefyesikhongozeli kwiDOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li iklasi = "esebenzayo" > <a href = "#ikhaya"> Ekhaya </a></li>
  3. <li><a href = "#profile"> Inkangeleko yesimo </a></li>
  4. <li><a href = "#imiyalezo"> Imiyalezo </a> </li>
  5. <li><a href = "#iisetingi"> Useto </a> </li>
  6. </ul>
  7.  
  8. <div class = "ithebhu-umxholo" >
  9. <div class = "i-tab-pane esebenzayo" id = "ikhaya" > ... </div>
  10. <div class = "i-tab-pane" id = "iprofayile" > ... </div>
  11. <div class = "i-tab-pane" id = "imiyalezo" > ... </div>
  12. <div class = "i-tab-pane" id = "iisetingi" > ... </div>
  13. </ div>
  14.  
  15. <script>
  16. $ ( umsebenzi () {
  17. $ ( '#myTab a:last' ). ithebhu ( 'bonisa' );
  18. })
  19. </script>

Iziganeko

Isiganeko Inkcazo
bonisa Esi siganeko sivutha kumboniso wethebhu, kodwa ngaphambi kokuba ithebhu entsha iboniswe. Sebenzisa event.targetkunye event.relatedTargetnokujolisa isithuba esisebenzayo kunye nesithuba sangaphambili esisebenzayo (ukuba sikhona) ngokulandelelanayo.
ibonisiwe Esi siganeko sitshisa kwi-tab show emva kokuba ithebhu ibonisiwe. Sebenzisa event.targetkunye event.relatedTargetnokujolisa isithuba esisebenzayo kunye nesithuba sangaphambili esisebenzayo (ukuba sikhona) ngokulandelelanayo.
  1. $ ( 'a[data-toggle="tab"]' ). kwi ( 'ibonisiwe' , umsebenzi ( e ) {
  2. e . ekujoliswe kuko // ithebhu evuliwe
  3. e . relatedTarget // ithebhu yangaphambili
  4. })

Malunga neengcebiso zezixhobo

Iphefumlelwe yi-plugin egqwesileyo ye-jQuery.tipsy ebhalwe nguJason Frame; Iingcebiso zesixhobo luguqulelo oluhlaziyiweyo, olungathembekanga kwimifanekiso, sebenzisa i-css3 yoopopayi, kunye neempawu zedatha zogcino lwesihloko sendawo.

Khuphela ifayile

Umzekelo wokusetyenziswa kweengcebiso

Hambisa ngaphezulu kwezi linki zingezantsi ukuze ubone iingcebiso zesixhobo:

Iibhulukhwe eziqinileyo kwinqanaba elilandelayo keffiyeh mhlawumbi awuzange uve ngazo. Photo booth iindevu ekrwada idenim letterpress vegan messenger bag stumptown. Ifama-to-itheyibhile seitan, i-mcsweeney's fixie ezinzileyo iquinoa ye-8-bit yaseMelika isambatho sine - terry richardson vinyl chambray. Iindevu stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. Igcisa elihlekisayo ngokwenene whatever keytar , i-scenar farm-to-table banksy Austin twitter handle freegan cred krwada idenim enye-origin ikofu viral.


Ukusebenzisa i-bootstrap-tooltip.js

Qalisa incam yesixhobo ngejavascript:

  1. $ ( '#example' ). incam yesixhobo ( iinketho )

Iinketho

Igama uhlobo ukungagqibeki inkcazelo
oopopayi boolean yinyani sebenzisa i-css fade inguqu kwisixhobo sesixhobo
ukubekwa umtya|umsebenzi 'phezulu' indlela yokubeka inqaku lesixhobo - phezulu | emazantsi | ekhohlo | kunene
umkhethi umtya bubuxoki Ukuba umkhethi unikiwe, izixhobo zesixhobo ziya kunikezelwa kwiithagethi ezichaziweyo.
isihloko umtya | umsebenzi '' ixabiso lesihloko esimiselweyo ukuba `isihloko` ithegi ayikho
ukuxhokonxa umtya 'hamba phezulu' ivuswa njani ithiphu yesixhobo - hambisa | gxila | incwadi yesandla
ukulibazisa inombolo | into 0

ukulibazisa ukubonisa kunye nokufihla incam yesixhobo (ms) - ayisebenzi kudidi lwesixhobo sokuxhobisa

Ukuba inani linikiwe, ukulibaziseka kufakwa kuzo zombini ezifihla/umboniso

Ulwakhiwo lwento yile:delay: { show: 500, hide: 100 }

Iintloko phezulu! Iinketho zeengcebiso zesixhobo ngasinye zinokuchazwa ngokusetyenziswa kweempawu zedatha.

IMarkup

Ngenxa yezizathu zokusebenza, iSixhobo kunye nePopover data-apis zingenile.

  1. <a href = "#" rel = "isihloko sesixhobo" = "ingcebiso yesixhobo sokuqala"> hambisa phezu kwam </a>

Iindlela

$().ingcebiso yesixhobo(iinketho)

Iqhoboshela isibambi sesixhobo kwingqokelela yesiqalelo.

.ingcebiso yesixhobo('bonisa')

Ityhila inqaku lesixhobo.

  1. $ ( '#isiqalelo' ). incam yesixhobo ( 'bonisa' )

.ingcebiso yesixhobo('fihla')

Ifihla incam yesixhobo.

  1. $ ( '#isiqalelo' ). incam yesixhobo ( 'fihla' )

.ingcebiso yesixhobo('tshintsha')

Itshintshela incam yesixhobo.

  1. $ ( '#isiqalelo' ). incam yesixhobo ( 'toggle' )

Malunga neepopovers

Yongeza imixholo emincinci, njengaleyo ikwi-iPad, kuyo nayiphi na into yolwazi lwesibini lwezindlu.

* Ifuna iNcwadana yesixhobo ukuba ibandakanywe

Khuphela ifayile

Umzekelo hover popover

Hambisa ngaphezulu kweqhosha ukuqalisa ipopover.


Ukusebenzisa i-bootstrap-popover.js

Vumela iipopovers ngejavascript:

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

Iinketho

Igama uhlobo ukungagqibeki inkcazelo
oopopayi boolean yinyani sebenzisa i-css fade inguqu kwisixhobo sesixhobo
ukubekwa umtya|umsebenzi 'kunene' indlela yokubeka popover - phezulu | emazantsi | ekhohlo | kunene
umkhethi umtya bubuxoki ukuba umkhethi unikiwe, izixhobo zesixhobo ziya kunikezelwa kwiithagethi ezichaziweyo
ukuxhokonxa umtya 'hamba phezulu' ivuswa njani ithiphu yesixhobo - hambisa | gxila | incwadi yesandla
isihloko umtya | umsebenzi '' ixabiso lesihloko esimiselweyo ukuba `isihloko` asikho uphawu loyelelwano
umxholo umtya | umsebenzi '' ixabiso lesiqulatho esingagqibekanga ukuba `umxholo wedatha` uphawu asikho
ukulibazisa inombolo | into 0

ukulibazisa ukubonisa kunye nokufihla i-popover (ms) - ayisebenzi kuhlobo lwe-trigger ye-manual

Ukuba inani linikiwe, ukulibaziseka kufakwa kuzo zombini ezifihla/umboniso

Ulwakhiwo lwento yile:delay: { show: 500, hide: 100 }

Iintloko phezulu! Ukhetho lwepopovers ngamanye lunokuchazwa ngokusetyenziswa kweempawu zedatha.

IMarkup

Ngenxa yezizathu zokusebenza, iSixhobo kunye nePopover data-apis zingenile.

Iindlela

$().popover(iinketho)

Uqalisa iipopovers zengqokelela yezinto.

.popover('bonisa')

Ityhila i-elementi popover.

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

.popover('fihla')

Ifihla i-elements popover.

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

.popover('tshintsha')

Itshintshela izinto popover.

  1. $ ( '#isiqalelo' ). ipopover ( 'tshintsha' )

Malunga nezilumkiso

Iplagi yesilumkiso yiklasi encinci yokongeza ukusebenza ngokusondeleyo kwizilumkiso.

Khuphela

Imizekelo yezilumkiso

I-plugin yezilumkiso isebenza kwimiyalezo yesilumkiso rhoqo, kunye nemiyalezo yokubhloka.

I-guacamole engcwele! Okona kulungileyo uzitshekishe, awubukeki ulunge kakhulu.

Owu khawuleza! Unempazamo!

Guqula le naleya kwaye uzame kwakhona. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Thatha eli nyathelo Okanye yenza oku


Ukusebenzisa i-bootstrap-alert.js

Vumela ukugxothwa kwesivuseleli ngejavascript:

  1. $ ( ".alert" ). lumkisa ()

IMarkup

Yongeza data-dismiss="alert"nje kwiqhosha lakho lokuvala ukunika ngokuzenzekelayo umsebenzi okufutshane wesilumkiso.

  1. <a class = "close" data-dismiss = "alert" href = "#" > &amaxesha; </a>

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.

  1. $ ( ".alert" ). lumkisa ( 'vala' )

Iziganeko

Iklasi yesilumkiso ye-Bootstrap iveza iminyhadala embalwa yokuqhagamshelwa ekusebenzeni kwesilumkiso.

Isiganeko Inkcazo
kufutshane Esi siganeko sivutha ngokukhawuleza xa closekubizwa indlela yomzekelo.
ivaliwe Esi siganeko siyagxothwa xa isivuseleli sivaliwe (siya kulinda uguqulo lwe-css lugqibe).
  1. $ ( '#isilumkiso sam' ). bopha ( 'ivaliwe' , umsebenzi () {
  2. // Yenza into…
  3. })

Malunga

Yenza ngakumbi ngamaqhosha. Iqhosha lokulawula lixela okanye wenze amaqela amaqhosha amalungu amaninzi njengebar yesixhobo.

Khuphela ifayile

Umzekelo wokusetyenziswa

Sebenzisa iplagin yamaqhosha eemeko kunye noguqulo.

Inyanisile
Uguqulelo olunye
Ibhokisi yokujonga
Unomathotholo

Ukusebenzisa i-bootstrap-button.js

Vula amaqhosha ngejavascript:

  1. $ ( '.nav-tabs' ). iqhosha ()

IMarkup

Iimpawu zedatha zibalulekile kwiplagi yeqhosha. Jonga umzekelo wekhowudi engezantsi kwiindidi ezahlukeneyo zokuphawula.

  1. <!-- Yongeza i-data-toggle="iqhosha" ukwenza ukucofa kwiqhosha elinye -->
  2. < iklasi yeqhosha = "btn" data-toggle = "iqhosha" > Uguqulo olunye </ iqhosha>
  3.  
  4. <!-- Yongeza idata-toggle="amaqhosha-checkbox" ukwenzela isimbo sokukhangela kwi-btn-iqela -->
  5. <div class = "btn-group" data-toggle = "amaqhosha-checkbox" >
  6. < iklasi yeqhosha = "btn" > Ekhohlo </ iqhosha>
  7. < iklasi yeqhosha = "btn" > Embindini </ iqhosha>
  8. < iklasi yeqhosha = "btn" > Ekunene </ iqhosha>
  9. </ div>
  10.  
  11. <!-- Yongeza idata-toggle="buttons-radio" kwisimbo sikanomathotholo ukuguqulela kwi-btn-iqela -->
  12. <div class = "btn-group" data-toggle = "amaqhosha-radio" >
  13. < iklasi yeqhosha = "btn" > Ekhohlo </ iqhosha>
  14. < iklasi yeqhosha = "btn" > Embindini </ iqhosha>
  15. < iklasi yeqhosha = "btn" > Ekunene </ iqhosha>
  16. </ div>

Iindlela

$().iqhosha('tshintsha')

Itshintsha imeko yokutyhala. Inika iqhosha inkangeleko yokuba livuliwe.

Iintloko phezulu! Unokwenza uguqulelo oluzenzekelayo lweqhosha ngokusebenzisa data-toggleuphawu.
  1. < iklasi yeqhosha = "btn" data-toggle = "iqhosha" > </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.

  1. < iklasi yeqhosha = "btn" data-loading-text = "ilayisha izinto..." > ... </iqhosha>
Iintloko phezulu! IFirefox iyaqhubeleka nemeko yokukhubazeka kuyo yonke imithwalo yamaphepha . Isisombululo sale nto kukusetyenziswa autocomplete="off".

$().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.

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

Malunga

Fumana izitayile ezisisiseko kunye nenkxaso ebhetyebhetye kumacandelo aqengqelekayo anje ngeaccordion kunye nokuhamba.

Khuphela ifayile

* Ifuna iplagin yeTransitions ukuba ibandakanywe.

Umzekelo iaccordion

Sisebenzisa iplagin yokuwa, sakhe iwijethi yesitayile esilula se-accordion:

Anim pariatur cliche reprehenderit, enim eiusmod ubomi obuphezulu accamus terry richardson ad squid. 3 ingcuka inyanga officia aute, non cupidatat skateboard dolor brunch. Ilori yokutya iquinoa nesciunt laborum eiusmod. Brunch 3 ingcuka inyanga tempor, sunt aliqua ubeke intaka kuyo iskwidi enye-imvelaphi ikofu nulla imaginenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. I-Leggings occaecat yenza ibhiya yasefama-kuya-kwitafile, idenim ekrwada i-aesthetic synth nesciunt mhlawumbi awuzange uve ngabo accusamus labour ezinzileyo yeVHS.
Anim pariatur cliche reprehenderit, enim eiusmod ubomi obuphezulu accamus terry richardson ad squid. 3 ingcuka inyanga officia aute, non cupidatat skateboard dolor brunch. Ilori yokutya iquinoa nesciunt laborum eiusmod. Brunch 3 ingcuka inyanga tempor, sunt aliqua ubeke intaka kuyo iskwidi enye-imvelaphi ikofu nulla imaginenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. I-Leggings occaecat yenza ibhiya yasefama-kuya-kwitafile, idenim ekrwada i-aesthetic synth nesciunt mhlawumbi awuzange uve ngabo accusamus labour ezinzileyo yeVHS.
Anim pariatur cliche reprehenderit, enim eiusmod ubomi obuphezulu accamus terry richardson ad squid. 3 ingcuka inyanga officia aute, non cupidatat skateboard dolor brunch. Ilori yokutya iquinoa nesciunt laborum eiusmod. Brunch 3 ingcuka inyanga tempor, sunt aliqua ubeke intaka kuyo iskwidi enye-imvelaphi ikofu nulla imaginenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. I-Leggings occaecat yenza ibhiya yasefama-kuya-kwitafile, idenim ekrwada i-aesthetic synth nesciunt mhlawumbi awuzange uve ngabo accusamus labour ezinzileyo yeVHS.

Ukusebenzisa i-bootstrap-collapse.js

Yenza ngejavascript:

  1. $ ( ".collapse" ). Ukuwa ()

Iinketho

Igama uhlobo ukungagqibeki inkcazelo
umzali umkhethi bubuxoki Ukuba umkhethi ke zonke izinto eziqengqelekayo phantsi komzali ochaziweyo ziya kuvalwa xa le nto iqengqelekayo iboniswa. (ifana nokuziphatha kwe-accordion yesiko)
guqula boolean yinyani Qwalasela into eqengqelekayo kubizo

IMarkup

Yongeza nje data-toggle="collapse"kunye ne- data-targetelementi ukunika ngokuzenzekelayo ulawulo lwento eqengqelekayo. Uphawu data-targetloyelelwano lwamkela umkhethi we-css ukuze kufakwe ukutshitshiswa. Qinisekisa ukuba wongeza iklasi collapsekwinto eqengqelekayo. Ukuba ungathanda ukuba ivuleke ngokungagqibekanga, yongeza udidi olongezelelweyo in.

  1. < iklasi yeqhosha = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. elula eqengqelekayo
  3. </ iqhosha>
  4.  
  5. <div id = "idemo" iklasi = "ehla ngaphakathi" > </div>
Iintloko phezulu! Ukongeza ulawulo lweqela olufana ne-accordion kulawulo oluqengqelekayo, yongeza uphawu loyelelwano lwedatha data-parent="#selector". Jonga kwidemo ukuze ubone oku kusebenza.

Iindlela

.cotha(iinketho)

Yenza umxholo wakho ube yinto eqengqelekayo. Yamkela iinketho ozikhethelayo object.

  1. $ ( '#myCollapsible' ). ukuwa ({
  2. guqula : bubuxoki
  3. })

.thoba('tshintsha')

Iguqulela into eqengqelekayo ukuze iboniswe okanye ifihliwe.

.cotha('bonisa')

Ibonisa into eqengqelekayo.

.coqa('fihla')

Ifihla into eqengqelekayo.

Iziganeko

Iklasi yokuwa yeBootstrap iveza iminyhadala embalwa yokuhuka ekusebenzeni kokuwa.

Isiganeko Inkcazo
bonisa Esi siganeko sivutha ngokukhawuleza xa showkubizwa indlela yomzekelo.
ibonisiwe Esi siganeko sigxothwa xa into yokudilika yenziwe yabonakala kumsebenzisi (iya kulinda i-css utshintsho ukuba igqibe).
fihla Esi siganeko sigxothwa ngokukhawuleza xa hideindlela sele ibizwa.
efihliweyo Esi siganeko siyagxothwa xa into yokudilika ifihliwe kumsebenzisi (iya kulinda uguqulo lwecss ukuba lugqibe).
  1. $ ( '#myCollapsible' ). kwi ( 'ifihliwe' , umsebenzi () {
  2. // Yenza into…
  3. })

Malunga

I-plugin esisiseko, eyandisiweyo ngokulula yokwenza ngokukhawuleza iintloko zokuchwetheza ezintle ngalo naluphi na uhlobo lokufakwa kombhalo.

Khuphela ifayile

Umzekelo

Qala ukuchwetheza kwintsimi engezantsi ukubonisa iziphumo zokuchwetheza.


Ukusebenzisa i-bootstrap-typeahead.js

Fowunela i-typeahead nge-javascript:

  1. $ ( '.typeahead' ). umphambili wokuchwetheza ()

Iinketho

Igama uhlobo ukungagqibeki inkcazelo
umthombo uluhlu [ ] Umthombo wedatha yokubuza ngokuchasene.
izinto inani 8 Elona nani liphezulu lezinto eziza kuboniswa kuluhlu.
umenzi umsebenzi ityala alinaluvelwano Indlela esetyenziswayo ukufumanisa ukuba umbuzo uhambelana nento. Yamkela ingxoxo enye, itemapho kuvavanywa umbuzo. Fikelela kumbuzo wangoku nge this.query. Buyisela i-boolean trueukuba umbuzo uhambelana.
umhleli umsebenzi ukuhambelana ngqo,
uvakalelo
lwetyala, ukungakhathali
Indlela esetyenzisiweyo ukulungisa iziphumo ezizenzekelayo. Yamkela ingxoxo enye itemskwaye inomda womzekelo wokuchwetheza. Jonga umbuzo wangoku nge this.query.
i-highlighter umsebenzi iqaqambisa zonke iimatshisi ezimiselweyo Indlela esetyenzisiweyo ukuqaqambisa iziphumo zokugqibezela ngokuzenzekelayo. Yamkela ingxoxo enye itemkwaye inomda womzekelo wokuchwetheza. Kufuneka ibuyise i-html.

IMarkup

Yongeza iimpawu zedatha ukubhalisa into enomsebenzi wokuchwetheza.

  1. <input type = "text" data-provide = "typeahead" >

Iindlela

.chwetheza ngaphambili(iinketho)

Uqalisa igalelo nge-typeahead.