Javascript for Bootstrap

Gjør Bootstraps komponenter til live – nå med 12 tilpassede jQuery - plugins.

Modaler

En strømlinjeformet, men fleksibel versjon av den tradisjonelle javascript-modale plugin-modulen med bare minimumskravene til funksjonalitet og smarte standardinnstillinger.

Rullegardiner

Legg til rullegardinmenyer til nesten alt i Bootstrap med denne enkle plugin. Bootstrap har full rullegardinmenystøtte i navigasjonslinjen, fanene og pillene.

Scrollspy

Bruk scrollspy for å automatisk oppdatere koblingene i navigasjonslinjen for å vise gjeldende aktive lenke basert på rulleposisjon.

Skiftbare faner

Bruk denne plugin-en til å gjøre faner og piller mer nyttige ved å la dem veksle mellom tabulatorer med lokalt innhold.

Verktøytips

En ny versjon av jQuery Tipsy-plugin, Tooltips er ikke avhengige av bilder – de bruker CSS3 for animasjoner og dataattributter for lokal tittellagring.

Popovers *

Legg til små overlegg av innhold, som de på iPad, til et hvilket som helst element for å inneholde sekundær informasjon.

* Krever at verktøytips er inkludert

Varslingsmeldinger

Varslingspluginen er en liten klasse for å legge til nærfunksjonalitet til varsler.

Knapper

Gjør mer med knapper. Kontroller knappstatuser eller lag grupper med knapper for flere komponenter som verktøylinjer.

Kollapse

Få basisstiler og fleksibel støtte for sammenleggbare komponenter som trekkspill og navigasjon.

Karusell

Lag en karusell av alt innhold du ønsker å gi en interaktiv lysbildefremvisning med innhold.

Skriv inn

En enkel, enkelt utvidet plugin for raskt å lage elegante skrivehoder med hvilken som helst form for tekstinndata.

Overganger *

For enkle overgangseffekter, inkluderer bootstrap-transition.js én gang for å skyve inn modaler eller tone ut varsler.

* Nødvendig for animasjon i plugins

Vær oppmerksom! Alle javascript-plugins krever den nyeste versjonen av jQuery.

Om modaler

En strømlinjeformet, men fleksibel versjon av den tradisjonelle javascript-modale plugin-modulen med bare minimumskravene til funksjonalitet og smarte standardinnstillinger.

Last ned fil

Statisk eksempel

Nedenfor er en statisk gjengitt modal.

Live demo

Bytt en modal via javascript ved å klikke på knappen nedenfor. Den vil gli ned og tone inn fra toppen av siden.

Start demomodal

Bruker bootstrap-modal

Ring modalen via javascript:

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

Alternativer

Navn type misligholde beskrivelse
bakteppe boolsk ekte Inkluderer et modalt bakteppeelement. Alternativt, spesifiser staticfor et bakteppe som ikke lukker modalen ved klikk.
tastatur boolsk ekte Lukker modalen når escape-tasten trykkes
forestilling boolsk ekte Viser modalen når initialisert.

Markup

Du kan enkelt aktivere modaler på siden din uten å måtte skrive en eneste linje med javascript. Bare sett data-toggle="modal"på et kontrollerelement med en data-target="#foo"eller href="#foo"som tilsvarer en modal element-ID, og ​​når du klikker, vil den starte din modal.

For å legge til alternativer til din modale forekomst, inkluderer du dem som ekstra dataattributter på enten kontrollelementet eller selve modale markeringen.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Start Modal </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> Modal overskrift </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" > Lukk </a>
  11. <a href = "#" class = "btn btn-primary" > Lagre endringer </a>
  12. </div>
  13. </div>
Vær oppmerksom! Hvis du vil at din modal skal animere inn og ut, legger du bare til en .fadeklasse til .modalelementet (se demoen for å se dette i aksjon) og inkluderer bootstrap-transition.js.

Metoder

.modal(alternativer)

Aktiverer innholdet ditt som en modal. Godtar et valgfritt alternativ object.

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

.modal('toggle')

Bytter en modal manuelt.

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

.modal('show')

Åpner en modal manuelt.

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

.modal('skjul')

Skjuler en modal manuelt.

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

arrangementer

Bootstraps modalklasse avslører noen få hendelser for å koble til modal funksjonalitet.

Begivenhet Beskrivelse
forestilling Denne hendelsen utløses umiddelbart når showinstansmetoden kalles.
vist Denne hendelsen utløses når modalen er gjort synlig for brukeren (vil vente på at css-overgangene er fullført).
gjemme seg Denne hendelsen utløses umiddelbart når hideinstansmetoden er kalt.
skjult Denne hendelsen utløses når modalen er ferdig skjult for brukeren (vil vente på at css-overgangene er fullført).
  1. $ ( '#myModal' ). ( 'skjult' , funksjon () {
  2. // gjør noe…
  3. })

ScrollSpy-pluginen er for automatisk oppdatering av nav-mål basert på rulleposisjon.

Last ned fil

Eksempel navbar med scrollspy

Bla gjennom området nedenfor og se navigasjonsoppdateringen. Underelementene i rullegardinmenyen vil også bli uthevet. Prøv det!

@fett

Annonse leggings keytar, brunsj id art party dolor labore. Pitchfork yr enim lo-fi før de solgte ut qui. Tumblr gård-til-bord sykkelrettigheter uansett. Anim keffiyeh carles cardigan. Velit seitan mcsweeneys fotoboks 3 wolf moon irure. Cosby genser lomo jean shorts, williamsburg hettegenser minim qui du sannsynligvis ikke har hørt om dem et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tatoverte accusamus, cred ironi biodiesel keffiyeh håndverker ullamco consequat.

@mdo

Veniam marfa bart skateboard, adipisicing fugiat velit høygaffelskjegg. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat fire loko nisi, ea helvetica nulla carles. Tatovert cosby genser food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles ikke estetisk trening 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 bag. 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 blogg, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche ironi, thundercats du sannsynligvis ikke har hørt om dem consequat hettegenser glutenfri lo-fi fap aliquip. Labore elit placeat før de solgte ut, 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.


Bruker bootstrap-scrollspy.js

Ring scrollspy via javascript:

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

Markup

For enkelt å legge til scrollspy-adferd til topplinjenavigasjonen, legg data-spy="scroll"til elementet du vil spionere på (som oftest vil dette være kroppen).

  1. <body data-spy = "scroll" > ... </body>
Vær oppmerksom! Navbar-lenker må ha løsbare id-mål. For eksempel, en <a href="#home">home</a>må svare til noe i dom som <div id="home"></div>.

Metoder

.scrollspy('refresh')

Når du bruker scrollspy i forbindelse med å legge til eller fjerne elementer fra DOM, må du kalle oppdateringsmetoden slik:

  1. $ ( '[data-spy="scroll"]' ). hver ( funksjon () {
  2. var $spy = $ ( dette ). scrollspy ( 'oppdater' )
  3. });

Alternativer

Navn type misligholde beskrivelse
offset Antall 10 Piksler for å forskyve fra toppen ved beregning av rulleposisjon.

arrangementer

Begivenhet Beskrivelse
aktivere Denne hendelsen utløses når et nytt element blir aktivert av scrollspy.

Dette pluginet legger til rask, dynamisk fane- og pillefunksjonalitet for overgang gjennom lokalt innhold.

Last ned fil

Eksempelfaner

Klikk på fanene nedenfor for å veksle mellom skjulte ruter, selv via rullegardinmenyer.

Rå denim du sannsynligvis ikke har hørt om dem jeanshorts Austin. Nesciunt tofu stumptown aliqua, retro synth master rens. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit slakter retro keffiyeh dreamcatcher synth. Cosby genser eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, slakter 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.


Bruker bootstrap-tab.js

Aktiver tabbare faner via javascript (hver fane må aktiveres individuelt):

  1. $ ( '#myTab a' ). klikk ( funksjon ( e ) {
  2. e . preventDefault ();
  3. $ ( dette ). tab ( 'vis' );
  4. })

Du kan aktivere individuelle faner på flere måter:

  1. $ ( '#myTab a[href="#profile"]' ). tab ( 'vis' ); // Velg fane etter navn
  2. $ ( '#myTab a:first' ). tab ( 'vis' ); // Velg første fane
  3. $ ( '#myTab a:last' ). tab ( 'vis' ); // Velg siste fane
  4. $ ( '#myTab li:eq(2) a' ). tab ( 'vis' ); // Velg tredje fane (0-indeksert)

Markup

Du kan aktivere en fane- eller pillenavigasjon uten å skrive noe javascript ved å spesifisere data-toggle="tab"eller data-toggle="pill"på et element. Hvis du legger til navog - nav-tabsklassene i fanen ul, brukes bootstrap-fanestilen.

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

Metoder

$().tab

Aktiverer et faneelement og innholdsbeholder. Tab skal ha enten en data-targeteller en hrefmålrettet beholdernode i DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Hjem </a></li>
  3. <li><a href = "#profile" > Profil </a></li>
  4. <li><a href = "#messages" > Meldinger </a></li>
  5. <li><a href = "#settings" > Innstillinger </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-innhold" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "meldinger" > ... </div>
  12. <div class = "tab-pane" id = "innstillinger" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( funksjon () {
  17. $ ( '#myTab a:last' ). tab ( 'vis' );
  18. })
  19. </script>

arrangementer

Begivenhet Beskrivelse
forestilling Denne hendelsen utløses på fanevisning, men før den nye fanen har blitt vist. Bruk event.targetog event.relatedTargetfor å målrette henholdsvis den aktive fanen og den forrige aktive fanen (hvis tilgjengelig).
vist Denne hendelsen utløses på fanevisning etter at en fane er vist. Bruk event.targetog event.relatedTargetfor å målrette henholdsvis den aktive fanen og den forrige aktive fanen (hvis tilgjengelig).
  1. $ ( 'a[data-toggle="tab"]' ). ( 'vist' , funksjon ( e ) {
  2. e . mål // aktivert fane
  3. e . relatedTarget // forrige fane
  4. })

Om verktøytips

Inspirert av den utmerkede jQuery.tipsy-pluginen skrevet av Jason Frame; Verktøytips er en oppdatert versjon som ikke er avhengig av bilder, bruker css3 for animasjoner og dataattributter for lokal tittellagring.

Last ned fil

Eksempel på bruk av Tooltips

Hold markøren over koblingene nedenfor for å se verktøytips:

Trange bukser neste nivå keffiyeh du har sannsynligvis ikke hørt om dem. Fotoboks skjegg rå denim boktrykk vegansk messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie bærekraftig quinoa 8-bits amerikanske klær har en frotté richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, fire loko mcsweeney's cleanse vegan chambray. En virkelig ironisk håndverker uansett keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.


Bruker bootstrap-tooltip.js

Utløs verktøytipset via javascript:

  1. $ ( '#eksempel' ). verktøytips ( alternativer )

Alternativer

Navn type misligholde beskrivelse
animasjon boolsk ekte bruk en css-fade-overgang på verktøytipset
plassering streng|funksjon 'topp' hvordan plassere verktøytipset - topp | nederst | venstre | Ikke sant
velger streng falsk Hvis en velger er angitt, vil verktøytipsobjekter bli delegert til de angitte målene.
tittel streng | funksjon '' standard tittelverdi hvis "title"-taggen ikke er til stede
avtrekker streng 'sveve' hvordan verktøytips utløses - hover | fokus | Håndbok
forsinkelse nummer | gjenstand 0

forsinkelse ved å vise og skjule verktøytipset (ms) - gjelder ikke for manuell utløsertype

Hvis et nummer er oppgitt, brukes forsinkelse på både skjul/show

Objektstrukturen er:delay: { show: 500, hide: 100 }

Vær oppmerksom! Alternativer for individuelle verktøytips kan alternativt spesifiseres ved bruk av dataattributter.

Markup

Av ytelsesgrunner er Tooltip og Popover-dataapi-ene valgt inn. Hvis du vil bruke dem, spesifiser bare et velgeralternativ.

  1. <a href = "#" rel = "verktøytips" title = "første verktøytips" > hold musepekeren over meg </a>

Metoder

$().tooltip(opsjoner)

Legger en verktøytipsbehandler til en elementsamling.

.tooltip('vis')

Viser et elements verktøytips.

  1. $ ( '#element' ). verktøytips ( 'vis' )

.tooltip('skjul')

Skjuler et elements verktøytips.

  1. $ ( '#element' ). verktøytips ( 'skjul' )

.tooltip('toggle')

Veksler på verktøytipset til et element.

  1. $ ( '#element' ). verktøytips ( 'veksle' )

Om popovers

Legg til små overlegg av innhold, som de på iPad, til et hvilket som helst element for å inneholde sekundær informasjon.

* Krever at verktøytips er inkludert

Last ned fil

Eksempel på hover popover

Hold musepekeren over knappen for å utløse popover.


Bruker bootstrap-popover.js

Aktiver popovers via javascript:

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

Alternativer

Navn type misligholde beskrivelse
animasjon boolsk ekte bruk en css-fade-overgang på verktøytipset
plassering streng|funksjon 'Ikke sant' hvordan plassere popover - toppen | nederst | venstre | Ikke sant
velger streng falsk hvis en velger er angitt, vil verktøytipsobjekter bli delegert til de angitte målene
avtrekker streng 'sveve' hvordan verktøytips utløses - hover | fokus | Håndbok
tittel streng | funksjon '' standard tittelverdi hvis «title»-attributtet ikke er til stede
innhold streng | funksjon '' standard innholdsverdi hvis «data-content»-attributtet ikke er til stede
forsinkelse nummer | gjenstand 0

forsinkelse ved å vise og skjule popover (ms) - gjelder ikke for manuell utløsertype

Hvis et nummer er oppgitt, brukes forsinkelse på både skjul/show

Objektstrukturen er:delay: { show: 500, hide: 100 }

Vær oppmerksom! Alternativer for individuelle popovers kan alternativt spesifiseres ved bruk av dataattributter.

Markup

Av ytelsesgrunner er Tooltip og Popover-dataapi-ene valgt inn. Hvis du vil bruke dem, spesifiser bare et velgeralternativ.

Metoder

$().popover(alternativer)

Initialiserer popovers for en elementsamling.

.popover('show')

Avslører en popover for elementer.

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

.popover('skjul')

Skjuler en popover for elementer.

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

.popover('toggle')

Slår av på en elementer-popover.

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

Om varsler

Varslingspluginen er en liten klasse for å legge til nærfunksjonalitet til varsler.

nedlasting

Eksempler på varsler

Varslingspluginen fungerer på vanlige varslingsmeldinger, og blokkerer meldinger.

Hellige guacamole! Best sjekk deg selv, du ser ikke så bra ut.

Oh Snap! Du har en feil!

Endre dette og hint og prøv igjen. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Ta denne handlingen Eller gjør dette


Bruker bootstrap-alert.js

Aktiver avvisning av et varsel via javascript:

  1. $ ( ".alert" ). varsel ()

Markup

Bare legg data-dismiss="alert"til lukkeknappen for automatisk å gi et varsel om lukkefunksjonalitet.

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

Metoder

$().alert()

Dekker alle varsler med nærfunksjonalitet. For å få varslene dine til å animere når de er lukket, sørg for at de har .fadeog .inklassen allerede brukt på dem.

.alert('close')

Lukker et varsel.

  1. $ ( ".alert" ). varsel ( 'lukke' )

arrangementer

Bootstraps varslingsklasse avslører noen få hendelser for å koble til varslingsfunksjonalitet.

Begivenhet Beskrivelse
Lukk Denne hendelsen utløses umiddelbart når closeinstansmetoden kalles.
lukket Denne hendelsen utløses når varselet er lukket (vil vente på at css-overgangene er fullført).
  1. $ ( '#my-alert' ). bind ( 'lukket' , funksjon () {
  2. // gjør noe…
  3. })

Om

Gjør mer med knapper. Kontroller knappstatuser eller lag grupper med knapper for flere komponenter som verktøylinjer.

Last ned fil

Eksempelbruk

Bruk knappene plugin for tilstander og veksler.

Stateful
Enkel bryter
Avmerkingsboks
Radio

Bruker bootstrap-button.js

Aktiver knapper via javascript:

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

Markup

Dataattributter er integrert i knappen-plugin. Sjekk ut eksempelkoden nedenfor for de ulike markup-typene.

  1. <!-- Legg til data-toggle="button" for å aktivere veksling på en enkelt knapp -->
  2. <button class = "btn" data-toggle = "button" > Single Toggle </button>
  3.  
  4. <!-- Legg til data-toggle="buttons-checkbox" for veksling av avkrysningsboksstil på btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Venstre </button>
  7. <button class = "btn" > Midt </button>
  8. <button class = "btn" > Høyre </button>
  9. </div>
  10.  
  11. <!-- Legg til data-toggle="buttons-radio" for radiostil veksling på btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Venstre </button>
  14. <button class = "btn" > Midt </button>
  15. <button class = "btn" > Høyre </button>
  16. </div>

Metoder

$().button('toggle')

Bytter push-tilstand. Gir knappen det utseendet at den er aktivert.

Vær oppmerksom! Du kan aktivere automatisk veksling av en knapp ved å bruke data-toggleattributtet.
  1. <button class = "btn" data-toggle = "button" > </button>

$().button('laster')

Angir knappstatus til lasting - deaktiverer knapp og bytter tekst til lasting av tekst. Lastetekst skal defineres på knappeelementet ved hjelp av dataattributtet data-loading-text.

  1. <button class = "btn" data-loading-text = "laster ting..." > ... </button>
Vær oppmerksom! Firefox vedvarer den deaktiverte tilstanden på tvers av sideinnlastinger . En løsning for dette er å bruke autocomplete="off".

$().button('reset')

Tilbakestiller knappens tilstand - bytter tekst til originaltekst.

$().knapp(streng)

Tilbakestiller knappens tilstand - bytter tekst til hvilken som helst datadefinert teksttilstand.

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

Om

Få basisstiler og fleksibel støtte for sammenleggbare komponenter som trekkspill og navigasjon.

Last ned fil

* Krever at Transitions-pluginen er inkludert.

Eksempel trekkspill

Ved å bruke kollaps-pluginen bygde vi en enkel trekkspillstil-widget:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunsj. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Annonse vegansk unntatt slakter vice lomo. Leggings occaecat craft beer farm-to-table, rå denim estetisk synth nesciunt du sannsynligvis ikke har hørt om dem accusamus labore bærekraftig VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunsj. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Annonse vegansk unntatt slakter vice lomo. Leggings occaecat craft beer farm-to-table, rå denim estetisk synth nesciunt du sannsynligvis ikke har hørt om dem accusamus labore bærekraftig VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunsj. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Annonse vegansk unntatt slakter vice lomo. Leggings occaecat craft beer farm-to-table, rå denim estetisk synth nesciunt du sannsynligvis ikke har hørt om dem accusamus labore bærekraftig VHS.

Bruker bootstrap-collapse.js

Aktiver via javascript:

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

Alternativer

Navn type misligholde beskrivelse
forelder velger falsk Hvis velgeren vil alle sammenleggbare elementer under den angitte overordnede bli lukket når dette sammenleggbare elementet vises. (ligner på tradisjonell trekkspilladferd)
veksle boolsk ekte Veksler på det sammenleggbare elementet ved påkalling

Markup

Bare legg til data-toggle="collapse"og et data-targettil-element for å automatisk tildele kontroll over et sammenleggbart element. Attributtet data-targetgodtar en css-velger å bruke sammenbruddet på. Sørg for å legge klassen collapsetil det sammenleggbare elementet. Hvis du vil at den skal åpnes som standard, legger du til den ekstra klassen in.

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. enkel sammenleggbar
  3. </button>
  4.  
  5. <div id = "demo" class = "kollaps inn" > </div>
Vær oppmerksom! For å legge til trekkspilllignende gruppestyring til en sammenleggbar kontroll, legg til dataattributtet data-parent="#selector". Se demoen for å se dette i aksjon.

Metoder

.collapse(alternativer)

Aktiverer innholdet ditt som et sammenleggbart element. Godtar et valgfritt alternativ object.

  1. $ ( '#myCollapsible' ). kollaps ({
  2. veksle : usant
  3. })

.collapse('toggle')

Bytter et sammenleggbart element til vist eller skjult.

.collapse('show')

Viser et sammenleggbart element.

.collapse('hide')

Skjuler et sammenleggbart element.

arrangementer

Bootstraps kollapsklasse avslører noen få hendelser for å koble seg til kollapsfunksjonalitet.

Begivenhet Beskrivelse
forestilling Denne hendelsen utløses umiddelbart når showinstansmetoden kalles.
vist Denne hendelsen utløses når et kollapselement er gjort synlig for brukeren (vil vente på at css-overganger er fullført).
gjemme seg Denne hendelsen utløses umiddelbart når hidemetoden har blitt kalt.
skjult Denne hendelsen utløses når et kollapselement har blitt skjult for brukeren (vil vente på at css-overgangene er fullført).
  1. $ ( '#myCollapsible' ). ( 'skjult' , funksjon () {
  2. // gjør noe…
  3. })

Om

En enkel, enkelt utvidet plugin for raskt å lage elegante skrivehoder med hvilken som helst form for tekstinndata.

Last ned fil

Eksempel

Begynn å skrive i feltet nedenfor for å vise fremskrivingsresultatene.


Bruker bootstrap-typeahead.js

Ring typeahead via javascript:

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

Alternativer

Navn type misligholde beskrivelse
kilde array [ ] Datakilden å spørre mot.
gjenstander Antall 8 Maksimalt antall elementer som skal vises i rullegardinmenyen.
matcher funksjon ufølsom for store og små bokstaver Metoden som brukes til å finne ut om et søk samsvarer med et element. Godtar et enkelt argument, itemmot hvilket spørringen skal testes. Få tilgang til gjeldende spørring med this.query. Returner en boolsk truehvis søket samsvarer.
sorterer funksjon eksakt samsvar,
skiller mellom store og små bokstaver, skiller mellom store og
små bokstaver
Metode som brukes til å sortere resultater for autofullføring. Godtar et enkelt argument itemsog har omfanget av typeahead-forekomsten. Referer til gjeldende spørring med this.query.
highlighter funksjon uthever alle standardtreff Metode som brukes til å fremheve autofullføringsresultater. Godtar et enkelt argument itemog har omfanget av typeahead-forekomsten. Skal returnere html.

Markup

Legg til dataattributter for å registrere et element med typeahead-funksjonalitet.

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

Metoder

.typeahead(alternativer)

Initialiserer en inndata med en skriving.