Javascript för Bootstrap

Väck Bootstraps komponenter till liv - nu med 12 anpassade jQuery - plugins.

Modals

En strömlinjeformad, men flexibel, version av det traditionella javascript-modala plugin-programmet med endast den minsta nödvändiga funktionaliteten och smarta standardinställningar.

Dropdowns

Lägg till rullgardinsmenyer till nästan vad som helst i Bootstrap med denna enkla plugin. Bootstrap har fullständigt stöd för rullgardinsmenyn i navigeringsfältet, flikarna och pillren.

Scrollspy

Använd scrollspy för att automatiskt uppdatera länkarna i ditt navigeringsfält för att visa den aktuella aktiva länken baserat på rullningsposition.

Växlingsbara flikar

Använd detta plugin för att göra flikar och piller mer användbara genom att låta dem växla mellan flikar med lokalt innehåll.

Verktygstips

En ny version av jQuery Tipsy-plugin, Tooltips förlitar sig inte på bilder – de använder CSS3 för animationer och dataattribut för lokal titellagring.

Popovers *

Lägg till små överlagringar av innehåll, som de på iPad, till valfritt element för att hysa sekundär information.

* Kräver att verktygstips ingår

Varningsmeddelanden

Alert-pluginet är en liten klass för att lägga till nära funktionalitet till varningar.

Knappar

Gör mer med knappar. Kontrollera knapptillstånd eller skapa grupper av knappar för fler komponenter som verktygsfält.

Kollaps

Få basstilar och flexibelt stöd för hopfällbara komponenter som dragspel och navigering.

Karusell

Skapa en merry-go-round av allt innehåll du vill ge ett interaktivt bildspel med innehåll.

Skriv framåt

Ett enkelt, enkelt utökat plugin för att snabbt skapa eleganta skrivhuvuden med vilken form som helst.

Övergångar *

För enkla övergångseffekter, inkludera bootstrap-transition.js en gång för att glida in modaler eller tona ut varningar.

* Krävs för animering i plugins

Se upp! Alla javascript-plugins kräver den senaste versionen av jQuery.

Om modaler

En strömlinjeformad, men flexibel, version av det traditionella javascript-modala plugin-programmet med endast den minsta nödvändiga funktionaliteten och smarta standardinställningar.

Nedladdning fil

Statiskt exempel

Nedan är en statiskt renderad modal.

Live-demo

Växla en modal via javascript genom att klicka på knappen nedan. Den kommer att glida ned och tona in från toppen av sidan.

Starta demomodal

Använder bootstrap-modal

Ring modalen via javascript:

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

alternativ

namn typ standard beskrivning
bakgrund booleskt Sann Inkluderar ett modal-bakgrundselement. Alternativt, ange staticför en bakgrund som inte stänger modalen vid klick.
tangentbord booleskt Sann Stänger modalen när escape-tangenten trycks ned
show booleskt Sann Visar modalen när den initieras.

Pålägg

Du kan enkelt aktivera modaler på din sida utan att behöva skriva en enda rad med javascript. Ställ bara in data-toggle="modal"på ett kontrollelement med ett data-target="#foo"eller href="#foo"som motsvarar ett modalt element-id, och när du klickar på det kommer det att starta din modal.

För att lägga till alternativ till din modala instans, inkludera dem bara som ytterligare dataattribut på antingen kontrollelementet eller själva modala markeringen.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Starta Modal </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "stäng" data-dismiss = "modal" > × </button>
  4. <h3> Modal rubrik </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> En fin kropp... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Stäng </a>
  11. <a href = "#" class = "btn btn-primary" > Spara ändringar </a>
  12. </div>
  13. </div>
Se upp! Om du vill att din modal ska animeras in och ut, lägg bara till en .fadeklass till .modalelementet (se demon för att se detta i aktion) och inkludera bootstrap-transition.js.

Metoder

.modal(alternativ)

Aktiverar ditt innehåll som en modal. Accepterar ett valfritt alternativ object.

  1. $ ( '#myModal' ). modal ({
  2. tangentbord : falskt
  3. })

.modal('toggle')

Växlar manuellt en modal.

  1. $ ( '#myModal' ). modal ( 'växla' )

.modal('show')

Öppnar en modal manuellt.

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

.modal('hide')

Döljer en modal manuellt.

  1. $ ( '#myModal' ). modal ( 'gömma' )

evenemang

Bootstraps modalklass avslöjar några händelser för att koppla in modal funktionalitet.

Händelse Beskrivning
show Denna händelse aktiveras omedelbart när showinstansmetoden anropas.
visad Den här händelsen aktiveras när modalen har gjorts synlig för användaren (väntar på att css-övergångar ska slutföras).
Dölj Denna händelse aktiveras omedelbart när hideinstansmetoden har anropats.
dold Den här händelsen aktiveras när modalen har döljts för användaren (väntar på att css-övergångar ska slutföras).
  1. $ ( '#myModal' ). on ( 'dold' , function () {
  2. // göra någonting…
  3. })

ScrollSpy-pluginen är till för att automatiskt uppdatera navigeringsmål baserat på rullningsposition.

Nedladdning fil

Exempel på navigeringsfält med scrollspy

Bläddra i området nedan och se navigeringsuppdateringen. Underposterna i rullgardinsmenyn kommer också att markeras. Försök!

@fett

Annonsleggings keytar, brunch-id art party dolor labore. Pitchfork yr enim lo-fi innan de sålde slut qui. Tumblr cykelrättigheter från jord till bord oavsett. Anim keffiyeh carles kofta. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jeans shorts, williamsburg hoodie minim qui du förmodligen inte har hört talas om dem et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tatuerade accusamus, cred ironi biodiesel keffiyeh hantverkare ullamco consequat.

@mdo

Veniam marfa mustasch skateboard, adipisicing fugiat velit höggaffelskägg. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat fyra loko nisi, ea helvetica nulla carles. Tatuerad cosbytröja food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles icke-estetisk övning quis gentrify. Brooklyn adipisicing hantverksöl vice keytar deserunt.

ett

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS är adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, hållbar delectus consectetur fanny pack iphone.

två

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 blogg, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche ironi, thundercats du förmodligen inte har hört talas om dem consequat hoodie glutenfri lo-fi fap aliquip. Labore elit placeat innan de sålde slut, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan hantverksöl seitan färdiggjord velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Använder bootstrap-scrollspy.js

Ring scrollspy via javascript:

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

Pålägg

För att enkelt lägga till scrollspy-beteende till din toppfältsnavigering, lägg bara data-spy="scroll"till elementet du vill spionera på (oftast är detta kroppen).

  1. <body data-spy = "scroll" > ... </body>
Se upp! Navbar-länkar måste ha lösbara id-mål. Till exempel måste ett <a href="#home">home</a>måste motsvara något i dom som <div id="home"></div>.

Metoder

.scrollspy('refresh')

När du använder scrollspy i kombination med att lägga till eller ta bort element från DOM, måste du anropa uppdateringsmetoden så här:

  1. $ ( '[data-spy="scroll"]' ). varje ( funktion () {
  2. var $spy = $ ( detta ). scrollspy ( 'uppdatera' )
  3. });

alternativ

namn typ standard beskrivning
offset siffra 10 Pixlar att förskjuta från toppen vid beräkning av rullningsposition.

evenemang

Händelse Beskrivning
Aktivera Denna händelse utlöses när ett nytt objekt aktiveras av scrollspy.

Denna plugin lägger till snabb, dynamisk flik- och pillerfunktion för övergång genom lokalt innehåll.

Nedladdning fil

Exempel flikar

Klicka på flikarna nedan för att växla mellan dolda rutor, även via rullgardinsmenyer.

Raw denim du förmodligen inte har hört talas om dem jeans shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustasch cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby tröja eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan amerikanska kläder, slaktare 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.


Använder bootstrap-tab.js

Aktivera flikar med flikar via javascript (varje flik måste aktiveras individuellt):

  1. $ ( '#myTab a' ). klicka ( funktion ( e ) {
  2. e . preventDefault ();
  3. $ ( detta ). tab ( 'visa' );
  4. })

Du kan aktivera enskilda flikar på flera sätt:

  1. $ ( '#myTab a[href="#profile"]' ). tab ( 'visa' ); // Välj flik efter namn
  2. $ ( '#myTab a:first' ). tab ( 'visa' ); // Välj första fliken
  3. $ ( '#myTab a:last' ). tab ( 'visa' ); // Välj sista fliken
  4. $ ( '#myTab li:eq(2) a' ). tab ( 'visa' ); // Välj tredje flik (0-indexerad)

Pålägg

Du kan aktivera en navigering med flikar eller piller utan att skriva något javascript genom att helt enkelt ange data-toggle="tab"eller data-toggle="pill"på ett element. Om du lägger till navklasserna nav-tabsoch på fliken ultillämpas bootstrap-flikens stil.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Hem </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Meddelanden </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Inställningar </a></li>
  6. </ul>

Metoder

$().tab

Aktiverar ett flikelement och innehållsbehållare. Tab ska ha antingen en data-targeteller en hrefinriktning på en containernod i DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Hem </a></li>
  3. <li><a href = "#profile" > Profil </a></li>
  4. <li><a href = "#messages" > Meddelanden </a></li>
  5. <li><a href = "#settings" > Inställningar </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-innehåll" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "meddelanden" > ... </div>
  12. <div class = "tab-pane" id = "inställningar" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( function () {
  17. $ ( '#myTab a:last' ). tab ( 'visa' );
  18. })
  19. </script>

evenemang

Händelse Beskrivning
show Den här händelsen aktiveras vid flikvisning, men innan den nya fliken har visats. Använd event.targetoch event.relatedTargetför att rikta in den aktiva fliken respektive den föregående aktiva fliken (om tillgänglig).
visad Den här händelsen aktiveras vid flikvisning efter att en flik har visats. Använd event.targetoch event.relatedTargetför att rikta in den aktiva fliken respektive den föregående aktiva fliken (om tillgänglig).
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'visas' , funktion ( e ) {
  2. e . mål // aktiverad flik
  3. e . relatedTarget // föregående flik
  4. })

Om verktygstips

Inspirerad av det utmärkta plugin-programmet jQuery.tipsy skrivet av Jason Frame; Verktygstips är en uppdaterad version som inte förlitar sig på bilder, använder css3 för animationer och dataattribut för lokal titellagring.

Nedladdning fil

Exempel på användning av Tooltips

Håll muspekaren över länkarna nedan för att se verktygstips:

Tighta byxor nästa nivå keffiyeh du har förmodligen inte hört talas om dem. Photo booth skägg rå denim boktryck vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie hållbara quinoa 8-bitars amerikanska kläder har en frotté richardson vinyl chambray. Beard stumptown, koftor banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, fyra loko mcsweeney's cleanse vegan chambray. En riktigt ironisk hantverkare oavsett keytar , scenester farm-to-table banksy Austin twitter handtag freegan cred raw denim enkaffe viral.


Använder bootstrap-tooltip.js

Aktivera verktygstipset via javascript:

  1. $ ( '#exempel' ). verktygstips ( alternativ )

alternativ

namn typ standard beskrivning
animation booleskt Sann tillämpa en css-fade-övergång på verktygstipset
placering sträng|funktion 'topp' hur man placerar verktygstipset - topp | botten | vänster | höger
väljare sträng falsk Om en väljare tillhandahålls kommer verktygstipsobjekt att delegeras till de angivna målen.
titel sträng | fungera '' standardvärde för titel om "title"-taggen inte finns
utlösare sträng 'sväva' hur verktygstips triggas - håll muspekaren | fokus | manuell
dröjsmål nummer | objekt 0

fördröjning av att visa och dölja verktygstipset (ms) - gäller inte manuell triggertyp

Om ett nummer tillhandahålls tillämpas fördröjning på både hide/show

Objektstrukturen är:delay: { show: 500, hide: 100 }

Se upp! Alternativ för individuella verktygstips kan alternativt specificeras genom användning av dataattribut.

Pålägg

Av prestandaskäl är verktygstips och Popover-data-apis aktiverade. Om du vill använda dem anger du bara ett väljaralternativ.

  1. <a href = "#" rel = "tooltip" title = "första verktygstips" > håll muspekaren över mig </a>

Metoder

$().tooltip(options)

Bifogar en verktygstipshanterare till en elementsamling.

.tooltip('show')

Visar ett elements verktygstips.

  1. $ ( '#element' ). verktygstips ( 'visa' )

.tooltip('hide')

Döljer ett elements verktygstips.

  1. $ ( '#element' ). verktygstips ( 'dölj' )

.tooltip('toggle')

Växlar ett elements verktygstips.

  1. $ ( '#element' ). verktygstips ( 'växla' )

Om popovers

Lägg till små överlagringar av innehåll, som de på iPad, till valfritt element för att hysa sekundär information.

* Kräver verktygstips för att vara med

Nedladdning fil

Exempel svävande popover

Håll muspekaren över knappen för att utlösa popover.


Använder bootstrap-popover.js

Aktivera popovers via javascript:

  1. $ ( '#exempel' ). popover ( alternativ )

alternativ

namn typ standard beskrivning
animation booleskt Sann tillämpa en css-fade-övergång på verktygstipset
placering sträng|funktion 'höger' hur man placerar popover - toppen | botten | vänster | höger
väljare sträng falsk om en väljare tillhandahålls kommer verktygstipsobjekt att delegeras till de angivna målen
utlösare sträng 'sväva' hur verktygstips triggas - håll muspekaren | fokus | manuell
titel sträng | fungera '' standardvärde för titel om "title"-attributet inte finns
innehåll sträng | fungera '' standardvärde för innehåll om "data-content"-attributet inte finns
dröjsmål nummer | objekt 0

fördröjning av att visa och dölja popover (ms) - gäller inte manuell triggertyp

Om ett nummer tillhandahålls tillämpas fördröjning på både hide/show

Objektstrukturen är:delay: { show: 500, hide: 100 }

Se upp! Alternativ för individuella popovers kan alternativt specificeras genom användning av dataattribut.

Pålägg

Av prestandaskäl är verktygstips och Popover-data-apis aktiverade. Om du vill använda dem anger du bara ett väljaralternativ.

Metoder

$().popover(alternativ)

Initierar popovers för en elementsamling.

.popover('show')

Avslöjar en popover för element.

  1. $ ( '#element' ). popover ( 'visa' )

.popover('hide')

Döljer en popover för element.

  1. $ ( '#element' ). popover ( 'gömma' )

.popover('toggle')

Växlar en popover för element.

  1. $ ( '#element' ). popover ( 'växla' )

Om varningar

Alert-pluginet är en liten klass för att lägga till nära funktionalitet till varningar.

Ladda ner

Exempel på varningar

Varningspluginet fungerar på vanliga varningsmeddelanden och blockerar meddelanden.

Heliga guacamole! Bäst kolla dig själv, du ser inte för bra ut.

Åh knäpp! Du har ett fel!

Ändra det och det och försök igen. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Vidta den här åtgärden Eller gör så här


Använder bootstrap-alert.js

Aktivera avvisande av en varning via javascript:

  1. $ ( ".alert" ). varning ()

Pålägg

Lägg bara data-dismiss="alert"till i din stängningsknapp för att automatiskt ge en varningsfunktionalitet för stängning.

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

Metoder

$().alert()

Omsluter alla varningar med nära funktionalitet. För att få dina varningar att animeras när de är stängda, se till att de har klassen .fadeoch .inredan tillämpade på dem.

.alert('stäng')

Stänger en varning.

  1. $ ( ".alert" ). varning ( 'stäng' )

evenemang

Bootstraps varningsklass avslöjar några händelser för att koppla in varningsfunktioner.

Händelse Beskrivning
stänga Denna händelse aktiveras omedelbart när closeinstansmetoden anropas.
stängd Den här händelsen utlöses när varningen har stängts (väntar på att css-övergångar ska slutföras).
  1. $ ( '#my-alert' ). bind ( 'stängd' , funktion () {
  2. // göra någonting…
  3. })

Handla om

Gör mer med knappar. Kontrollera knapptillstånd eller skapa grupper av knappar för fler komponenter som verktygsfält.

Nedladdning fil

Exempel på användningar

Använd knapparnas plugin för tillstånd och växlar.

Statlig
Enkel växling
Kryssruta
Radio

Använder bootstrap-button.js

Aktivera knappar via javascript:

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

Pålägg

Dataattribut är integrerade i knappens plugin. Kolla in exempelkoden nedan för de olika uppmärkningstyperna.

  1. <!-- Lägg till data-toggle="button" för att aktivera växling på en enda knapp -->
  2. <button class = "btn" data-toggle = "button" > Single Toggle </button>
  3.  
  4. <!-- Lägg till data-toggle="buttons-checkbox" för växling av kryssrutestil på btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Vänster </button>
  7. <button class = "btn" > Mellan </button>
  8. <button class = "btn" > Höger </button>
  9. </div>
  10.  
  11. <!-- Lägg till data-toggle="buttons-radio" för att växla radiostil på btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Vänster </button>
  14. <button class = "btn" > Mellan </button>
  15. <button class = "btn" > Höger </button>
  16. </div>

Metoder

$().button('toggle')

Växlar push-tillstånd. Ger knappen intrycket att den har aktiverats.

Se upp! Du kan aktivera automatisk växling av en knapp genom att använda data-toggleattributet.
  1. <button class = "btn" data-toggle = "button" > </button>

$().button('laddar in')

Ställer in knappstatus till laddning - inaktiverar knapp och byter text till laddningstext. Laddande text ska definieras på knappelementet med hjälp av dataattributet data-loading-text.

  1. <button class = "btn" data-loading-text = "laddar in saker..." > ... </button>
Se upp! Firefox behåller det inaktiverade tillståndet över sidhämtning . En lösning för detta är att använda autocomplete="off".

$().button('reset')

Återställer knappstatus - byter text till originaltext.

$().button(sträng)

Återställer knappstatus - byter text till valfritt datadefinierat textläge.

  1. <button class = "btn" data-complete-text = "finished!" > ... </knapp>
  2. <script>
  3. $ ( '.btn' ). knapp ( 'komplett' )
  4. </script>

Handla om

Få basstilar och flexibelt stöd för hopfällbara komponenter som dragspel och navigering.

Nedladdning fil

* Kräver att Transitions-pluginet ingår.

Exempel på dragspel

Med hjälp av kollaps-pluginen byggde vi en enkel dragspelstil-widget:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua sätta en fågel på det bläckfisk enkaffe kaffe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, hantverksöl labore wes anderson cred nesciunt sapiente ea proident. Annons vegan excepteur butcher vice lomo. Leggings occaecat hantverksöl från jord till bord, rå denim estetisk synth nesciunt du förmodligen inte har hört talas om dem accusamus labore hållbar VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua sätta en fågel på det bläckfisk enkaffe kaffe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, hantverksöl labore wes anderson cred nesciunt sapiente ea proident. Annons vegan excepteur butcher vice lomo. Leggings occaecat hantverksöl från jord till bord, rå denim estetisk synth nesciunt du förmodligen inte har hört talas om dem accusamus labore hållbar VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua sätta en fågel på det bläckfisk enkaffe kaffe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, hantverksöl labore wes anderson cred nesciunt sapiente ea proident. Annons vegan excepteur butcher vice lomo. Leggings occaecat hantverksöl från jord till bord, rå denim estetisk synth nesciunt du förmodligen inte har hört talas om dem accusamus labore hållbar VHS.

Använder bootstrap-collapse.js

Aktivera via javascript:

  1. $ ( ".kollapse" ). kollapsa ()

alternativ

namn typ standard beskrivning
förälder väljare falsk Om väljaren kommer alla hopfällbara element under den angivna överordnade att stängas när detta hopfällbara objekt visas. (liknar traditionellt dragspelsbeteende)
växla booleskt Sann Växlar det hopfällbara elementet vid anrop

Pålägg

Lägg bara till data-toggle="collapse"och ett data-targettill-element för att automatiskt tilldela kontroll över ett hopfällbart element. Attributet data-targetaccepterar en css-väljare att tillämpa komprimeringen på. Se till att lägga till klassen collapsei det hopfällbara elementet. Om du vill att den ska öppnas som standard lägger du till den extra klassen in.

  1. <button class = "btn btn-danger" data-toggle = "kollaps" data-target = "#demo" >
  2. enkel hopfällbar
  3. </button>
  4.  
  5. <div id = "demo" class = "kollaps in" > </div>
Se upp! Lägg till dataattributet för att lägga till dragspelsliknande grupphantering till en hopfällbar kontroll data-parent="#selector". Se demon för att se detta i aktion.

Metoder

.collapse(alternativ)

Aktiverar ditt innehåll som ett hopfällbart element. Accepterar ett valfritt alternativ object.

  1. $ ( '#myCollapsible' ). kollapsa ({
  2. växla : falskt
  3. })

.collapse('toggle')

Växlar ett hopfällbart element till att visas eller döljas.

.collapse('show')

Visar ett hopfällbart element.

.collapse('hide')

Döljer ett hopfällbart element.

evenemang

Bootstraps kollapsklass avslöjar några händelser för att koppla in kollapsfunktionalitet.

Händelse Beskrivning
show Denna händelse aktiveras omedelbart när showinstansmetoden anropas.
visad Den här händelsen utlöses när ett kollapselement har gjorts synligt för användaren (väntar på att css-övergångar ska slutföras).
Dölj Denna händelse aktiveras omedelbart när hidemetoden har anropats.
dold Den här händelsen utlöses när ett kollapselement har dolts för användaren (väntar på att css-övergångar ska slutföras).
  1. $ ( '#myCollapsible' ). on ( 'dold' , function () {
  2. // göra någonting…
  3. })

Handla om

Ett enkelt, enkelt utökat plugin för att snabbt skapa eleganta skrivhuvuden med vilken form som helst.

Nedladdning fil

Exempel

Börja skriva i fältet nedan för att visa skrivresultaten.


Använder bootstrap-typeahead.js

Ring typahead via javascript:

  1. $ ( '.typeahead' ). typahead ()

alternativ

namn typ standard beskrivning
källa array [ ] Datakällan att fråga mot.
föremål siffra 8 Det maximala antalet objekt som ska visas i rullgardinsmenyn.
matchare fungera fallet okänslig Metoden som används för att avgöra om en fråga matchar ett objekt. Accepterar ett enda argument, itemmot vilket frågan ska testas. Öppna den aktuella frågan med this.query. Returnera en boolean trueom frågan är en matchning.
sorterare fungera exakt matchning,
skiftlägeskänslig,
skiftlägesokänslig
Metod som används för att sortera resultat för autoslutförande. Accepterar ett enda argument itemsoch har omfattningen av typahead-instansen. Referera till den aktuella frågan med this.query.
överstrykningspenna fungera markerar alla standardmatchningar Metod som används för att markera resultat för autoslutförande. Accepterar ett enda argument itemoch har omfattningen av typahead-instansen. Bör returnera html.

Pålägg

Lägg till dataattribut för att registrera ett element med typahead-funktionalitet.

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

Metoder

.typeahead(alternativ)

Initierar en inmatning med ett skrivhuvud.