Bootstrap

Javascript til Bootstrap

Bring Bootstraps komponenter til live - nu med 12 tilpassede jQuery - plugins.

jQuery-plugins Et dusin Bootstrap-plugins for at komme i gang

Heads up! Alle javascript-plugins kræver den nyeste version af jQuery.

Modals bootstrap-modal.js

Om modaler

Et strømlinet, men fleksibelt, tag på det traditionelle javascript modale plugin med kun den minimalt nødvendige funktionalitet og smarte standardindstillinger.

Download fil

Statisk eksempel

Nedenfor er en statisk gengivet modal.

×

Modal header

En fin krop...

Tæt Gem ændringer

Live demo

Skift en modal via javascript ved at klikke på knappen nedenfor. Det vil glide ned og fade ind fra toppen af ​​siden.

Start demomodal

Bruger bootstrap-modal

Ring til modalen via javascript:

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

Muligheder

Navn type Standard beskrivelse
baggrund boolesk rigtigt Indeholder et modal-baggrundselement. Alternativt kan du angive staticfor en baggrund, som ikke lukker modalen ved klik.
tastatur boolesk rigtigt Lukker modalen, når der trykkes på escape-tasten
at vise boolesk rigtigt Viser modal ved initialisering.

Markup

Du kan nemt aktivere modals på din side uden at skulle skrive en eneste linje med javascript. Indstil blot data-toggle="modal"på et controller-element med et data-target="#foo"eller href="#foo"som svarer til et modalt element-id, og når der klikkes på det, vil det starte din modal.

For også at tilføje indstillinger til din modale forekomst, skal du blot inkludere dem som yderligere dataattributter på enten kontrolelementet eller selve modale markup.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Start Modal </a>    
  1. <div class = "modal" id = "myModal" >  
  2.   <div class = "modal-header" > 
  3.     <a class = "close" data-dismiss = "modal" > × </a>  
  4.     <h3> Modal overskrift </h3>
  5.   </div>
  6.   <div class = "modal-body" > 
  7.     <p> Én fin krop... </p>
  8.   </div>
  9.   <div class = "modal-footer" > 
  10.     <a href = "#" class = "btn" > Luk </a>  
  11.     <a href = "#" class = "btn btn-primary" > Gem ændringer </a>  
  12.   </div>
  13. </div>
Heads up! Hvis du vil have din modal til at animere ind og ud, skal du blot tilføje en .fadeklasse til .modalelementet (se demoen for at se dette i aktion) og inkludere bootstrap-transition.js.

Metoder

.modal(valgmuligheder)

Aktiverer dit indhold som en modal. Accepterer en valgfri indstilling object.

  1. $ ( '#myModal' ). modal ({
  2.   tastatur : falsk 
  3. })

.modal('toggle')

Skifter manuelt en modal.

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

.modal('show')

Åbner manuelt en modal.

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

.modal('skjul')

Skjuler manuelt en modal.

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

Begivenheder

Bootstraps modal-klasse afslører nogle få hændelser for tilslutning til modal funktionalitet.

Begivenhed Beskrivelse
at vise Denne hændelse udløses med det samme, når showinstansmetoden kaldes.
vist Denne hændelse udløses, når modalen er blevet gjort synlig for brugeren (vil vente på, at css-overgange er fuldført).
skjule Denne hændelse udløses straks, når hideinstansmetoden er blevet kaldt.
skjult Denne hændelse udløses, når modalen er færdig med at blive skjult for brugeren (vil vente på, at css-overgange er fuldført). 
  1. $ ( '#myModal' ). on ( 'skjult' , funktion () {   
  2.   // gør noget…
  3. })

ScrollSpy bootstrap-scrollspy.js

ScrollSpy-plugin'et er til automatisk opdatering af nav-mål baseret på rulleposition.

Download fil

Eksempel på navbar med scrollspy

Rul ned i området og se navigationsopdateringen. Underelementerne i rullemenuen vil også blive fremhævet. Prøv det!

@fed

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi før de udsolgte qui. Tumblr cykelrettigheder fra jord til bord uanset hvad. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hættetrøje minim qui du sandsynligvis ikke har hørt om dem og cardigan trust fund culpa biodiesel wes anderson æstetiske. Nihil tatoveret accusamus, cred ironi biodiesel keffiyeh håndværker ullamco consequat.

@mdo

Veniam marfa overskæg skateboard, adipisicing fugiat velit pitchfork skæg. Freegan skæg aliqua cupidatat mcsweeney's vero. Cupidatat fire loko nisi, ea helvetica nulla carles. Tatoveret cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles ikke-æstetisk øvelse quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

en

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 er adipisicing. Consectetur nisi DIY minim messenger taske. Cred ex in, sustainable delectus consectetur fanny pack iphone.

to

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. Sapiente synth id assumenda. Locavore sed helvetica cliche ironi, thundercats du sikkert ikke har hørt om dem consequat hættetrøje glutenfri lo-fi fap aliquip. Labore elit placeat før de solgte ud, 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.

Brug af bootstrap-scrollspy.js

Ring til scrollspy via javascript:

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

Markup

For nemt at tilføje scrollspy-adfærd til din topbjælke-navigation, skal du blot tilføje data-spy="scroll"til det element, du vil spionere på (det vil typisk være kroppen).

  1. <body data-spy = "scroll" > ... </body>
Heads up! Navbar-links skal have opløselige id-mål. For eksempel skal et <a href="#home">home</a>must svare til noget i dom som <div id="home"></div>.

Muligheder

Navn type Standard beskrivelse
offset nummer 10 Pixels til forskydning fra toppen ved beregning af rulleposition.

Skiftbare faner bootstrap-tab.js

Dette plugin tilføjer hurtig, dynamisk fane- og pillefunktionalitet til overgang gennem lokalt indhold.

Download fil

Eksempler på faner

Klik på fanerne nedenfor for at skifte mellem skjulte ruder, selv via rullemenuer.

Rå denim du har sikkert ikke hørt om dem jeanshorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegansk helvetica. Reprehenderit slagter retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan amerikansk beklædning, slagter 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.

Brug af bootstrap-tab.js

Aktiver tabulatoriske faner via javascript:

  1. $ ( '#myTab' ). faneblad ( 'vis' )

Markup

Du kan aktivere en fane- eller pillenavigation uden at skrive noget javascript ved blot at angive data-toggle="tab"eller data-toggle="pill"på et element.

  1. <ul class = "nav nav-tabs" > 
  2.   <li><a href = "#home" data-toggle = "tab" > Startside </a></li>  
  3.   <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  4.   <li><a href = "#messages" data-toggle = "tab" > Beskeder </a></li>  
  5.   <li><a href = "#settings" data-toggle = "tab" > Indstillinger </a></li>  
  6. </ul>

Metoder

$().tab

Aktiverer et faneelement og indholdsbeholder. Tab skal have enten et `data-target` eller et `href`, der målretter mod en containernode i dom.

  1. <ul class = "nav nav-tabs" > 
  2.   <li class = "active" ><a href = "#home" > Hjem </a></li>  
  3.   <li><a href = "#profile" > Profil </a></li> 
  4.   <li><a href = "#messages" > Beskeder </a></li> 
  5.   <li><a href = "#settings" > Indstillinger </a></li> 
  6. </ul>
  7.  
  8. <div class = "tab-indhold" > 
  9.   <div class = "tab-pane active" id = "home" > ... </div>  
  10.   <div class = "tab-pane" id = "profile" > ... </div>  
  11.   <div class = "tab-pane" id = "meddelelser" > ... </div>  
  12.   <div class = "tab-pane" id = "indstillinger" > ... </div>  
  13. </div>
  14.  
  15. <script>
  16.   $ ( funktion () {  
  17.     $ ( '.tabs a:last' ). faneblad ( 'vis' )
  18.   })
  19. </script>

Begivenheder

Begivenhed Beskrivelse
at vise Denne begivenhed udløses på faneshow, men før den nye fane er blevet vist. Brug event.targetog event.relatedTargettil at målrette henholdsvis den aktive fane og den forrige aktive fane (hvis tilgængelig).
vist Denne begivenhed udløses på faneshow, efter at en fane er blevet vist. Brug event.targetog event.relatedTargettil at målrette henholdsvis den aktive fane og den forrige aktive fane (hvis tilgængelig). 
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'vist' , funktion ( e ) {   
  2.   e . mål // aktiveret fane
  3.   e . relateret mål // forrige fane
  4. })

Værktøjstip bootstrap-tooltip.js

Om Værktøjstip

Inspireret af det fremragende jQuery.tipsy plugin skrevet af Jason Frame; Værktøjstip er en opdateret version, som ikke er afhængig af billeder, bruger css3 til animationer og dataattributter til lokal titellagring.

Download fil

Eksempel på brug af Tooltips

Hold markøren over nedenstående links for at se værktøjstip:

Stramme bukser næste niveau keffiyeh du har sikkert ikke hørt om dem. Photo booth skæg rå denim bogtryk vegansk messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie bæredygtige quinoa 8-bit amerikansk beklædning har en frotté richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, fire loko mcsweeney's cleanse veganske chambray. En virkelig ironisk håndværker uanset keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin kaffe viral.

Brug af bootstrap-tooltip.js

Udløs værktøjstip via javascript:

  1. $ ( '#eksempel' ). værktøjstip ( muligheder )

Muligheder

Navn type Standard beskrivelse
animation boolesk rigtigt anvende en css-fade-overgang til værktøjstip
placering streng|funktion 'top' hvordan placeres værktøjstip - top | nederst | venstre | ret
vælger snor falsk Hvis der er angivet en vælger, vil værktøjstip-objekter blive uddelegeret til de angivne mål.
titel streng | fungere '' standard titelværdi, hvis "title"-tagget ikke er til stede
udløser snor 'hover' hvordan værktøjstip udløses - svæv | fokus | brugervejledning
forsinke nummer | objekt 0

forsinke visning og skjul værktøjstip (ms)

Hvis et nummer er angivet, anvendes forsinkelse på både skjul/show

Objektstrukturen er:delay: { show: 500, hide: 100 }
Heads up! Valgmuligheder for individuelle værktøjstip kan alternativt specificeres ved brug af dataattributter.

Markup

Af præstationsmæssige årsager er Tooltip og Popover data-api'erne tilvalgt. Hvis du gerne vil bruge dem, skal du blot angive en valgmulighed.

  1. <a href = "#" rel = "værktøjstip" title = "første værktøjstip" > hold markøren over mig </a>

Metoder

$().værktøjstip(indstillinger)

Vedhæfter en værktøjstip-handler til en elementsamling.

.tooltip('vis')

Viser et elements værktøjstip.

  1. $ ( '#element' ). værktøjstip ( 'vis' )

.tooltip('skjul')

Skjuler et elements værktøjstip.

  1. $ ( '#element' ). værktøjstip ( 'skjul' )

.tooltip('toggle')

Skifter et elements værktøjstip.

  1. $ ( '#element' ). værktøjstip ( 'skift' )

Popovers bootstrap-popover.js

Om popovers

Tilføj små overlejringer af indhold, som dem på iPad, til ethvert element for at rumme sekundær information.

* Kræver værktøjstip for at være inkluderet

Download fil

Eksempel på svævepopover

Hold markøren over knappen for at udløse popover.

svæv for popover

Brug af bootstrap-popover.js

Aktiver popovers via javascript:

  1. $ ( '#eksempel' ). popover ( valgmuligheder )

Muligheder

Navn type Standard beskrivelse
animation boolesk rigtigt anvende en css-fade-overgang til værktøjstip
placering streng|funktion 'ret' hvordan placeres popover - top | nederst | venstre | ret
vælger snor falsk hvis der er angivet en vælger, vil værktøjstip-objekter blive uddelegeret til de angivne mål
udløser snor 'hover' hvordan værktøjstip udløses - svæv | fokus | brugervejledning
titel streng | fungere '' standard titelværdi, hvis attributten "title" ikke er til stede
indhold streng | fungere '' standardindholdsværdi, hvis attributten "data-content" ikke er til stede
forsinke nummer | objekt 0

forsinke visning og skjul popover (ms)

Hvis et nummer er angivet, anvendes forsinkelse på både skjul/show

Objektstrukturen er:delay: { show: 500, hide: 100 }
Heads up! Valgmuligheder for individuelle popovers kan alternativt specificeres ved brug af dataattributter.

Markup

Af præstationsmæssige årsager er Tooltip og Popover data-api tilvalgt. Hvis du gerne vil bruge dem, skal du blot angive en vælgerindstilling.

Metoder

$().popover(indstillinger)

Initialiserer popovers for en elementsamling.

.popover('vis')

Afslører en popover for elementer.

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

.popover('skjul')

Skjuler en popover for elementer.

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

.popover('toggle')

Skifter en popover for elementer.

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

Advarselsmeddelelser bootstrap-alert.js

Om alarmer

Advarselsplugin'et er en lillebitte klasse til at tilføje tæt funktionalitet til advarsler.

Hent

Eksempler på advarsler

Advarsler-pluginnet fungerer på almindelige advarselsmeddelelser og blokerer meddelelser.

× Hellige guacamole! Bedst tjek dig selv, du ser ikke for godt ud.
×

Oh snap! Du har en fejl!

Skift dit og dat og prøv igen. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Tag denne handling Eller gør dette

Brug af bootstrap-alert.js

Aktiver afvisning af en advarsel via javascript:

  1. $ ( ".alert" ). advarsel ()

Markup

Du skal bare tilføje data-dismiss="alert"til din lukkeknap for automatisk at give en alarmlukningsfunktionalitet.

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

Metoder

$().alert()

Omslutter alle advarsler med tæt funktionalitet. For at få dine underretninger til at animere, når de er lukket, skal du sørge for, at klassen .fadeog .inklassen allerede er anvendt på dem.

.alert('close')

Lukker en alarm.

  1. $ ( ".alert" ). alarm ( 'luk' )

Begivenheder

Bootstraps advarselsklasse afslører nogle få hændelser for tilslutning til advarselsfunktionalitet.

Begivenhed Beskrivelse
tæt Denne hændelse udløses med det samme, når closeinstansmetoden kaldes.
lukket Denne begivenhed udløses, når alarmen er blevet lukket (vil vente på, at css-overgange er fuldført). 
  1. $ ( '#my-alert' ). bind ( 'lukket' , funktion () {   
  2.   // gør noget…
  3. })

Knapper bootstrap-button.js

Om

Gør mere med knapper. Styr knaptilstande eller opret grupper af knapper til flere komponenter som værktøjslinjer.

Download fil

Eksempler på anvendelser

Brug knappens plugin til tilstande og skifter.

Stateful
Enkelt skifte
Afkrydsningsfelt
Radio

Brug af bootstrap-button.js

Aktiver knapper via javascript:

  1. $ ( '.tabs' ). knap ()

Markup

Dataattributter er integrerede i knap-plugin'et. Tjek eksempelkoden nedenfor for de forskellige opmærkningstyper.

  1. <!-- Tilføj data-toggle="button" for at aktivere skift på en enkelt knap -->
  2. <button class = "btn" data-toggle = "button" > Single Toggle </button>  
  3.  
  4. <!-- Tilføj data-toggle="buttons-checkbox" for at skifte afkrydsningsfeltstil på btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >  
  6.   <button class = "btn" > Venstre </button> 
  7.   <button class = "btn" > Mellem </button> 
  8.   <button class = "btn" > Højre </button> 
  9. </div>
  10.  
  11. <!-- Tilføj data-toggle="buttons-radio" for at skifte til radiostil på btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >  
  13.   <button class = "btn" > Venstre </button> 
  14.   <button class = "btn" > Mellem </button> 
  15.   <button class = "btn" > Højre </button> 
  16. </div>

Metoder

$().button('toggle')

Skifter push-tilstand. Giver knappen det udseende, at den er blevet aktiveret.

Heads up! Du kan aktivere automatisk skift af en knap ved at bruge data-toggleattributten. 
  1. <button class = "btn" data-toggle = "button" > … </button>

$().button('indlæser')

Indstiller knaptilstand til indlæsning - deaktiverer knap og bytter tekst til indlæsning af tekst. Indlæsningstekst skal defineres på knapelementet ved hjælp af dataattributten data-loading-text.

  1. <button class = "btn" data-loading-text = "indlæser ting..." > ... </button>
Heads up! Firefox bevarer den deaktiverede tilstand på tværs af sideindlæsninger . En løsning for dette er at bruge autocomplete="off".

$().button('reset')

Nulstiller knaptilstand - bytter tekst til original tekst.

$().knap(streng)

Nulstiller knaptilstand - skifter tekst til enhver datadefineret teksttilstand.

  1. <button class = "btn" data-complete-text = "færdig!" > ... </button>   
  2. <script>
  3.   $ ( '.btn' ). knap ( 'fuldført' )
  4. </script>

Skjul bootstrap-collapse.js

Om

Få basisstile og fleksibel støtte til sammenklappelige komponenter som harmonikaer og navigation.

Download fil

Eksempel på harmonika

Ved at bruge kollaps-pluginet byggede vi en simpel harmonikastil-widget:

Sammenklappelig gruppeelement #1
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ætte en fugl på det blæksprutte single-oprindelse kaffe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegansk excepteur slagter vice lomo. Leggings occaecat craft beer farm-to-table, rå denim æstetisk synth nesciunt du sikkert ikke har hørt om dem accusamus labore bæredygtig VHS.
Sammenklappelig gruppeelement #2
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ætte en fugl på det blæksprutte single-oprindelse kaffe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegansk excepteur slagter vice lomo. Leggings occaecat craft beer farm-to-table, rå denim æstetisk synth nesciunt du sikkert ikke har hørt om dem accusamus labore bæredygtig VHS.
Sammenklappelig gruppeelement #3
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ætte en fugl på det blæksprutte single-oprindelse kaffe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegansk excepteur slagter vice lomo. Leggings occaecat craft beer farm-to-table, rå denim æstetisk synth nesciunt du sikkert ikke har hørt om dem accusamus labore bæredygtig VHS.

Brug af bootstrap-collapse.js

Aktiver via javascript:

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

Muligheder

Navn type Standard beskrivelse
forælder vælger falsk Hvis vælgeren vil alle sammenklappelige elementer under den angivne overordnede blive lukket, når dette sammenklappelige element vises. (ligner traditionel harmonikaadfærd)
skifte boolesk rigtigt Slår det sammenklappelige element til eller fra ved kald

Markup

Bare tilføj data-toggle="collapse"og et data-targettil element for automatisk at tildele kontrol over et sammenklappeligt element. Attributten data-targetaccepterer en css-vælger at anvende sammenbruddet på. Sørg for at tilføje klassen collapsetil det sammenklappelige element. Hvis du vil have den til at åbne som standard, skal du tilføje den ekstra klasse in.

  1. <button class = "btn btn-danger" data-toggle = "kollapse" data-target = "#demo" >   
  2.   enkel sammenklappelig
  3. </button>
  4.  
  5. <div id = "demo" class = "kollaps ind" > … </div>
Heads up! For at tilføje harmonika-lignende gruppestyring til en sammenklappelig kontrol, skal du tilføje dataattributten data-parent="#selector". Se demoen for at se dette i aktion.

Metoder

.collapse(indstillinger)

Aktiverer dit indhold som et sammenklappeligt element. Accepterer en valgfri indstilling object.

  1. $ ( '#myCollapsible' ). kollaps ({
  2.   skifte : falsk 
  3. })

.collapse('toggle')

Skifter et sammenklappeligt element til at blive vist eller skjult.

.collapse('vis')

Viser et sammenklappeligt element.

.collapse('skjul')

Skjuler et sammenklappeligt element.

Begivenheder

Bootstraps kollapsklasse afslører nogle få hændelser for at tilslutte sig sammenbrudsfunktionalitet.

Begivenhed Beskrivelse
at vise Denne hændelse udløses med det samme, når showinstansmetoden kaldes.
vist Denne hændelse udløses, når et sammenbrudselement er blevet gjort synligt for brugeren (vil vente på, at css-overgange er fuldført).
skjule Denne hændelse udløses straks, når hidemetoden er blevet kaldt.
skjult Denne hændelse udløses, når et sammenbrudselement er blevet skjult for brugeren (vil vente på, at css-overgange er fuldført). 
  1. $ ( '#myCollapsible' ). on ( 'skjult' , funktion () {   
  2.   // gør noget…
  3. })

Typeahead bootstrap-typeahead.js

Om

Et grundlæggende, let udvidet plugin til hurtigt at skabe elegante skrivehoveder med enhver form for tekstinput.

Download fil

Eksempel

Begynd at skrive i feltet nedenfor for at få vist typeahead-resultaterne.

Brug af bootstrap-typeahead.js

Ring til typeahead via javascript:

  1. $ ( '.typeahead' ). typeforud ()

Muligheder

Navn type Standard beskrivelse
kilde array [ ] Datakilden, der skal forespørges mod.
genstande nummer 8 Det maksimale antal elementer, der skal vises i rullemenuen.
matcher fungere sag ufølsom Metoden, der bruges til at bestemme, om en forespørgsel matcher en vare. Accepterer et enkelt argument, itemsom forespørgslen skal testes imod. Få adgang til den aktuelle forespørgsel med this.query. Returner en boolean true, hvis forespørgslen er et match.
sortering fungere eksakt match,
følsomme mellem store og
små bogstaver, ufølsom		 Metode, der bruges til at sortere autofuldførelsesresultater. Accepterer et enkelt argument itemsog har omfanget af typeahead-forekomsten. Referer til den aktuelle forespørgsel med this.query.
highlighter fungere fremhæver alle standardmatches Metode, der bruges til at fremhæve autofuldførelsesresultater. Accepterer et enkelt argument itemog har omfanget af typeahead-forekomsten. Skal returnere html.

Markup

Tilføj dataattributter for at registrere et element med typeahead-funktionalitet.

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

Metoder

.typeahead(indstillinger)

Initialiserer et input med en typeahead.