I-Javascript ye-Bootstrap

Yenza izingxenye ze-Bootstrap ziphile—manje enama- plugin e- jQuery ngokwezifiso ayi-12.

Amamodeli

I-plugin ehlelekile, kodwa evumelana nezimo, ithatha i-plugin evamile ye-javascript enobuncane obuncane bokusebenza obudingekayo kanye nokuzenzakalelayo okuhlakaniphile.

Okwehliswayo

Engeza amamenyu okwehlayo cishe kunoma yini ku-Bootstrap ngale plugin elula. I-Bootstrap inokusekelwa okugcwele kwemenyu eyehlayo ku-navbar, amathebhu, namaphilisi.

Scrollspy

Sebenzisa i-scrollspy ukuze ubuyekeze ngokuzenzakalelayo izixhumanisi ku-navbar yakho ukuze ubonise isixhumanisi esisebenzayo samanje esisekelwe endaweni yokuskrola.

Amathebhu aguquguqukayo

Sebenzisa le plugin ukuze wenze amathebhu namaphilisi asebenziseke kakhulu ngokuwavumela ukuthi aguqule kumafasitelana amathebhu okuqukethwe kwasendaweni.

Amathuluzi

Ukuthatha okusha kwe-plugin ye-jQuery Tipsy, Amathuluzi awanciki ezithombeni—asebenzisa i-CSS3 ukuze agxumeke kanye nezibaluli zedatha zokulondoloza isihloko sendawo.

Ama-Popovers *

Engeza izimbondela ezincane zokuqukethwe, njengalezo eziku-iPad, kunoma iyiphi into ukuze uthole ulwazi lwesibili lwezindlu.

* Idinga Amathuluzi Amathuluzi ukuthi afakwe

Imiyalezo yokuxwayisa

I-plugin yesixwayiso iyikilasi elincane lokwengeza ukusebenza okuseduze kuzaziso.

Izinkinobho

Yenza okwengeziwe ngezinkinobho. Inkinobho yokulawula ithi noma dala amaqembu ezinkinobho zezingxenye ezengeziwe njengamabha wamathuluzi.

Goqa

Thola izitayela eziyisisekelo nosekelo oluguquguqukayo lwezingxenye ezigoqekayo njengama-accordion nokuzulazula.

I-Carousel

Dala i-merry-go-round yanoma yikuphi okuqukethwe ofisa ukukunikeza umbukiso wesilayidi osebenzayo wokuqukethwe.

I-Typehead

I-plugin eyisisekelo, enwetshwe kalula yokudala ngokushesha ama-typehead amahle nganoma iyiphi indlela yokufaka umbhalo.

Uguquko *

Ukuze uthole imiphumela elula yoguquko, faka i-bootstrap-transition.js kanye ukuze uslayide kumamodeli noma ucime izexwayiso.

* Iyadingeka ukuze kugcwaliswe ama-plugin

Amakhanda phezulu! Wonke ama-plugin e-javascript adinga inguqulo yakamuva ye-jQuery.

Mayelana namamodeli

I-plugin ehlelekile, kodwa evumelana nezimo, ithatha i-plugin evamile ye-javascript enobuncane obuncane bokusebenza obudingekayo kanye nokuzenzakalelayo okuhlakaniphile.

Landa ifayela

Isibonelo esiqinile

Ngezansi kunemodeli enikezwe ngokwezibalo.

Idemo ebukhoma

Guqula i-modal usebenzisa i-javascript ngokuchofoza inkinobho engezansi. Izoshelela phansi bese ifiphala kusukela phezulu kwekhasi.

Yethula imodeli yedemo

Ukusebenzisa i-bootstrap-modal

Shayela i-modal nge-javascript:

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

Izinketho

Igama uhlobo okuzenzakalelayo incazelo
okwasemuva boolean iqiniso Kufaka phakathi i-elementi ye-modal-backdrop. Noma, cacisa staticokwasemuva okungavali i-modal lapho uchofozwa.
ikhibhodi boolean iqiniso Ivala i-modal lapho ukhiye we-escape ucindezelwa
umbukiso boolean iqiniso Ibonisa i-modal lapho iqaliswa.

Imakhaphu

Ungavula amamodali ekhasini lakho kalula ngaphandle kokuthi ubhale umugqa owodwa we-javascript. Vele usethe data-toggle="modal"into yesilawuli eno- data-target="#foo"noma href="#foo"ehambisana ne-id ye-modal element, futhi uma uchofozwa, izokwethula i-modal yakho.

Futhi, ukuze ungeze izinketho kusibonelo sakho se-modal, vele uzifake njengezibaluli zedatha eyengeziwe kusici sokulawula noma umaki we-modal ngokwawo.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Yethula Indlela </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </button>
  4. <h3> Unhlokweni we-Modal </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Umzimba owodwa omuhle… </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" > Londoloza izinguquko </a>
  12. </div>
  13. </div>
Amakhanda phezulu! Uma ufuna i-modal yakho igqwayize ingene futhi iphume, vele ungeze .fadeiklasi entweni .modal(bheka idemo ukuze ubone lokhu kusebenza) futhi ufake i-bootstrap-transition.js.

Izindlela

.modal(izinketho)

Yenza okuqukethwe kwakho kusebenze njengemodeli. Yamukela izinketho ozikhethela object.

  1. $ ( '#myModal' ). imodeli ({
  2. ikhibhodi : amanga
  3. })

.modal('guqula')

Iguqula ngokwenza i-modal.

  1. $ ( '#myModal' ). i-modal ( 'guqula' )

.modal('show')

Ivula mathupha i-modal.

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

.modal('fihla')

Ifihla i-modal ngokwenza.

  1. $ ( '#myModal' ). i-modal ( 'fihla' )

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

I-plugin ye-ScrollSpy ingeyokuvuselela ngokuzenzakalelayo okuhlosiwe kwe-nav ngokusekelwe endaweni yokuskrola.

Landa ifayela

Isibonelo se-navbar ene-scrollspy

Skrola indawo engezansi bese ubuka isibuyekezo sokuzulazula. Izinto ezincanyana zokwehla zizogqanyiswa nazo. Izame!

@amafutha

I-Ad leggings keytar, i-brunch id art party dolor labore. I-Pitchfork ineminyaka engu-nim lo-fi ngaphambi kokuthi bathengise yonke into. Amalungelo ebhayisikili e-Tumblr epulazini ukuya etafuleni noma yini. I-Cardigan ene-anim keffiyeh carles. Indlwana yezithombe ka-Velit seitan mcsweeney 3 wolf moon irure. Ijezi le-Cosby lomo jean shorts, i-williamsburg hoodie minim qui cishe awukaze uzwe ngazo et cardigan trust fund culpa biodiesel wes anderson aesthetic. U-Nihil one-tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa amadevu skateboard, adipisicing fugiat velit pitchfork intshebe. Freegan intshebe aliqua cupidatat mcsweeney's vero. Cupidatat ezine loko nisi, ea helvetica nulla carles. Iloli lokudla lejezi le-cosby eline-tattoo, i-mcsweeney's quis non freegan vinyl. I-Lo-fi wes anderson +1 sartorial. I-Carles non-aesthetic exercitation i-quis gentrify. I-Brooklyn adipisicing craft beer vice keytar deserunt.

eyodwa

I-Occaecat commodo aliqua deelectus. I-Fap craft beer deserunt skateboard ea. Amalungelo ebhayisikili e-Lomo adipisicing banh mi, velit ea sunt next level locavore ikhofi yemvelaphi eyodwa e-magna veniam. I-vinyl id yempilo ephezulu, i-echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. I-Cred ex in, i-iphone eqhubekayo deelectus consectetur fanny pack.

ezimbili

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 messenger bag marfa whatever deelectus food truck. Sapiente synth id imaginenda. I-Locavore sed helvetica cliche irony, ama-thundercats cishe awukaze uzwe ngawo consequat hoodie gluten-free lo-fi fap aliquip. I-Labore elit placeat ngaphambi kokuba ithengiswe, u-terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. I-Cardigan craft beer seitan readymade velit. I-VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Isebenzisa i-bootstrap-scrollspy.js

Shayela i-scrollspy nge-javascript:

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

Imakhaphu

Ukwengeza kalula impatho ye-scrollspy ekuzulazuleni kwe data-spy="scroll"-topbar yakho, vele wengeze entweni ofuna ukuyihlola (imvamisa lokhu kuzoba umzimba).

  1. <body data-spy = "scroll" > ... </body>
Amakhanda phezulu! Izixhumanisi ze-Navbar kufanele zibe neziqondiso ze-id ezingaxazululeka. Isibonelo, i-a <a href="#home">home</a>must ihambisane nento ethile edomini efana <div id="home"></div>.

Izindlela

.scrollspy('refresh')

Uma usebenzisa i-scrollspy ngokuhambisana nokwengeza noma ukususa izakhi ku-DOM, uzodinga ukushayela indlela yokuvuselela kanje:

  1. $ ( '[data-spy="scroll"]' ). ngakunye ( umsebenzi () {
  2. var $spy = $ ( lokhu ). scrollspy ( 'refresh' )
  3. });

Izinketho

Igama uhlobo okuzenzakalelayo incazelo
offset inombolo 10 Amaphikseli okufanele uwasuse ukusuka phezulu uma ubala indawo yokuskrola.

Imicimbi

Umcimbi Incazelo
vula Lo mcimbi uvutha noma nini lapho into entsha yenziwa isebenze i-scrollspy.

Le plugin yengeza ithebhu esheshayo, eguqukayo kanye nokusebenza kwamaphilisi ukuze kudlule okuqukethwe kwasendaweni.

Landa ifayela

Amathebhu ayisibonelo

Chofoza amathebhu angezansi ukuze uguqule phakathi kwamafasitelana afihliwe, ngisho nangamamenyu okwehlayo.

I-denim eluhlaza cishe awuzange uzwe ngabo izikhindi ze-jean Austin. I-Nesciunt tofu stumptown aliqua, i-retro synth master cleanse. Amadevu cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Ijezi le-Cosby eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, 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.


Isebenzisa i-bootstrap-tab.js

Nika amandla amathebhu aphathekayo nge-javascript (ithebhu ngayinye idinga ukwenziwa isebenze ngayodwana):

  1. $ ( '#myTab a' ). chofoza ( umsebenzi ( e ) {
  2. e . vimbelaOkuzenzakalelayo ();
  3. $ ( lokhu ). ithebhu ( 'show' );
  4. })

Ungavula amathebhu ngamanye ngezindlela ezimbalwa:

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

Imakhaphu

Ungakwazi ukuvula ithebhu noma ukuzulazula kwephilisi ngaphandle kokubhala noma iyiphi i-javascript ngokucacisa data-toggle="tab"noma ngento data-toggle="pill"ethile. Ukwengeza i- navkanye nav-tabsnamakilasi kuthebhu ulkuzosebenzisa isitayela sethebhu ye-bootstrap.

  1. <ul class = "nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab"> Ikhaya </a></li >
  3. <li><a href = "#profile" data-toggle = "tab"> Iphrofayili </a></li >
  4. <li><a href = "#messages" data-toggle = "tab"> Imilayezo </a></li >
  5. <li><a href = "#settings" data-toggle = "tab"> Izilungiselelo </a></li >
  6. </ul>

Izindlela

$().ithebhu

Yenza i-elementi yethebhu isebenze nesiqukathi sokuqukethwe. Ithebhu kufanele ibe no-a data-targetnoma i href-container node ku-DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home"> Ikhaya </a></li >
  3. <li > <a href = "#iphrofayili"> Iphrofayili </a></li>
  4. <li><a href = "#imiyalezo" > Imilayezo </a></li>
  5. <li > <a href = "#settings"> Izilungiselelo </a></li>
  6. </ul>
  7.  
  8. <div class = "ithebhu-okuqukethwe" >
  9. <div class = "i-tab-pane esebenzayo" id = "ikhaya" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "imiyalezo" > ... </div>
  12. <div class = "tab-pane" id = "izilungiselelo" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( umsebenzi () {
  17. $ ( '#myTab a:last' ). ithebhu ( 'show' );
  18. })
  19. </script>

Imicimbi

Umcimbi Incazelo
umbukiso Lo mcimbi uvutha embukisweni wethebhu, kodwa ngaphambi kokuthi kuboniswe ithebhu entsha. Sebenzisa event.targetfuthi event.relatedTargetuqondise ithebhu esebenzayo kanye nethebhu esebenzayo yangaphambilini (uma ikhona) ngokulandelanayo.
kubonisiwe Lo mcimbi uvutha embukisweni wethebhu ngemva kokuthi ithebhu isibonisiwe. Sebenzisa event.targetfuthi event.relatedTargetuqondise ithebhu esebenzayo kanye nethebhu esebenzayo yangaphambilini (uma ikhona) ngokulandelanayo.
  1. $ ( 'a[data-toggle="tab"]' ). ku ( 'kubonisiwe' , umsebenzi ( e ) {
  2. e . target // ithebhu evuliwe
  3. e . relatedTarget // ithebhu yangaphambilini
  4. })

Mayelana namathiphu

Igqugquzelwe i-plugin enhle kakhulu ye-jQuery.tipsy ebhalwe ngu-Jason Frame; Amathuluzi ayinguqulo ebuyekeziwe, engancikile ezithombeni, sebenzisa i-css3 ukuze uthole ukugqwayiza, kanye nezibaluli zedatha zokulondoloza isihloko sendawo.

Landa ifayela

Isibonelo sokusebenzisa Amathiphu

Hambisa phezulu kwezixhumanisi ezingezansi ukuze ubone amathuluzi:

Amabhulukwe aqinile ezingeni elilandelayo keffiyeh cishe awuzwanga ngawo. Photo booth intshebe eluhlaza yedenim letterpress vegan messenger bag stumptown. Isambatho se-farm-to-table seitan, i-mcsweeney's fixie sustainable quinoa 8-bit american apparel ine- terry richardson vinyl chambray. Izintshebe stumptown, cardigans banh mi lomo thundercats. I-Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. Ingcweti ehlekisayo ngempela whatever keytar , i-movie-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.


Ukusebenzisa i-bootstrap-tooltip.js

Qalisa ithiphu yamathuluzi nge-javascript:

  1. $ ( '#isibonelo' ). ithiphu ( izinketho )

Izinketho

Igama uhlobo okuzenzakalelayo incazelo
izithombe boolean iqiniso sebenzisa inguquko ye-css fade ethiphu yamathuluzi
ukubekwa umucu|umsebenzi 'phezulu' indlela yokubeka ithiphu yamathuluzi - phezulu | phansi | kwesokunxele | kwesokudla
isikhethi umucu amanga Uma kunikezwa isikhethi, izinto zethiphu yamathuluzi zizodluliselwa kulokho okuhlosiwe okucacisiwe.
isihloko umucu | umsebenzi '' inani lesihloko elizenzakalelayo uma umaka `wesihloko` ungekho
inhlamvu umucu 'hambahamba' ukuthi ithiphu yamathuluzi icushwa kanjani - hambisa phezulu | gxila | imanuwali
ukubambezela inombolo | into 0

ukubambezeleka ukubonisa nokufihla ithiphu yamathuluzi (ms) - ayisebenzi ohlotsheni lwesicuphi sesandla

Uma inombolo inikezwa, ukubambezeleka kusetshenziswa kukho kokubili ukufihla/umbukiso

Isakhiwo sento sithi:delay: { show: 500, hide: 100 }

Amakhanda phezulu! Izinketho zamathiphu angawodwana zingachazwa ngokusetshenziswa kwezibaluli zedatha.

Imakhaphu

Ngenxa yezizathu zokusebenza, Ithulithiphu kanye ne-Popover data-apis zingena. Uma ungathanda ukuzisebenzisa vele ucacise inketho yesikhethi.

  1. <a href = "#" rel = "tooltip" title = "ithulusi lokuqala"> hambisa phezu kwami ​​</a>

Izindlela

$().ithulusi(izinketho)

Inamathisela isibambi sethulithiphu eqoqweni lesici.

.ithiphu yethuluzi('show')

Iveza ithulithiphu yento ethile.

  1. $ ( '#element' ). ithiphu yamathuluzi ( 'show' )

.ithiphu yethuluzi('fihla')

Ifihla ithiphu yento ethile.

  1. $ ( '#element' ). ithiphu yamathuluzi ( 'fihla' )

.ithiphu yethuluzi('guqula')

Iguqula ithiphu lethuluzi le-elementi.

  1. $ ( '#element' ). ithiphu yamathuluzi ( 'guqula' )

Mayelana nama-popovers

Engeza izimbondela ezincane zokuqukethwe, njengalezo eziku-iPad, kunoma iyiphi into ukuze uthole ulwazi lwesibili lwezindlu.

* Idinga ithiphu yamathuluzi ukuthi ifakwe

Landa ifayela

Isibonelo hambisa i-popover

Hambisa phezulu kwenkinobho ukuze uqalise i-popover.


Isebenzisa i-bootstrap-popover.js

Nika amandla ama-popovers nge-javascript:

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

Izinketho

Igama uhlobo okuzenzakalelayo incazelo
izithombe boolean iqiniso sebenzisa inguquko ye-css fade ethiphu yamathuluzi
ukubekwa umucu|umsebenzi 'kwesokudla' indlela yokubeka i-popover - phezulu | phansi | kwesokunxele | kwesokudla
isikhethi umucu amanga uma kunikezwa isikhethi, izinto zethulithiphu zizodluliselwa kulokho okuhlosiwe
inhlamvu umucu 'hambahamba' ukuthi ithiphu yamathuluzi icushwa kanjani - hambisa phezulu | gxila | imanuwali
isihloko umucu | umsebenzi '' inani lesihloko elizenzakalelayo uma isibaluli `sesihloko` singekho
okuqukethwe umucu | umsebenzi '' inani lokuqukethwe elizenzakalelayo uma isibaluli `sokuqukethwe kwedatha` singekho
ukubambezela inombolo | into 0

ukubambezeleka ukubonisa nokufihla i-popover (ms) - ayisebenzi ohlotsheni lwe-trigger okwenziwa ngesandla

Uma inombolo inikezwa, ukubambezeleka kusetshenziswa kukho kokubili ukufihla/umbukiso

Isakhiwo sento sithi:delay: { show: 500, hide: 100 }

Amakhanda phezulu! Izinketho ze-popover ezingazodwana zingacaciswa ngokusebenzisa izibaluli zedatha.

Imakhaphu

Ngenxa yezizathu zokusebenza, Ithulithiphu kanye ne-Popover data-apis zingena. Uma ungathanda ukuzisebenzisa vele ucacise inketho yesikhethi.

Izindlela

$().i-popover(izinketho)

Iqalisa ama-popover eqoqo le-elementi.

.popover('show')

Iveza i-popover yama-elementi.

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

.popover('fihla')

Ifihla i-popover yama-elementi.

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

.popover('guqula')

Iguqula i-popover yezinto.

  1. $ ( '#element' ). i- popover ( 'guqula' )

Mayelana nezixwayiso

I-plugin yesixwayiso iyikilasi elincane lokwengeza ukusebenza okuseduze kuzaziso.

Landa

Izexwayiso eziyisibonelo

I-plugin yezaziso isebenza emilayezweni eyisixwayiso evamile, futhi ivimbe imilayezo.

I-guacamole engcwele! Kungcono uzihlole kahle, awubukeki umuhle kakhulu.

Hawu! Unephutha!

Shintsha lokhu nalokhu bese uzama futhi. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. I-Cras mattis consectetur purus sit amet fermentum.

Thatha lesi senzo Noma yenza lokhu


Isebenzisa i-bootstrap-alert.js

Nika amandla ukuchithwa kwesexwayiso nge-javascript:

  1. $ ( ".isaziso" ). qaphela ()

Imakhaphu

Vele ungeze data-dismiss="alert"enkinobheni yakho yokuvala ukuze unikeze ngokuzenzakalelayo ukusebenza kwesexwayiso sokuvala.

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

Izindlela

$().isaziso()

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

.sexwayiso('vala')

Ivala isexwayiso.

  1. $ ( ".isaziso" ). isixwayiso ( 'vala' )

Imicimbi

Ikilasi lesexwayiso le-Bootstrap lidalula imicimbi embalwa ukuze ixhumeke ekusebenzeni kwesixwayiso.

Umcimbi Incazelo
vala Lo mcimbi uvutha ngokushesha lapho closeindlela yesibonelo ibizwa.
ivaliwe Lo mcimbi uyaxoshwa uma isaziso sivaliwe (sizolinda ukuthi izinguquko ze-css ziqedele).
  1. $ ( '#isaziso sami' ). bopha ( 'kuvaliwe' , umsebenzi () {
  2. // enza into…
  3. })

Mayelana

Yenza okwengeziwe ngezinkinobho. Inkinobho yokulawula ithi noma dala amaqembu ezinkinobho zezingxenye ezengeziwe njengamabha wamathuluzi.

Landa ifayela

Isibonelo sokusetshenziswa

Sebenzisa i-plugin yezinkinobho zezifunda kanye nama-toggles.

Okushoyo
Ukuguqula okukodwa
Ibhokisi lokuhlola
Umsakazo

Ukusebenzisa i-bootstrap-button.js

Nika amandla izinkinobho nge-javascript:

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

Imakhaphu

Izibaluli zedatha ziyingxenye ye-plugin yenkinobho. Bheka ikhodi yesibonelo engezansi ngezinhlobo ezahlukene zokumaka.

  1. <!-- Engeza idatha-toggle="inkinobho" ukuze uvule ukushintsha inkinobho eyodwa -->
  2. <button class = "btn" data-toggle = "inkinobho" > Ukuguqula Okukodwa </inkinobho>
  3.  
  4. <!-- Engeza idatha-toggle="buttons-checkbox" ukuze uguqule isitayela sebhokisi lokuhlola ku-btn-group -->
  5. <div class = "btn-group" data-toggle = "ibhokisi lokuhlola lezinkinobho" >
  6. < ikilasi lenkinobho = "btn" > Kwesobunxele </inkinobho>
  7. <inkinobho yekilasi = "btn" > Phakathi </inkinobho>
  8. <inkinobho yekilasi = "btn" > Kwesokudla </inkinobho>
  9. </div>
  10.  
  11. <!-- Add data-toggle="buttons-radio" ukuze uguqule isitayela somsakazo ku-btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. < ikilasi lenkinobho = "btn" > Kwesobunxele </inkinobho>
  14. <inkinobho yekilasi = "btn" > Phakathi </inkinobho>
  15. <inkinobho yekilasi = "btn" > Kwesokudla </inkinobho>
  16. </div>

Izindlela

$().inkinobho('guqula')

Iguqula isimo sohlelo. Inikeza inkinobho ukubonakala sengathi yenziwe yasebenza.

Amakhanda phezulu! Ungakwazi ukunika amandla ukuguqula okuzenzakalelayo kwenkinobho ngokusebenzisa data-toggleisibaluli.
  1. <button class = "btn" data-toggle = "inkinobho" > </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.

  1. <button class = "btn" data-loading-text = "ilayisha izinto..." > ... </button>
Amakhanda phezulu! I-Firefox iphikelela nesimo sokukhubaza kuwo wonke ukulayisha kwamakhasi . Isixazululo salokhu ukusetshenziswa autocomplete="off".

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

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

Mayelana

Thola izitayela eziyisisekelo nosekelo oluguquguqukayo lwezingxenye ezigoqekayo njengama-accordion nokuzulazula.

Landa ifayela

* Idinga i-plugin ye-Transitions ukuthi ifakwe.

Isibonelo se-accordion

Sisebenzisa i-plugin yokugoqa, sakhe iwijethi yesitayela se-accordion elula:

Anim pariatur cliche reprehenderit, enim eiusmod high life accamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Iloli lokudla i-quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua beka inyoni kuso i-squid single-origin coffee nulla imaginenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. I-Ad vegan Exeur butcher vice lomo. I-Leggings occaecat yenza ubhiya wepulazi ukuya etafuleni, i-denim eluhlaza yobuhle be-synth nesciunt cishe awukaze uzwe ngabo i-accusamus labore i-VHS eqhubekayo.
Anim pariatur cliche reprehenderit, enim eiusmod high life accamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Iloli lokudla i-quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua beka inyoni kuso i-squid single-origin coffee nulla imaginenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. I-Ad vegan Exeur butcher vice lomo. I-Leggings occaecat yenza ubhiya wepulazi ukuya etafuleni, i-denim eluhlaza yobuhle be-synth nesciunt cishe awukaze uzwe ngabo i-accusamus labore i-VHS eqhubekayo.
Anim pariatur cliche reprehenderit, enim eiusmod high life accamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Iloli lokudla i-quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua beka inyoni kuso i-squid single-origin coffee nulla imaginenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. I-Ad vegan Exeur butcher vice lomo. I-Leggings occaecat yenza ubhiya wepulazi ukuya etafuleni, i-denim eluhlaza yobuhle be-synth nesciunt cishe awukaze uzwe ngabo i-accusamus labore i-VHS eqhubekayo.

Isebenzisa i-bootstrap-collapse.js

Nika amandla nge-javascript:

  1. $ ( ".goqa" ). bhidliza ()

Izinketho

Igama uhlobo okuzenzakalelayo incazelo
umzali isikhethi amanga Uma isikhethi khona-ke zonke izici ezigoqekayo ngaphansi komzali othile zizovalwa lapho le nto egoqekayo iboniswa. (okufana nokuziphatha kwe-accordion yendabuko)
guqula boolean iqiniso Iguqula into egoqekayo ekunxuseni

Imakhaphu

Vele ungeze data-toggle="collapse"futhi u-a data-targetku-elementi ukuze unikeze ngokuzenzakalelayo ukulawula kwento egoqekayo. Isibaluli data-targetsamukela isikhethi se-css ongafaka kuso ukugoqa. Qiniseka ukuthi ungeza ikilasi collapseku-elementi egoqekayo. Uma ungathanda ukuthi ivuleke ngokuzenzakalelayo, engeza iklasi elengeziwe in.

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. elula egoqekayo
  3. </inkinobho>
  4.  
  5. <div id = "demo" class = "goqa phakathi" > </div>
Amakhanda phezulu! Ukuze ungeze ukuphathwa kweqembu okufana ne-accordion kusilawuli esigoqekayo, engeza isibaluli sedatha data-parent="#selector". Bheka idemo ukuze ubone lokhu kusebenza.

Izindlela

.goqa(izinketho)

Yenza okuqukethwe kwakho kusebenze njengento egoqekayo. Yamukela izinketho ozikhethela object.

  1. $ ( '#myCollapsible' ). bhidlika ({
  2. guqula : amanga
  3. })

.goqa('guqula')

Iguqula into egoqekayo ukuze iboniswe noma ifihlwe.

.goqa('show')

Ibonisa into egoqekayo.

.goqa('fihla')

Ifihla into egoqekayo.

Imicimbi

Ikilasi lokugoqa le-Bootstrap lidalula imicimbi embalwa ukuze ixhumeke ekusebenzeni kokugoqa.

Umcimbi Incazelo
umbukiso Lo mcimbi uvutha ngokushesha lapho showindlela yesibonelo ibizwa.
kubonisiwe Lo mcimbi uxoshwa lapho isici sokugoqa senziwe sabonakala kumsebenzisi (sizolinda ukuthi izinguquko ze-css ziqedele).
fihla Lo mcimbi uxoshwa ngokushesha lapho hideindlela isibiziwe.
kufihliwe Lo mcimbi uxoshwa lapho isici sokugoqa sifihliwe kumsebenzisi (sizolinda ukuthi izinguquko ze-css ziqedele).
  1. $ ( '#myCollapsible' ). ku ( 'kufihliwe' , umsebenzi () {
  2. // enza into…
  3. })

Mayelana

I-plugin eyisisekelo, enwetshwe kalula yokudala ngokushesha ama-typehead amahle nganoma iyiphi indlela yokufaka umbhalo.

Landa ifayela

Isibonelo

Qala ukuthayipha kunkambu engezansi ukuze ubonise imiphumela ye-typeahead.


Isebenzisa i-bootstrap-typeahead.js

Shayela i-typeahead nge-javascript:

  1. $ ( '.typeahead' ). i-typehead ()

Izinketho

Igama uhlobo okuzenzakalelayo incazelo
umthombo uhlu [ ] Umthombo wedatha ongabuza ngawo.
izinto inombolo 8 Inombolo enkulu yezinto ezoboniswa kokwehliswayo.
umenzi umsebenzi icala alizwani Indlela esetshenziselwa ukunquma ukuthi umbuzo ufana nento ethile. Yamukela i-agumenti eyodwa, itemokuzovivinywa ngayo umbuzo. Finyelela embuzweni wamanje nge- this.query. Buyisa i-boolean trueuma umbuzo ufana.
umhleli umsebenzi ukufana ncamashi,
ukuzwela
kwecala, akuzwakali
Indlela esetshenzisiwe ukuhlunga imiphumela yokuqedela ngokuzenzakalela. Yamukela impikiswano eyodwa itemsfuthi inobubanzi besibonelo se-typeahead. Bhekisela umbuzo wamanje ngokuthi this.query.
i-highlighter umsebenzi igqamisa konke okufanayo okuzenzakalelayo Indlela esetshenzisiwe ukugqamisa imiphumela yokuqedela ngokuzenzakalela. Yamukela impikiswano eyodwa itemfuthi inobubanzi besibonelo se-typeahead. Kufanele ibuyise i-html.

Imakhaphu

Engeza izibaluli zedatha ukuze ubhalise i-elementi ngokusebenza kwe-typeahead.

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

Izindlela

.typeahead(izinketho)

Iqalisa okokufaka nge-typeahead.