Javascript pou Bootstrap

Bay konpozan Bootstrap yo nan lavi-kounye a ak 12 grefon jQuery koutim.

Modal

Yon rasyonalize, men fleksib, pran sou tradisyonèl javascript modal Plugin la ak sèlman minimòm fonksyonalite ki nesesè yo ak default entelijan.

Dropdowns

Ajoute meni deroulan nan prèske nenpòt bagay nan Bootstrap ak senp plugin sa a. Bootstrap gen sipò konplè meni deroulant nan navbar, onglè, ak grenn.

Scrollspy

Sèvi ak scrollspy pou mete ajou otomatikman lyen ki nan navbar ou a pou montre lyen aktif aktyèl la ki baze sou pozisyon woulo liv la.

Onglet baskile

Sèvi ak Plugin sa a pou fè tab ak grenn yo pi itil lè yo pèmèt yo pase nan fenèt tabulab nan kontni lokal yo.

Konsèy zouti

Yon nouvo pran sou jQuery Tipsy Plugin la, Tooltips pa konte sou imaj-yo itilize CSS3 pou animasyon ak done-atribi pou depo tit lokal yo.

Popovers *

Ajoute ti kouvri kontni, tankou sa yo sou iPad a, nan nenpòt eleman pou lojman segondè enfòmasyon.

* Egzije konsèy zouti yo dwe enkli

Mesaj alèt

Plugin alèt la se yon ti klas pou ajoute fonksyonalite fèmen nan alèt yo.

Bouton

Fè plis ak bouton. Kontwole eta bouton oswa kreye gwoup bouton pou plis konpozan tankou ba zouti.

Tonbe

Jwenn estil de baz ak sipò fleksib pou konpozan rabat tankou akòdeyon ak navigasyon.

Carousel

Kreye yon jwaye nan nenpòt kontni ou vle bay yon diaporama entèaktif nan kontni.

Typeahead

Yon plugin debaz, fasil pwolonje pou kreye byen vit tipaheads elegant ak nenpòt ki antre tèks fòm.

Tranzisyon *

Pou efè tranzisyon senp, enkli bootstrap-transition.js yon fwa pou glise nan modal oswa fennen alèt.

* Obligatwa pou animasyon nan grefon

Tèt leve! Tout grefon javascript mande pou dènye vèsyon jQuery.

Konsènan modal yo

Yon rasyonalize, men fleksib, pran sou tradisyonèl javascript modal Plugin la ak sèlman minimòm fonksyonalite ki nesesè yo ak default entelijan.

Telechaje fichye a

Egzanp estatik

Anba a se yon modal rann statik.

Live Demo

Chanje yon modal via javascript lè w klike sou bouton ki anba a. Li pral glise desann ak fennen soti nan tèt paj la.

Lanse Demo modal

Sèvi ak bootstrap-modal

Rele modal la via javascript:

  1. $ ( '#myModal' ). modal ( opsyon )

Opsyon

Non kalite default deskripsyon
seri booleyen vre Gen ladann yon eleman modal-backdrop. Altènativman, presize staticpou yon seri ki pa fèmen modal la sou klike sou.
klavye booleyen vre Fèmen modal la lè yo peze kle chape
montre booleyen vre Montre modal la lè inisyalize.

Marke

Ou ka aktive modal sou paj ou a fasil san w pa bezwen ekri yon sèl liy javascript. Jis mete data-toggle="modal"sou yon eleman kontwolè ak yon data-target="#foo"oswa href="#foo"ki koresponn ak yon id eleman modal, epi lè klike sou, li pral lanse modal ou a.

Epitou, pou ajoute opsyon nan egzanp modal ou a, jis enkli yo kòm atribi done adisyonèl sou swa eleman kontwòl la oswa maketing nan modal tèt li.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Lanse modal </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "bouton" class = "close" data-dismiss = "modal" > × </button>
  4. <h3> Tèt modal </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Yon bèl kò... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Fèmen </a>
  11. <a href = "#" class = "btn btn-primary" > Sove chanjman yo </a>
  12. </div>
  13. </div>
Tèt leve! Si ou vle modal ou a anime nan ak soti, jis ajoute yon .fadeklas nan .modaleleman an (al gade nan Demo a pou wè sa a nan aksyon) epi enkli bootstrap-transition.js.

Metòd

.modal(opsyon)

Aktive kontni ou kòm yon modal. Aksepte yon opsyon opsyonèl object.

  1. $ ( '#myModal' ). modal ({
  2. klavye : fo
  3. })

.modal('toggle')

Manyèlman aktive yon modal.

  1. $ ( '#myModal' ). modal ( 'toggle' )

.modal('montre')

Manyèlman ouvè yon modal.

  1. $ ( '#myModal' ). modal ( 'montre' )

.modal('kache')

Manyèlman kache yon modal.

  1. $ ( '#myModal' ). modal ( 'kache' )

Evènman

Klas modal Bootstrap a ekspoze kèk evènman pou branche nan fonksyonalite modal.

Evènman Deskripsyon
montre Evènman sa a dife imedyatman lè yo showrele metòd egzanp lan.
montre Evènman sa a te tire lè modal la te fè vizib itilizatè a (ap tann pou tranzisyon css fini).
kache Evènman sa a te tire imedyatman lè yo hidete rele metòd egzanp lan.
kache Evènman sa a revoke lè modal la fini kache pou itilizatè a (ap tann pou tranzisyon CSS fini).
  1. $ ( '#myModal' ). on ( 'kache' , fonksyon () {
  2. // fè yon bagay…
  3. })

Plugin ScrollSpy a se pou mete ajou otomatikman sib navigasyon ki baze sou pozisyon woulo liv la.

Telechaje fichye a

Egzanp navbar ak scrollspy

Scroll zòn ki anba a epi gade aktyalizasyon navigasyon an. Sou atik yo deroule yo pral make tou. Eseye li!

@grès

Ad leggings keytar, kolasyon id atizay pati dolor labore. Pitchfork yr enim lo-fi avan yo vann out qui. Tumblr dwa bisiklèt fèm-a-tab tou sa. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui ou pwobableman pa tande pale de yo et cardigan trust fund culpa biodiesel wes anderson estetik. Nihil tattooed accusamus, kredi iwoni biodiesel keffiyeh atizan ullamco consequat.

@mdo

Veniam marfa moustache skateboard, adipisicing fugiat velit pitchfork bab. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat kat loko nisi, ea helvetica nulla carles. Kamyon manje kosby chanday tatouage, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non ekzèsisman estetik kis gentrify. Brooklyn adipisicing craft byer vis keytar deserunt.

youn

Occaecat commodo aliqua delectus. Fap craft byer deserunt skateboard ea. Lomo bicycle right adipisicing banh mi, velit ea are next level locavore single-orijin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS se adipisicing. Consectetur nisi DIY minim messenger bag. Kredi ansyen nan, durable delectus consectetur fanny pack iphone.

de

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 delectus food truck. Sapient synth id assumenda. Locavore sed helvetica cliche iwoni, thundercats ou pwobableman pa te tande pale de yo consequat hoodie gluten-free lo-fi fap aliquip. Travay elit placeat before they sold out, Terry Richardson proident brunch nesciunt kis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Sèvi ak bootstrap-scrollspy.js

Rele scrollspy via javascript:

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

Marke

Pou fasilman ajoute konpòtman scrollspy nan navigasyon topbar ou a, jis ajoute data-spy="scroll"nan eleman ou vle al rekonèt sou (pi tipikman sa a ta dwe kò a).

  1. <body data-spy = "scroll" > ... </body>
Tèt leve! Lyen Navbar yo dwe gen sib id ki ka rezoud. Pou egzanp, yon <a href="#home">home</a>dwe koresponn ak yon bagay nan dom la tankou <div id="home"></div>.

Metòd

.scrollspy('refresh')

Lè w ap itilize scrollspy ansanm ak ajoute oswa retire eleman nan DOM, w ap bezwen rele metòd rafrechisman an konsa:

  1. $ ( '[data-spy="scroll"]' ). chak ( fonksyon () {
  2. var $espyon = $ ( sa a ). scrollspy ( 'refresh' )
  3. });

Opsyon

Non kalite default deskripsyon
konpanse nimewo 10 Piksèl pou konpanse nan tèt lè w ap kalkile pozisyon woulo liv la.

Evènman

Evènman Deskripsyon
aktive Evènman sa a dife chak fwa yon nouvo atik vin aktive pa scrollspy la.

Plugin sa a ajoute rapid, dinamik tab ak fonksyonalite grenn pou tranzisyon nan kontni lokal yo.

Telechaje fichye a

Onglet egzanp

Klike sou onglè ki anba yo pou chanje ant fenèt kache, menm atravè meni dewoulan.

Denim kri ou pwobableman pa te tande pale de yo pantalon pantalon jean Austin. Nesciunt tofou stumptown aliqua, rétro synth mèt netwaye. Moustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit bouche retro kefiyeh dreamcatcher synth. Cosby sweater eu banh mi, ki 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.


Sèvi ak bootstrap-tab.js

Pèmèt onglè tabulab yo atravè javascript (yo dwe aktive chak tab endividyèlman):

  1. $ ( '#myTab a' ). klike sou ( fonksyon ( e ) {
  2. e . preventDefault ();
  3. $ ( sa a ). tab ( 'montre' );
  4. })

Ou ka aktive onglè endividyèl yo nan plizyè fason:

  1. $ ( '#myTab a[href="#profile"]' ). tab ( 'montre' ); // Chwazi tab pa non
  2. $ ( '#myTab a:first' ). tab ( 'montre' ); // Chwazi premye tab
  3. $ ( '#myTab a:last' ). tab ( 'montre' ); // Chwazi dènye tab
  4. $ ( '#myTab li:eq(2) a' ). tab ( 'montre' ); // Chwazi twazyèm tab (0-endèks)

Marke

Ou ka aktive yon tab oswa navigasyon grenn san w pa ekri okenn javascript lè w tou senpleman presize data-toggle="tab"oswa data-toggle="pill"sou yon eleman. Ajoute navak nav-tabsklas yo nan tab la ulpral aplike manier tab bootstrap la.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Kay </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profile </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Mesaj </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Anviwònman </a></li>
  6. </ul>

Metòd

$().tab

Aktive yon eleman tab ak yon veso kontni. Tab ta dwe gen swa yon data-targetoswa yon hrefvize yon ne veso nan DOM la.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Kay </a></li>
  3. <li><a href = "#profile" > Profile </a></li>
  4. <li><a href = "#messages" > Mesaj </a></li>
  5. <li><a href = "#settings" > Anviwònman </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "kay" > ... </div>
  10. <div class = "tab-pane" id = "pwofil" > ... </div>
  11. <div class = "tab-pane" id = "mesaj" > ... </div>
  12. <div class = "tab-pane" id = "anviwònman" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( fonksyon () {
  17. $ ( '#myTab a:last' ). tab ( 'montre' );
  18. })
  19. </script>

Evènman

Evènman Deskripsyon
montre Evènman sa a dife sou tab montre, men anvan yo te montre nouvo tab la. Sèvi event.targetak ak event.relatedTargetpou vize tab aktif la ak tab aktif anvan an (si disponib) respektivman.
montre Evènman sa a pran dife sou tab montre apre yo fin montre yon tab. Sèvi event.targetak ak event.relatedTargetpou vize tab aktif la ak tab aktif anvan an (si disponib) respektivman.
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'montre' , fonksyon ( e ) {
  2. e . sib // aktive tab
  3. e . relatedTarget // tab anvan
  4. })

Konsènan Tooltips

Enspire pa ekselan plugin jQuery.tipsy ekri pa Jason Frame; Ti konsèy yo se yon vèsyon mete ajou, ki pa konte sou imaj, sèvi ak css3 pou animasyon, ak done-atribi pou estokaj tit lokal yo.

Telechaje fichye a

Egzanp itilizasyon Tooltips

Pase sou lyen ki anba yo pou wè konsèy sou zouti:

Pantalon sere pwochen nivo keffiyeh ou pwobableman pa te tande pale de yo. Photo Booth bab kri abako letterpress vegan mesaje sak stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american clothing gen yon terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofou biodiesel williamsburg marfa, kat loko Mcsweeney a netwaye vegan chambray. Yon atizan vrèman ironik kèlkeswa keytar , scenester farm-to-table banksy Austin twitter manch freegan cred raw denim sèl-orijin kafe viral.


Sèvi ak bootstrap-tooltip.js

Deklanche konsèy zouti a atravè javascript:

  1. $ ( '#egzanp' ). ti konsèy ( opsyon )

Opsyon

Non kalite default deskripsyon
animasyon booleyen vre aplike yon tranzisyon fade css nan konsèy la
plasman fisèl|fonksyon 'top' ki jan yo pozisyon konsèy la - tèt | anba | kite | dwa
seleksyon fisèl fo Si yo bay yon seleksyon, objè konsèy yo pral delege nan sib yo espesifye.
tit fisèl | fonksyon '' valè tit default si tag `title` pa prezan
deklanche fisèl 'plane' kijan tooltip deklanche - hover | konsantre | manyèl
reta nimewo | objè 0

reta montre ak kache konsèy zouti a (ms) - pa aplike nan kalite deklanche manyèl

Si yo bay yon nimewo, reta aplike pou tou de kache/montre

Estrikti objè se:delay: { show: 500, hide: 100 }

Tèt leve! Opsyon pou konsèy endividyèl yo ka altènativman espesifye atravè itilizasyon atribi done yo.

Marke

Pou rezon pèfòmans, Tooltip ak Popover done-apis yo patisipe nan. Si ou ta renmen itilize yo jis presize yon opsyon seleksyon.

  1. <a href = "#" rel = "tooltip" title = "premye tooltip" > pase sou mwen </a>

Metòd

$().tooltip(opsyon)

Tache yon moun ki okipe enfòmasyon sou yon koleksyon eleman.

.tooltip('montre')

Revele konsèy zouti yon eleman.

  1. $ ( '#eleman' ). ti konsèy ( 'montre' )

.tooltip('kache')

Kache konsèy yon eleman.

  1. $ ( '#eleman' ). ti konsèy ( 'kache' )

.tooltip('toggle')

Aktivite konsèy zouti yon eleman.

  1. $ ( '#eleman' ). konsèy zouti ( 'bale' )

Konsènan popovers

Ajoute ti kouvri kontni, tankou sa yo sou iPad a, nan nenpòt eleman pou lojman segondè enfòmasyon.

* Egzije Tooltip yo dwe enkli

Telechaje fichye a

Egzanp hover popover

Pase sou bouton an pou deklanche popover a.


Sèvi ak bootstrap-popover.js

Pèmèt popovers via javascript:

  1. $ ( '#egzanp' ). popover ( opsyon )

Opsyon

Non kalite default deskripsyon
animasyon booleyen vre aplike yon tranzisyon fade css nan konsèy la
plasman fisèl|fonksyon 'dwa' ki jan yo pozisyon popover a - tèt | anba | kite | dwa
seleksyon fisèl fo si yo bay yon seleksyon, objè konsèy yo pral delege nan sib yo espesifye
deklanche fisèl 'plane' kijan tooltip deklanche - hover | konsantre | manyèl
tit fisèl | fonksyon '' valè tit default si atribi `title` pa prezan
kontni fisèl | fonksyon '' valè kontni default si atribi `data-content` pa prezan
reta nimewo | objè 0

reta montre ak kache popover a (ms) - pa aplike nan kalite deklanche manyèl

Si yo bay yon nimewo, reta aplike pou tou de kache/montre

Estrikti objè se:delay: { show: 500, hide: 100 }

Tèt leve! Opsyon pou popovers endividyèl yo ka altènativman espesifye atravè itilizasyon atribi done yo.

Marke

Pou rezon pèfòmans, Tooltip ak Popover done-apis yo patisipe nan. Si ou ta renmen itilize yo jis presize yon opsyon seleksyon.

Metòd

$().popover(opsyon)

Inisyalize popovers pou yon koleksyon eleman.

.popover('montre')

Revele yon popover eleman.

  1. $ ( '#eleman' ). popover ( 'montre' )

.popover('kache')

Kache yon popover eleman.

  1. $ ( '#eleman' ). popover ( 'kache' )

.popover('toggle')

Baskile yon popover eleman.

  1. $ ( '#eleman' ). popover ( 'toggle' )

Konsènan alèt

Plugin alèt la se yon ti klas pou ajoute fonksyonalite fèmen nan alèt yo.

Telechaje

Egzanp alèt

Plugin alèt la ap travay sou mesaj alèt regilye yo, epi bloke mesaj yo.

Sentespri guacamole! Pi bon tcheke ou tèt ou, ou pa gade twò bon.

Oh menen! Ou gen yon erè!

Chanje sa ak sa epi eseye ankò. Men, li pa gen okenn komodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Pran aksyon sa a Oswa fè sa


Sèvi ak bootstrap-alert.js

Pèmèt ranvwa yon alèt via javascript:

  1. $ ( ".alèt" ). alèt ()

Marke

Jis ajoute data-dismiss="alert"nan bouton fèmen ou a otomatikman bay yon fonksyonalite fèmen alèt.

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

Metòd

$().alèt()

Anvlope tout alèt ak fonksyonalite fèmen. Pou gen alèt ou yo anime lè yo fèmen, asire w ke yo gen .fadeak .inklas la deja aplike nan yo.

.alèt('fèmen')

Fèmen yon alèt.

  1. $ ( ".alèt" ). alèt ( 'fèmen' )

Evènman

Klas alèt Bootstrap a ekspoze kèk evènman pou branche nan fonksyonalite alèt.

Evènman Deskripsyon
fèmen Evènman sa a dife imedyatman lè yo closerele metòd egzanp lan.
fèmen Evènman sa a revoke lè alèt la fèmen (ap tann tranzisyon css fini).
  1. $ ( '#alèt mwen an' ). bind ( 'fèmen' , fonksyon () {
  2. // fè yon bagay…
  3. })

Konsènan

Fè plis ak bouton. Kontwole eta bouton oswa kreye gwoup bouton pou plis konpozan tankou ba zouti.

Telechaje fichye a

Egzanp itilizasyon

Sèvi ak Plugin bouton pou eta ak baskil.

Stateful
Single baskile
Case
Radyo

Sèvi ak bootstrap-button.js

Aktive bouton via javascript:

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

Marke

Done atribi yo se entegral nan plugin bouton an. Tcheke kòd egzanp ki anba a pou divès kalite maketing yo.

  1. <!-- Ajoute data-toggle="bouton" pou aktive baskile sou yon sèl bouton -->
  2. <button class = "btn" data-toggle = "bouton" > Single Toggle </button>
  3.  
  4. <!-- Ajoute data-toggle="buttons-checkbox" pou chanje style kaz sou btn-group -->
  5. <div class = "btn-group" data-toggle = "bouton-checkbox" >
  6. <button class = "btn" > Goch </button>
  7. <button class = "btn" > Mwayen </button>
  8. <button class = "btn" > Dwa </button>
  9. </div>
  10.  
  11. <!-- Ajoute data-toggle="buttons-radio" pou chanje style radyo sou btn-group -->
  12. <div class = "btn-group" data-toggle = "bouton-radio" >
  13. <button class = "btn" > Goch </button>
  14. <button class = "btn" > Mwayen </button>
  15. <button class = "btn" > Dwa </button>
  16. </div>

Metòd

$().bouton('toggle')

Baskile pouse eta a. Bay bouton an aparans ke li te aktive.

Tèt leve! Ou ka pèmèt oto baskile nan yon bouton lè w itilize data-toggleatribi a.
  1. <button class = "btn" data-toggle = "bouton" > </button>

$().bouton('chaje')

Mete eta bouton an chaj - enfim bouton ak echanj tèks nan tèks chaje. Tèks chaje yo ta dwe defini sou eleman bouton an lè l sèvi avèk atribi done yo data-loading-text.

  1. <button class = "btn" data-loading-text = "chaje bagay..." > ... </button>
Tèt leve! Firefox pèsiste eta andikape nan tout chaj paj yo . Yon solisyon pou sa a se sèvi ak autocomplete="off".

$().bouton('reset')

Reyajiste eta bouton - chanje tèks nan tèks orijinal la.

$().bouton(string)

Reyajiste eta bouton - echanj tèks nan nenpòt eta done defini tèks.

  1. <button class = "btn" data-complete-text = "fini!" > ... </boutton>
  2. <script>
  3. $ ( '.btn' ). bouton ( 'konplè' )
  4. </script>

Konsènan

Jwenn estil de baz ak sipò fleksib pou konpozan rabat tankou akòdeyon ak navigasyon.

Telechaje fichye a

* Egzije Plugin Tranzisyon yo dwe enkli.

Egzanp akòdeyon

Sèvi ak plugin efondreman an, nou bati yon senp widget style akòdeyon:

Anim pariatur cliche reprehenderit, enim eiusmod high life akize Terry Richardson ak kalma. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Kamyon manje kinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, yo mete yon zwazo sou li kalma sèl-orijin kafe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur bouche vice lomo. Leggings occaecat atizanal byè fèm-a-tab, anvan tout koreksyon abako ayestetik sent nesciunt ou pwobableman pa te tande pale de yo accusamus labore dirab VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life akize Terry Richardson ak kalma. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Kamyon manje kinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, yo mete yon zwazo sou li kalma sèl-orijin kafe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur bouche vice lomo. Leggings occaecat atizanal byè fèm-a-tab, anvan tout koreksyon abako ayestetik sent nesciunt ou pwobableman pa te tande pale de yo accusamus labore dirab VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life akize Terry Richardson ak kalma. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Kamyon manje kinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, yo mete yon zwazo sou li kalma sèl-orijin kafe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur bouche vice lomo. Leggings occaecat atizanal byè fèm-a-tab, anvan tout koreksyon abako ayestetik sent nesciunt ou pwobableman pa te tande pale de yo accusamus labore dirab VHS.

Sèvi ak bootstrap-collapse.js

Pèmèt via javascript:

  1. $ ( ".effondreman" ). tonbe ()

Opsyon

Non kalite default deskripsyon
paran seleksyon fo Si seleksyon an, lè sa a tout eleman plimakab anba paran espesifye yo pral fèmen lè yo montre atik sa a pliable. (menm jan ak konpòtman akòdeyon tradisyonèl)
baskile booleyen vre Aktivite eleman ki rabat sou envokasyon

Marke

Jis ajoute data-toggle="collapse"ak yon data-targeteleman pou otomatikman bay kontwòl yon eleman ki rabat. Atribi a data-targetaksepte yon seleksyon CSS pou aplike efondreman an. Asire ou ke ou ajoute klas collapsela nan eleman ki rabat. Si ou ta renmen li louvri defo, ajoute klas adisyonèl la in.

  1. <button class = "btn btn-danger" data-toggle = "effondreman " data-target = "#demo" >
  2. senp pliable
  3. </boutton>
  4.  
  5. <div id = "demo" klas = "effondreman nan" > </div>
Tèt leve! Pou ajoute jesyon gwoup ki sanble ak akòdeyon nan yon kontwòl ki kapab retire, ajoute atribi done yo data-parent="#selector". Al gade nan Demo a pou wè sa a an aksyon.

Metòd

.effondreman (opsyon)

Aktive kontni ou kòm yon eleman plim. Aksepte yon opsyon opsyonèl object.

  1. $ ( '#myCollapsible' ). tonbe ({
  2. toggle : fo
  3. })

.effondre ('bale')

Baskile yon eleman ki rabat pou montre oswa kache.

.collapse('montre')

Montre yon eleman rabat.

.effondre ('kache')

Kache yon eleman ki rabat.

Evènman

Klas efondreman Bootstrap a ekspoze kèk evènman pou branche nan fonksyonalite efondreman.

Evènman Deskripsyon
montre Evènman sa a dife imedyatman lè yo showrele metòd egzanp lan.
montre Evènman sa a revoke lè yon eleman tonbe vin vizib pou itilizatè a (ap tann pou tranzisyon CSS fini).
kache Evènman sa a te tire imedyatman lè yo hidete rele metòd la.
kache Evènman sa a revoke lè yon eleman tonbe kache nan men itilizatè a (ap tann pou tranzisyon CSS fini).
  1. $ ( '#myCollapsible' ). on ( 'kache' , fonksyon () {
  2. // fè yon bagay…
  3. })

Konsènan

Yon plugin debaz, fasil pwolonje pou kreye byen vit tipaheads elegant ak nenpòt ki antre tèks fòm.

Telechaje fichye a

Egzanp

Kòmanse tape nan jaden ki anba a pou montre rezilta tape yo.


Sèvi ak bootstrap-typeahead.js

Rele typeahead via javascript:

  1. $ ( '.typeahead' ). tape devan ()

Opsyon

Non kalite default deskripsyon
sous etalaj [ ] Sous done pou rechèch kont.
atik yo nimewo 8 Kantite maksimòm atik pou montre nan deroule a.
matcher fonksyon ka ensansib Metòd yo itilize pou detèmine si yon rechèch matche ak yon atik. Aksepte yon sèl agiman, itemkont ki teste rechèch la. Aksede rechèch aktyèl la avèk this.query. Retounen yon boolean truesi rechèch se yon matche ak.
triye fonksyon matche egzak,
ka sansib,
ka ensansib
Metòd yo itilize pou klase rezilta autocomplete. Aksepte yon sèl agiman itemsepi li gen sijè ki abòde lan egzanp typeahead la. Referans rechèch aktyèl la ak this.query.
en fonksyon mete aksan sou tout alimèt default Metòd yo itilize pou mete aksan sou rezilta autocomplete. Aksepte yon sèl agiman itemepi li gen sijè ki abòde lan egzanp typeahead la. Ta dwe retounen html.

Marke

Ajoute atribi done pou anrejistre yon eleman ak fonctionnalités typeahead.

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

Metòd

.typeahead(opsyon)

Inisyalize yon opinyon ak yon typeahead.