Individuell eller kompilert

Plugins kan inkluderes individuelt (selv om noen har nødvendige avhengigheter), eller alle på en gang. Både bootstrap.js og bootstrap.min.js inneholder alle plugins i en enkelt fil.

Dataattributter

Du kan bruke alle Bootstrap-plugins rent gjennom markup API uten å skrive en eneste linje med JavaScript. Dette er Bootstraps førsteklasses API og bør være din første vurdering når du bruker en plugin.

Når det er sagt, kan det i noen situasjoner være ønskelig å slå av denne funksjonaliteten. Derfor gir vi også muligheten til å deaktivere dataattributtet API ved å oppheve bindingen av alle hendelser på kroppen med navneavstand med `'data-api'`. Dette ser slik ut:

$ ( 'kropp' ). av ( '.data-api' )

Alternativt, for å målrette mot et spesifikt plugin, inkluderer du bare pluginens navn som et navneområde sammen med data-api navneområdet slik:

$ ( 'kropp' ). av ( '.alert.data-api' )

Programmatisk API

Vi mener også at du bør kunne bruke alle Bootstrap-plugins rent gjennom JavaScript API. Alle offentlige API-er er enkle, kjedebare metoder, og returnerer samlingen som ble utført.

$ ( ".btn.danger" ). knapp ( "veksle" ). addClass ( "fett" )

Alle metoder bør godta et valgfritt alternativobjekt, en streng som retter seg mot en bestemt metode, eller ingenting (som starter en plugin med standard oppførsel):

$ ( "#myModal" ). modal () // initialisert med standardverdier                       
$ ( "#myModal" ). modal ({ keyboard : false }) // initialisert uten tastatur     
$ ( "#myModal" ). modal ( 'show' ) // initialiserer og påkaller show umiddelbart                

Hvert plugin viser også sin råkonstruktør på en `Constructor`-egenskap: $.fn.popover.Constructor. Hvis du vil ha en bestemt plugin-forekomst, kan du hente den direkte fra et element: $('[rel=popover]').data('popover').

Ingen konflikt

Noen ganger er det nødvendig å bruke Bootstrap-plugins med andre UI-rammer. Under disse omstendighetene kan navneområdekollisjoner av og til forekomme. Hvis dette skjer, kan du ringe .noConflicttil plugin-en du ønsker å tilbakestille verdien av.

var bootstrapButton = $ . fn . knappen . noConflict () // returner $.fn.button til tidligere tildelt verdi 
$ . fn . bootstrapBtn = bootstrapButton             // gi $().bootstrapBtn bootstrap-funksjonaliteten

arrangementer

Bootstrap gir tilpassede hendelser for de fleste plugins unike handlinger. Vanligvis kommer disse i en infinitiv og partisippform - der infinitiv (eks. show) utløses ved starten av en hendelse, og partisippform (eks. shown) utløses ved fullføring av en handling.

Alle infinitive hendelser gir preventDefault-funksjonalitet. Dette gir muligheten til å stoppe utførelsen av en handling før den starter.

$ ( '#myModal' ). på ( 'vis' , funksjon ( e ) {   
    hvis (! data ) returnerer e . preventDefault () // stopper modal fra å bli vist   
})

Om overganger

For enkle overgangseffekter, inkluderer bootstrap-transition.js én gang sammen med de andre JS-filene. Hvis du bruker den kompilerte (eller minifiserte) bootstrap.js , er det ikke nødvendig å inkludere dette – det er der allerede.

Brukssaker

Noen få eksempler på overgangsplugin:

• Skyv eller falmer i modaler
• Fading ut faner
• Uttoningsvarsler
• Skyvbare karusellruter

Eksempler

Modaler er strømlinjeformede, men fleksible, dialogmeldinger med minimum nødvendig funksjonalitet og smarte standardinnstillinger.

Statisk eksempel

En gjengitt modal med topptekst, brødtekst og sett med handlinger i bunnteksten.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3> Modal overskrift </h3>
  </div>
  <div class = "modal-body" > 
    <p> En fin kropp... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Lukk </a>  
    <a href = "#" class = "btn btn-primary" > Lagre endringer </a>  
  </div>
</div>

Live demo

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

<!-- Knapp for å utløse modal -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Start demomodal </a>    
 
<!-- Modal -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Modal overskrift </h3> 
  </div>
  <div class = "modal-body" > 
    <p> En fin kropp... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Lukk </button>   
    <button class = "btn btn-primary" > Lagre endringer </button> 
  </div>
</div>

Bruk

Via dataattributter

Aktiver en modal uten å skrive JavaScript. Sett data-toggle="modal"på et kontrollerelement, som en knapp, sammen med en data-target="#foo"eller href="#foo"for å målrette en bestemt modal for å veksle.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Start modal </button>   

Via JavaScript

Ring en modal med id myModalmed en enkelt linje med JavaScript:

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

Alternativer

Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-, som i data-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Metoder

.modal(alternativer)

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

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

.modal('toggle')

Bytter en modal manuelt.

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

.modal('show')

Åpner en modal manuelt.

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

.modal('skjul')

Skjuler en modal manuelt.

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

arrangementer

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

$ ( '#myModal' ). på ( 'skjult' , funksjon () {   
  // gjør noe…
})

Eksempler

Legg til rullegardinmenyer til nesten hva som helst med denne enkle plugin-en, inkludert navigasjonslinjen, fanene og pillene.

Innenfor en navigasjonslinje

Innenfor faner

Bruk

Via dataattributter

Legg data-toggle="dropdown"til en lenke eller knapp for å veksle mellom en rullegardin.

<div class = "dropdown" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Dropdown-utløser </a>   
  <ul class = "dropdown-menu" role = "meny" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

For å beholde nettadresser intakte, bruk data-targetattributtet i stedet for href="#".

<div class = "dropdown" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Fall ned
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "meny" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Via JavaScript

Ring rullegardinmenyene via JavaScript:

$ ( '.dropdown-toggle' ). rullegardin ()

Alternativer

Ingen

Metoder

$().dropdown('toggle')

Et programmatisk API for å veksle mellom menyer for en gitt navigasjonslinje eller navigering med faner.

Eksempel i navbar

ScrollSpy-pluginen er for automatisk oppdatering av nav-mål basert på rulleposisjon. Rull området under navigasjonslinjen og se den aktive klassen endre seg. Underelementene i rullegardinmenyen vil også bli uthevet.

Bruk

Via dataattributter

For enkelt å legge til scrollspy-adferd til topplinjenavigasjonen, legg data-spy="scroll"til elementet du vil spionere på (vanligvis vil dette være kroppen) og data-target=".navbar"for å velge hvilken nav som skal brukes. Du vil bruke scrollspy med en .navkomponent.

<body data-spy = "scroll" data-target = ".navbar" > ... </body>  

Via JavaScript

Ring scrollspy via JavaScript:

$ ( '#navbar' ). scrollspy ()

Metoder

.scrollspy('refresh')

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

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

Alternativer

Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-, som i data-offset="".

arrangementer

Eksempelfaner

Legg til rask, dynamisk fanefunksjonalitet for overgang gjennom ruter med lokalt innhold, selv via rullegardinmenyer.

Bruk

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

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

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

$ ( '#myTab a[href="#profile"]' ). tab ( 'vis' ); // Velg fane etter navn
$ ( '#myTab a:first' ). tab ( 'vis' ); // Velg første fane
$ ( '#myTab a:last' ). tab ( 'vis' ); // Velg siste fane
$ ( '#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.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Hjem </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Meldinger </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Innstillinger </a></li>  
</ul>

Metoder

$().tab

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

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Hjem </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Meldinger </a></li> 
  <li><a href = "#settings" > Innstillinger </a></li> 
</ul>
 
<div class = "tab-innhold" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "meldinger" > ... </div>  
  <div class = "tab-pane" id = "innstillinger" > ... </div>  
</div>
 
<script>
  $ ( funksjon () {  
    $ ( '#myTab a:last' ). tab ( 'vis' );
  })
</script>

arrangementer

$ ( 'a[data-toggle="tab"]' ). på ( 'vist' , funksjon ( e ) {   
  e . mål // aktivert fane
  e . relatedTarget // forrige fane
})

Eksempler

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.

Av ytelsesgrunner er verktøytipset og popover-dataapi-ene valgt inn, noe som betyr at du må initialisere dem selv .

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

Fire retninger

Verktøytips i inndatagrupper

Når du bruker verktøytips og popovers med Bootstrap-inndatagruppene, må du angi alternativet container(dokumentert nedenfor) for å unngå uønskede bivirkninger.

Bruk

Utløs verktøytipset via JavaScript:

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

Alternativer

Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-, som i data-animation="".

Markup

<a href = "#" data-toggle = "verktøytips" title = "første verktøytips" > hold markøren over meg </a>   

Metoder

$().tooltip(opsjoner)

Legger en verktøytipsbehandler til en elementsamling.

.tooltip('vis')

Avslører et elements verktøytips.

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

.tooltip('skjul')

Skjuler et elements verktøytips.

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

.tooltip('toggle')

Veksler på verktøytipset til et element.

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

.tooltip('destroy')

Skjuler og ødelegger et elements verktøytips.

$ ( '#element' ). verktøytips ( 'ødelegge' )

Eksempler

Legg til små overlegg av innhold, som de på iPad, til et hvilket som helst element for å inneholde sekundær informasjon. Hold musepekeren over knappen for å utløse popover. Krever at verktøytips er inkludert.

Statisk popover

Fire alternativer er tilgjengelige: topp-, høyre-, bunn- og venstrejustert.

Ingen markeringer som vises som popovers genereres fra JavaScript og innhold i et dataattributt.

Live demo

Fire retninger

Bruk

Aktiver popovers via JavaScript:

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

Alternativer

Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-, som i data-animation="".

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.

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

.popover('skjul')

Skjuler en popover for elementer.

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

.popover('toggle')

Slår av på en popover for elementer.

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

.popover('destroy')

Skjuler og ødelegger et elements popover.

$ ( '#element' ). popover ( 'ødelegge' )

Eksempler på varsler

Legg til avvisningsfunksjonalitet til alle varselmeldinger med denne plugin-modulen.

Bruk

Aktiver avvisning av et varsel via JavaScript:

$ ( ".alert" ). varsel ()

Markup

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

<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.

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

arrangementer

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

$ ( '#my-alert' ). bind ( 'lukket' , funksjon () {   
  // gjør noe…
})

Eksempelbruk

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

Stateful

Legg data-loading-text="Loading..."til for å bruke en lastetilstand på en knapp.

<button type = "button" class = "btn btn-primary" data-loading-text = "Laster ..." > Laster tilstand </button>   

Enkel bryter

Legg data-toggle="button"til for å aktivere veksling på en enkelt knapp.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Single Toggle </button>   

Avmerkingsboks

Legg data-toggle="buttons-checkbox"til for veksling av avkrysningsboksstil på btn-gruppe.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Venstre </button>  
  <button type = "button" class = "btn btn-primary" > Middle </button>  
  <button type = "button" class = "btn btn-primary" > Høyre </button>  
</div>

Radio

Legg data-toggle="buttons-radio"til for å veksle mellom radiostil på btn-gruppe.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Venstre </button>  
  <button type = "button" class = "btn btn-primary" > Middle </button>  
  <button type = "button" class = "btn btn-primary" > Høyre </button>  
</div>

Bruk

Aktiver knapper via JavaScript:

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

Markup

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

Alternativer

Ingen

Metoder

$().button('toggle')

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

<button type = "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.

<button type = "button" class = "btn" data-loading-text = "laster ting..." > ... </button>    

$().button('reset')

Tilbakestiller knappens tilstand - bytter tekst til originaltekst.

$().knapp(streng)

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

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

Om

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

* Krever at Transitions-pluginen er inkludert.

Eksempel trekkspill

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

<div class = "trekkspill" id = "trekkspill2" >  
  <div class = "trekkspill-gruppe" > 
    <div class = "trekkspill-overskrift" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Sammenleggbart gruppeelement #1
      </a>
    </div>
    <div id = "collapseOne" class = "trekkspill-kropp kollapser inn" >  
      <div class = "trekkspill-inner" > 
        Anim pariatur klisje...
      </div>
    </div>
  </div>
  <div class = "trekkspill-gruppe" > 
    <div class = "trekkspill-overskrift" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Sammenleggbar gruppeelement #2
      </a>
    </div>
    <div id = "collapseTwo" class = "trekkspill-kroppskollaps" >  
      <div class = "trekkspill-inner" > 
        Anim pariatur klisje...
      </div>
    </div>
  </div>
</div>
...

Du kan også bruke programtillegget uten trekkspilloppmerkingen. Få en knapp til å veksle mellom å utvide og kollapse et annet element.

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  enkel sammenleggbar
</button>
 
<div id = "demo" class = "kollaps inn" > … </div>  

Bruk

Via dataattributter

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.

For å legge til trekkspilllignende gruppestyring til en sammenleggbar kontroll, legg til dataattributtet data-parent="#selector". Se demoen for å se dette i aksjon.

Via JavaScript

Aktiver manuelt med:

$ ( ".kollapse" ). kollapse ()

Alternativer

Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-, som i data-parent="".

Metoder

.collapse(alternativer)

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

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

.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.

$ ( '#myCollapsible' ). på ( 'skjult' , funksjon () {   
  // gjør noe…
})

Eksempel karusell

Lysbildefremvisningen nedenfor viser en generisk plugin og komponent for å sykle gjennom elementer som en karusell.

Første miniatyrbildeetikett

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Andre miniatyrbildeetikett

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Tredje miniatyrbildeetikett

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

<div id = "myCarousel" class = "karusell lysbilde" >  
  <ol class = "karusell-indikatorer" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "aktiv" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Karusellartikler -->
  <div class = "karusell-inner" > 
    <div class = "aktivt element" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Karusell nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "neste" > › </a>   
</div>

Bruk

Via dataattributter

Bruk dataattributter for enkelt å kontrollere posisjonen til karusellen. data-slidegodtar nøkkelordene preveller next, som endrer lysbildeposisjonen i forhold til gjeldende posisjon. Alternativt kan du bruke data-slide-tofor å sende en rå lysbildeindeks til karusellen data-slide-to="2", som hopper er lysbildeposisjonen til en bestemt indeks som begynner med 0.

Via JavaScript

Ring karusell manuelt med:

$ ( '.carousel' ). karusell ()

Alternativer

Alternativer kan sendes via dataattributter eller JavaScriptz. For dataattributter, legg til alternativnavnet til data-, som i data-interval="".

Metoder

.carousel(alternativer)

Initialiserer karusellen med valgfrie alternativer objectog begynner å sykle gjennom gjenstander.

$ ( '.carousel' ). karusell ({
  intervall : 2000 
})

.carousel('syklus')

Bla gjennom karusellelementene fra venstre til høyre.

.carousel('pause')

Stopper karusellen fra å sykle gjennom gjenstander.

.carousel(nummer)

Sykler karusellen til en bestemt ramme (0-basert, ligner på en matrise).

.carousel('prev')

Går til forrige element.

.carousel('neste')

Går til neste element.

arrangementer

Bootstraps karusellklasse avslører to hendelser for å koble til karusellfunksjonalitet.

Eksempel

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

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

Du vil stille inn autocomplete="off"for å forhindre at standard nettlesermenyer vises over rullegardinmenyen Bootstrap typeahead.

Bruk

Via dataattributter

Legg til dataattributter for å registrere et element med typeahead-funksjonalitet som vist i eksempelet ovenfor.

Via JavaScript

Ring opp skrivingen manuelt med:

$ ( '.typeahead' ). typeahead ()

Alternativer

Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-, som i data-source="".

Metoder

.typeahead(alternativer)

Initialiserer en inndata med en skriving.

Eksempel

Undernavigasjonen til venstre er en live demo av affix-plugin.

Bruk

Via dataattributter

For enkelt å legge til atferd til ethvert element, legg data-spy="affix"til elementet du vil spionere på. Bruk deretter forskyvninger for å definere når du skal slå festingen av et element av og på.

<div data-spy = "affix" data-offset-top = "200" > ... </div>  

Via JavaScript

Ring affix-plugin-modulen via JavaScript:

$ ( '#navbar' ). feste ()

Alternativer

Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-, som i data-offset-top="200".