Individueel of samengesteld

Als je de nieuwste versie van Bootstrap hebt gedownload, bevatten zowel bootstrap.js als bootstrap.min.js alle plug-ins die op deze pagina worden vermeld.

Gegevenskenmerken

U kunt alle Bootstrap-plug-ins puur via de markup-API gebruiken zonder een enkele regel JavaScript te schrijven. Dit is de eersteklas API van Bootstrap en zou uw eerste overweging moeten zijn bij het gebruik van een plug-in.

Dat gezegd hebbende, kan het in sommige situaties wenselijk zijn om deze functionaliteit uit te schakelen. Daarom bieden we ook de mogelijkheid om de data-attribuut-API uit te schakelen door de binding van alle gebeurtenissen op de body-namespace met `'data-api'` te ontbinden. Dit ziet er zo uit:

$ ( 'lichaam' ). uit ( '.data-api' )

Als alternatief, om een ​​specifieke plug-in te targeten, voegt u gewoon de naam van de plug-in toe als een naamruimte samen met de data-api-naamruimte als volgt:

$ ( 'lichaam' ). uit ( '.alert.data-api' )

Programmatische API

We zijn ook van mening dat u alle Bootstrap-plug-ins puur via de JavaScript-API moet kunnen gebruiken. Alle openbare API's zijn enkele, ketenbare methoden en retourneren de verzameling waarop is gereageerd.

$ ( ".btn.gevaar" ). knop ( "wisselen" ). addClass ( "vet" )

Alle methoden moeten een optioneel options-object accepteren, een tekenreeks die op een bepaalde methode is gericht, of niets (dat een plug-in start met standaardgedrag):

$ ( "#myModal" ). modal () // geïnitialiseerd met standaardwaarden                       
$ ( "#myModal" ). modal ({ keyboard : false }) // geïnitialiseerd zonder toetsenbord     
$ ( "#myModal" ). modal ( 'show' ) // initialiseert en roept show onmiddellijk op                

Elke plug-in stelt ook zijn onbewerkte constructor bloot aan een eigenschap `Constructor`: $.fn.popover.Constructor. Als u een bepaalde plug-in-instantie wilt ophalen, haalt u deze rechtstreeks op uit een element: $('[rel=popover]').data('popover').

Evenementen

Bootstrap biedt aangepaste gebeurtenissen voor de meeste unieke acties van plug-ins. Over het algemeen komen deze in een infinitief en voltooid deelwoordvorm - waarbij de infinitief (bijv. show) wordt geactiveerd aan het begin van een gebeurtenis, en de voltooid deelwoordvorm (bijv. shown) wordt geactiveerd bij de voltooiing van een actie.

Alle infinitieve gebeurtenissen bieden de functionaliteit preventDefault. Dit biedt de mogelijkheid om de uitvoering van een actie te stoppen voordat deze begint.

$ ( '#myModal' ). aan ( 'toon' , functie ( e ) {   
    if (! data ) retourneert e . voorkomenDefault () // stopt de weergave van modal   
})

Over overgangen

Voeg voor eenvoudige overgangseffecten bootstrap-transition.js een keer toe naast de andere JS-bestanden. Als je de gecompileerde (of verkleinde) bootstrap.js gebruikt, is het niet nodig om dit op te nemen - het is er al.

Gebruiksgevallen

Een paar voorbeelden van de transitie-plug-in:

• Sliding of fade in modals
• Tabbladen uitfaden
• Waarschuwingen uitfaden
• Schuifbare carrouselruiten

Voorbeelden

Modals zijn gestroomlijnde, maar flexibele dialoogvensters met de minimaal vereiste functionaliteit en slimme standaardinstellingen.

Statisch voorbeeld

Een gerenderd modaal met koptekst, hoofdtekst en reeks acties in de voettekst.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </knop>    
    <h3> Modale kop </h3>
  </div>
  <div class = "modal-body" > 
    <p> Een fijn lichaam… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Sluiten </a>  
    <a href = "#" class = "btn btn-primary" > Wijzigingen opslaan </a>  
  </div>
</div>

Live demonstratie

Schakel een modaal via JavaScript door op de onderstaande knop te klikken. Het schuift naar beneden en verdwijnt in beeld vanaf de bovenkant van de pagina.

<-- Knop om modaal te activeren -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Demo-modaal starten </a>    
 
<-- Modaal -->
<div class = "modal" id = "myModal" 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" > Modale kop </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Een fijn lichaam… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Sluiten </button>   
    <button class = "btn btn-primary" > Wijzigingen opslaan </button> 
  </div>
</div>

Gebruik

Via gegevensattributen

Activeer een modaal zonder JavaScript te schrijven. Stel data-toggle="modal"in op een controller-element, zoals een knop, samen met een data-target="#foo"of href="#foo"om een ​​specifieke modaal te targeten om te schakelen.

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

Via JavaScript

Roep een modaal met id myModalaan met een enkele regel JavaScript:

$ ( '#myModal' ). modaal ( opties )

Opties

Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-, zoals in data-backdrop="".

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

Methoden:

.modaal(opties)

Activeert uw inhoud als modaal. Accepteert een optionele optie object.

$ ( '#myModal' ). modaal ({
  toetsenbord : false 
})

.modal('toggle')

Schakelt handmatig een modaal in.

$ ( '#myModal' ). modaal ( 'toggle' )

.modal('toon')

Opent handmatig een modaal.

$ ( '#myModal' ). modaal ( 'toon' )

.modal('verbergen')

Verbergt handmatig een modaal.

$ ( '#myModal' ). modaal ( 'verbergen' )

Evenementen

De modale klasse van Bootstrap onthult een paar gebeurtenissen voor het aansluiten op modale functionaliteit.

$ ( '#myModal' ). aan ( 'verborgen' , functie () {   
  // doe iets…
})

Voorbeelden

Voeg vervolgkeuzemenu's toe aan bijna alles met deze eenvoudige plug-in, inclusief de navigatiebalk, tabbladen en pillen.

Binnen een navigatiebalk

Binnen tabbladen

Gebruik

Via gegevensattributen

Voeg toe data-toggle="dropdown"aan een link of knop om een ​​vervolgkeuzelijst in te schakelen.

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

Om URL's intact te houden, gebruikt u het data-targetkenmerk in plaats van href="#".

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

Via JavaScript

Roep de vervolgkeuzelijsten op via JavaScript:

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

Opties

Geen

Methoden:

$().dropdown()

Een programmatische api voor het activeren van menu's voor een bepaalde navigatiebalk of navigatie met tabbladen.

Voorbeeld in navbar

De ScrollSpy-plug-in is bedoeld voor het automatisch bijwerken van navigatiedoelen op basis van de schuifpositie. Scroll door het gebied onder de navigatiebalk en kijk hoe de actieve klas verandert. De dropdown-subitems worden ook gemarkeerd.

Gebruik

Via gegevensattributen

Om eenvoudig scrollspy-gedrag toe te voegen aan uw navigatie op de bovenste balk, voegt data-spy="scroll"u gewoon het element toe dat u wilt bespioneren (meestal is dit de body) en data-target=".navbar"selecteert u welke navigatie u wilt gebruiken. U wilt scrollspy gebruiken met een .navcomponent.

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

Via JavaScript

Bel de scrollspy via JavaScript:

$ ( '#navigatiebalk' ). scrollspion ()

Methoden:

.scrollspy('vernieuwen')

Wanneer u scrollspy gebruikt in combinatie met het toevoegen of verwijderen van elementen uit de DOM, moet u de vernieuwingsmethode als volgt aanroepen:

$ ( '[data-spy="scroll"]' ). elke ( functie () {  
  var $spy = $ ( dit ). scrollspy ( 'vernieuwen' )
});

Opties

Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-, zoals in data-offset="".

Evenementen

Voorbeeldtabbladen

Voeg snelle, dynamische tabbladfunctionaliteit toe om door deelvensters met lokale inhoud te bladeren, zelfs via vervolgkeuzemenu's.

Gebruik

Tabbladen met tabbladen inschakelen via JavaScript (elk tabblad moet afzonderlijk worden geactiveerd):

$ ( '#mijnTab a' ). klik ( functie ( e ) {  
  e . voorkomenStandaard ();
  $ ( dit ). tabblad ( 'toon' );
})

U kunt afzonderlijke tabbladen op verschillende manieren activeren:

$ ( '#myTab a[href="#profile"]' ). tabblad ( 'toon' ); // Selecteer tabblad op naam 
$ ( '#mijnTab a:eerste' ). tabblad ( 'toon' ); // Selecteer eerste tabblad 
$ ( '#mijnTab a:laatste' ). tabblad ( 'toon' ); // Selecteer laatste tabblad 
$ ( '#myTab li:eq(2) a' ). tabblad ( 'toon' ); // Selecteer derde tabblad (0-geïndexeerd) 

Markup

U kunt een tab- of pill-navigatie activeren zonder JavaScript te schrijven door simpelweg data-toggle="tab"of data-toggle="pill"op een element te specificeren. Door de klassen naven aan het tabblad toe te voegen, wordt de stijl van het Bootstrap-tabblad toegepast.nav-tabsul

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Startpagina </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profiel </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Berichten </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Instellingen </a></li>  
</ul>

Methoden:

$().tab

Activeert een tabelement en inhoudcontainer. Tab moet een data-targetof een hrefgericht hebben op een containerknooppunt in de DOM.

<ul class = "nav nav-tabs" id = "mijnTab" >  
  <li class = "active" ><a href = "#home" > Home </a></li>  
  <li><a href = "#profile" > Profiel </a></li> 
  <li><a href = "#messages" > Berichten </a></li> 
  <li><a href = "#settings" > Instellingen </a></li> 
</ul>
 
<div class = "tab-inhoud" > 
  <div class = "tabvenster actief" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-paneel" id = "berichten" > ... </div>  
  <div class = "tab-paneel" id = "instellingen" > ... </div>  
</div>
 
<script>
  $ ( functie () {  
    $ ( '#mijnTab a:laatste' ). tabblad ( 'toon' );
  })
</script>

Evenementen

$ ( 'a[data-toggle="tab"]' ). aan ( 'getoond' , functie ( e ) {   
  e . doel // geactiveerd tabblad
  e . gerelateerdTarget // vorig tabblad
})

Voorbeelden

Geïnspireerd door de uitstekende jQuery.tipsy-plug-in geschreven door Jason Frame; Tooltips zijn een bijgewerkte versie, die niet afhankelijk zijn van afbeeldingen, CSS3 gebruiken voor animaties en gegevenskenmerken voor lokale titelopslag.

Plaats de muisaanwijzer op de onderstaande links om tooltips te zien:

Vier richtingen

Gebruik

Activeer de knopinfo via JavaScript:

$ ( '#voorbeeld' ). knopinfo ( opties )

Opties

Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-, zoals in data-animation="".

Markup

Om prestatieredenen zijn de Tooltip en Popover data-api's aangemeld. Als u ze wilt gebruiken, geeft u gewoon een selectoroptie op.

<a href = "#" rel = "tooltip" title = "first tooltip" > beweeg over mij </a>   

Methoden:

$().tooltip(opties)

Koppelt een tooltip-handler aan een elementverzameling.

.tooltip('toon')

Onthult de tooltip van een element.

$ ( '#element' ). knopinfo ( 'toon' )

.tooltip('verbergen')

Verbergt de knopinfo van een element.

$ ( '#element' ). knopinfo ( 'verbergen' )

.tooltip('toggle')

Schakelt de knopinfo van een element in.

$ ( '#element' ). knopinfo ( 'toggle' )

.tooltip('vernietigen')

Verbergt en vernietigt de tooltip van een element.

$ ( '#element' ). knopinfo ( 'vernietigen' )

Voorbeelden

Voeg kleine overlays van inhoud, zoals die op de iPad, toe aan elk element voor het onderbrengen van secundaire informatie. Beweeg over de knop om de popover te activeren. Vereist Tooltip om te worden opgenomen.

Statische popover

Er zijn vier opties beschikbaar: boven, rechts, onder en links uitgelijnd.

Er wordt geen opmaak weergegeven omdat popovers worden gegenereerd op basis van JavaScript en inhoud binnen een dataattribuut.

Live demonstratie

Gebruik

Popovers inschakelen via JavaScript:

$ ( '#voorbeeld' ). popover ( opties )

Opties

Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-, zoals in data-animation="".

Markup

Om prestatieredenen zijn de Tooltip en Popover data-api's aangemeld. Als u ze wilt gebruiken, geeft u gewoon een selectoroptie op.

Methoden:

$().popover(opties)

Initialiseert popovers voor een elementverzameling.

.popover('toon')

Onthult een pop-over voor elementen.

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

.popover('verbergen')

Verbergt een pop-over voor elementen.

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

.popover('toggle')

Schakelt een pop-over voor elementen in.

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

.popover('vernietigen')

Verbergt en vernietigt de popover van een element.

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

Voorbeeldwaarschuwingen

Voeg afwijzingsfunctionaliteit toe aan alle waarschuwingsberichten met deze plug-in.

Gebruik

Afwijzing van een waarschuwing via JavaScript inschakelen:

$ ( ".waarschuwing" ). waarschuwing ()

Markup

Voeg gewoon toe data-dismiss="alert"aan uw sluitknop om automatisch een waarschuwingsfunctie voor sluiten te geven.

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

Methoden:

$().waarschuwing()

Omhult alle waarschuwingen met sluitfunctionaliteit. Om ervoor te zorgen dat uw waarschuwingen worden geanimeerd wanneer ze zijn gesloten, moet u ervoor zorgen dat de klasse .fadeen .inal op hen is toegepast.

.alert('sluiten')

Sluit een waarschuwing.

$ ( ".waarschuwing" ). waarschuwing ( 'sluiten' )

Evenementen

De waarschuwingsklasse van Bootstrap onthult een paar gebeurtenissen voor het aansluiten op de waarschuwingsfunctionaliteit.

$ ( '#mijn-waarschuwing' ). bind ( 'gesloten' , functie () {   
  // doe iets…
})

Voorbeeldgebruik

Doe meer met knoppen. Beheer knopstatussen of maak groepen knoppen voor meer componenten zoals werkbalken.

Stateful

Voeg data-loading-text="Bezig met laden..." toe om een ​​laadstatus op een knop te gebruiken.

<button type = "button" class = "btn btn-primary" data-loading-text = "Bezig met laden..." > Laadstatus </button>   

Enkele schakelaar

Voeg data-toggle="button" toe om het schakelen op een enkele knop te activeren.

<button type = "button" class = "btn" data-toggle = "button" > Enkele schakelaar </button>   

Selectievakje

Voeg data-toggle="buttons-checkbox" toe voor het omschakelen van de checkbox-stijl op btn-group.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn" > Links </button>  
  <button type = "button" class = "btn" > Midden </button>  
  <button type = "button" class = "btn" > Rechts </button>  
</div>

Radio

Voeg data-toggle="buttons-radio" toe voor het omschakelen in radiostijl op btn-group.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn" > Links </button>  
  <button type = "button" class = "btn" > Midden </button>  
  <button type = "button" class = "btn" > Rechts </button>  
</div>

Gebruik

Knoppen inschakelen via JavaScript:

$ ( '.nav-tabbladen' ). knop ()

Markup

Gegevensattributen zijn een integraal onderdeel van de plug-in voor knoppen. Bekijk de voorbeeldcode hieronder voor de verschillende opmaaktypen.

Opties

Geen

Methoden:

$().button('toggle')

Schakelt de push-status in. Geeft de knop de indruk dat deze is geactiveerd.

<button type = "button" class = "btn" data-toggle = "button" > … </button>    

$().button('bezig met laden')

Stelt knopstatus in op laden - schakelt knop uit en wisselt tekst naar laadtekst. Laadtekst moet worden gedefinieerd op het knopelement met behulp van het data-attribuut data-loading-text.

<button type = "button" class = "btn" data-loading-text = "dingen laden..." > ... </button>    

$().button('reset')

Reset knopstatus - wisselt tekst naar originele tekst.

$().knop(tekenreeks)

Stelt de knopstatus opnieuw in - verwisselt tekst naar een door gegevens gedefinieerde tekststatus.

<button type = "button" class = "btn" data-complete-text = "voltooid!" > ... </knop>    
<script>
  $ ( '.btn' ). knop ( 'voltooid' )
</script>

Over

Krijg basisstijlen en flexibele ondersteuning voor opvouwbare componenten zoals accordeons en navigatie.

* Vereist dat de plug-in Transitions is opgenomen.

Voorbeeld accordeon

Met behulp van de inklapplug-in hebben we een eenvoudige accordeonstijl-widget gebouwd:

<div class = "accordeon" id = "accordeon2" >  
  <div class = "accordeon-groep" > 
    <div class = "accordeon-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Opvouwbaar groepsitem #1
      </a>
    </div>
    <div id = "collapseOne" class = "accordeon-body ineenstorting in" >  
      <div class = "accordeon-inner" > 
        Anim pariatur cliché...
      </div>
    </div>
  </div>
  <div class = "accordeon-groep" > 
    <div class = "accordeon-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Opvouwbaar groepsitem #2
      </a>
    </div>
    <div id = "collapseTwo" class = "accordeon-body ineenstorting" >  
      <div class = "accordeon-inner" > 
        Anim pariatur cliché...
      </div>
    </div>
  </div>
</div>
...

U kunt de plug-in ook gebruiken zonder de accordeon-opmaak. Maak een knop om het uitvouwen en samenvouwen van een ander element te wisselen.

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  eenvoudig opvouwbaar
</knop>
 
<div id = "demo" class = "collapse in" > … </div>  

Gebruik

Via gegevensattributen

Voeg gewoon data-toggle="collapse"en een data-targetaan element toe om automatisch de besturing van een opvouwbaar element toe te wijzen. Het data-targetattribuut accepteert een CSS-selector om het samenvouwen op toe te passen. Zorg ervoor dat u de klasse toevoegt collapseaan het opvouwbare element. Als u wilt dat deze standaard wordt geopend, voegt u de extra klasse toe in.

Om accordeonachtig groepsbeheer toe te voegen aan een opvouwbaar besturingselement, voegt u het data-attribuut toe data-parent="#selector". Raadpleeg de demo om dit in actie te zien.

Via JavaScript

Handmatig inschakelen met:

$ ( ".collapse" ). instorten ()

Opties

Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-, zoals in data-parent="".

Methoden:

.collapse (opties)

Activeert uw inhoud als een opvouwbaar element. Accepteert een optionele optie object.

$ ( '#mijnInklapbaar' ). instorten ({
  toggle : false 
})

.collapse('toggle')

Schakelt een samenvouwbaar element om naar weergegeven of verborgen.

.collapse('toon')

Toont een opvouwbaar element.

.collapse('hide')

Verbergt een opvouwbaar element.

Evenementen

De collapsklasse van Bootstrap onthult een paar gebeurtenissen voor het aansluiten op de ineenstortingsfunctionaliteit.

$ ( '#mijnInklapbaar' ). aan ( 'verborgen' , functie () {   
  // doe iets…
})

Voorbeeld carrousel

De onderstaande diavoorstelling toont een generieke plug-in en component om door elementen zoals een carrousel te fietsen.

Eerste miniatuurlabel

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

Second Thumbnail label

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.

Third Thumbnail label

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.

ik ›

<div id = "myCarousel" class = "carrouseldia" >  
  <!-- Carrouselitems -->
  <div class = "carrousel-innerlijke" > 
    <div class = "actief item" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carrouselnavigatie -->
  <a class = "carrousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Gebruik

Via gegevensattributen

...

Via JavaScript

Carrousel handmatig bellen met:

$ ( '.carrousel' ). carrousel ()

Opties

Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-, zoals in data-interval="".

Methoden:

.carrousel(opties)

Initialiseert de carrousel met optionele opties objecten begint door items te bladeren.

$ ( '.carrousel' ). carrousel ({
  interval : 2000 
})

.carrousel('cyclus')

Doorloopt de carrouselitems van links naar rechts.

.carrousel('pauze')

Voorkomt dat de carrousel door items fietst.

.carrousel(nummer)

Fietst de carrousel naar een bepaald frame (gebaseerd op 0, vergelijkbaar met een array).

.carrousel('vorige')

Hiermee gaat u naar het vorige item.

.carrousel('volgende')

Gaat naar het volgende item.

Evenementen

De carrouselklasse van Bootstrap onthult twee gebeurtenissen voor het aansluiten op carrouselfunctionaliteit.

Voorbeeld

Een eenvoudige, gemakkelijk uitgebreide plug-in voor het snel maken van elegante typeaheads met tekstinvoer in elke vorm.

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

Gebruik

Via gegevensattributen

Voeg gegevensattributen toe om een ​​element met typeahead-functionaliteit te registreren, zoals in het bovenstaande voorbeeld.

Via JavaScript

Roep de typeahead handmatig aan met:

$ ( '.typeahead' ). vooruit typen ()

Opties

Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-, zoals in data-source="".

Methoden:

.typeahead(opties)

Initialiseert een invoer met een typeahead.

Voorbeeld

De subnavigatie aan de linkerkant is een live demo van de affix-plug-in.

Gebruik

Via gegevensattributen

Om gemakkelijk affix-gedrag aan elk element toe te voegen, voegt u gewoon toe data-spy="affix"aan het element dat u wilt bespioneren. Gebruik vervolgens offsets om te definiëren wanneer het vastzetten van een element moet worden in- en uitgeschakeld.

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

Via JavaScript

Roep de affix-plug-in aan via JavaScript:

$ ( '#navigatiebalk' ). aanbrengen ()

Methoden:

.affix('vernieuwen')

Wanneer u affix gebruikt in combinatie met het toevoegen of verwijderen van elementen uit de DOM, wilt u de vernieuwingsmethode aanroepen:

$ ( '[data-spy="affix"]' ). elke ( functie () {  
  $ ( dit ). affix ( 'vernieuwen' )
});

Opties

Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-, zoals in data-offset-top="200".