Javascript voor Bootstrap

Breng de componenten van Bootstrap tot leven - nu met 12 aangepaste jQuery -plug- ins.

modaliteiten

Een gestroomlijnde, maar flexibele versie van de traditionele modale javascript-plug-in met alleen de minimaal vereiste functionaliteit en slimme standaardinstellingen.

Vervolgkeuzelijsten

Voeg vervolgkeuzemenu's toe aan bijna alles in Bootstrap met deze eenvoudige plug-in. Bootstrap biedt volledige ondersteuning voor vervolgkeuzemenu's in de navigatiebalk, tabbladen en pillen.

Scrollspy

Gebruik scrollspy om de links in uw navigatiebalk automatisch bij te werken om de huidige actieve link te tonen op basis van de scrollpositie.

Schakelbare tabbladen

Gebruik deze plug-in om tabbladen en pillen nuttiger te maken door ze te laten schakelen door tabbare vensters met lokale inhoud.

Knopinfo

Een nieuwe kijk op de jQuery Tipsy-plug-in, Tooltips zijn niet afhankelijk van afbeeldingen - ze gebruiken CSS3 voor animaties en gegevenskenmerken voor lokale titelopslag.

Popovers *

Voeg kleine overlays van inhoud, zoals die op de iPad, toe aan elk element voor het huisvesten van secundaire informatie.

* Vereist Tooltips om te worden opgenomen

Waarschuwingsberichten

De alert-plug-in is een kleine klasse voor het toevoegen van close-functionaliteit aan waarschuwingen.

Toetsen

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

Instorten

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

Carrousel

Maak een draaimolen van alle inhoud die u wilt om een ​​interactieve diavoorstelling van inhoud te bieden.

Typeahead

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

Overgangen *

Voeg voor eenvoudige overgangseffecten eenmaal bootstrap-transition.js toe om modals in te schuiven of waarschuwingen uit te faden.

* Vereist voor animatie in plug-ins

Kop op! Alle javascript-plug-ins vereisen de nieuwste versie van jQuery.

Over modaliteiten

Een gestroomlijnde, maar flexibele versie van de traditionele modale javascript-plug-in met alleen de minimaal vereiste functionaliteit en slimme standaardinstellingen.

Download bestand

Statisch voorbeeld

Hieronder is een statisch weergegeven modaal.

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.

Demo-modaal starten

Bootstrap-modal gebruiken

Bel de modal via javascript:

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

Opties

Naam type standaard Omschrijving
achtergrond booleaans WAAR Bevat een modaal-achtergrondelement. U kunt ook een achtergrond opgeven staticdie de modal niet sluit bij klikken.
toetsenbord booleaans WAAR Sluit de modal wanneer de escape-toets wordt ingedrukt
show booleaans WAAR Toont de modal wanneer geïnitialiseerd.

Markup

U kunt eenvoudig modals op uw pagina activeren zonder een enkele regel javascript te hoeven schrijven. Stel gewoon data-toggle="modal"een controllerelement in met een data-target="#foo"of href="#foo"die overeenkomt met een modaal element-ID, en wanneer erop wordt geklikt, wordt uw modal gestart.

Om opties toe te voegen aan uw modale instantie, voegt u ze ook toe als extra gegevensattributen op het besturingselement of de modale opmaak zelf.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Modal starten </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> Modale kop </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Een fijn lichaam… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Sluiten </a>
  11. <a href = "#" class = "btn btn-primary" > Wijzigingen opslaan </a>
  12. </div>
  13. </div>
Kop op! Als je wilt dat je modal in en uit animeert, voeg dan gewoon een .fadeklasse toe aan het .modalelement (raadpleeg de demo om dit in actie te zien) en voeg bootstrap-transition.js toe.

Methoden:

.modaal(opties)

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

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

.modal('toggle')

Schakelt handmatig een modaal in.

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

.modal('toon')

Opent handmatig een modaal.

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

.modal('verbergen')

Verbergt handmatig een modaal.

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

Evenementen

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

Evenement Beschrijving
show Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de showinstantiemethode wordt aangeroepen.
getoond Deze gebeurtenis wordt geactiveerd wanneer de modal zichtbaar is gemaakt voor de gebruiker (wacht tot de css-overgangen zijn voltooid).
verbergen Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de hideinstantiemethode is aangeroepen.
verborgen Deze gebeurtenis wordt geactiveerd wanneer de modal klaar is met verborgen zijn voor de gebruiker (wacht tot de css-overgangen zijn voltooid).
  1. $ ( '#myModal' ). aan ( 'verborgen' , functie () {
  2. // doe iets…
  3. })

De ScrollSpy-plug-in is bedoeld voor het automatisch bijwerken van navigatiedoelen op basis van de schuifpositie.

Download bestand

Voorbeeld navigatiebalk met scrollspy

Scroll door het gebied hieronder en bekijk de navigatie-update. De dropdown-subitems worden ook gemarkeerd. Probeer het!

@dik

Ad legging keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi voordat ze uitverkocht waren. Tumblr fietsrechten van boer tot bord. Anim keffiyeh carles vest. Velit seitan mcsweeney's fotohokje 3 wolf moon irure. Cosby sweater lomo jeansshort, williamsburg hoodie minim qui je hebt er waarschijnlijk nog nooit van gehoord et cardigan trust fund culpa biodiesel wes anderson esthetiek. Nihil getatoeëerde accusamus, cred ironie biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa snor skateboard, adipisicing fugiat velit hooivork baard. Freegan baard aliqua cupidatat mcsweeney's vero. Cupidatat vier loko nisi, ea helvetica nulla carles. Getatoeëerde cosby sweater foodtruck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 kleermaker. Carles niet-esthetische inspanning quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

een

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo fietsrechten adipisicing banh mi, velit ea sunt next level locavore single-origin koffie in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, duurzame delectus consectetur heuptasje iphone.

twee

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 wat dan ook delectus foodtruck. Sapiente synth id veronderstelnda. Locavore sed helvetica cliché ironie, donderkatten waarvan je waarschijnlijk nog nooit hebt gehoord, consequat hoodie glutenvrije lo-fi fap aliquip. Labore elit placeat voordat ze uitverkocht waren, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Vest ambachtelijk bier seitan kant en klare velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Bootstrap-scrollspy.js gebruiken

Bel de scrollspy via javascript:

  1. $ ( '#navigatiebalk' ). scrollspion ()

Markup

Om eenvoudig scrollspy-gedrag toe te voegen aan uw navigatie op de bovenste balk, voegt u gewoon toe data-spy="scroll"aan het element dat u wilt bespioneren (meestal is dit de body).

  1. <body data-spy = "scroll" > ... </body>
Kop op! Navbar-links moeten oplosbare id-doelen hebben. Een <a href="#home">home</a>moet bijvoorbeeld overeenkomen met iets in de dom zoals <div id="home"></div>.

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:

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

Opties

Naam type standaard Omschrijving
offset nummer 10 Pixels die vanaf de bovenkant moeten worden verschoven bij het berekenen van de scrollpositie.

Evenementen

Evenement Beschrijving
activeren Deze gebeurtenis wordt geactiveerd wanneer een nieuw item wordt geactiveerd door de scrollspy.

Deze plug-in voegt snelle, dynamische tab- en pilfunctionaliteit toe voor het overstappen door lokale inhoud.

Download bestand

Voorbeeldtabbladen

Klik op de onderstaande tabbladen om te schakelen tussen verborgen vensters, zelfs via vervolgkeuzemenu's.

Raw denim, je hebt waarschijnlijk nog nooit van die jeansshort Austin gehoord. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Snor cliche tempor, williamsburg carles veganistische helvetica. Reprehenderit slager retro keffiyeh dromenvanger synth. Cosby trui eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis vest amerikaanse kleding, slager 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.


Bootstrap-tab.js gebruiken

Tabbladen inschakelen via javascript (elk tabblad moet afzonderlijk worden geactiveerd):

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

U kunt afzonderlijke tabbladen op verschillende manieren activeren:

  1. $ ( '#myTab a[href="#profile"]' ). tabblad ( 'toon' ); // Selecteer tabblad op naam
  2. $ ( '#mijnTab a:eerste' ). tabblad ( 'toon' ); // Selecteer eerste tabblad
  3. $ ( '#mijnTab a:laatste' ). tabblad ( 'toon' ); // Selecteer laatste tabblad
  4. $ ( '#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

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Startpagina </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profiel </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Berichten </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Instellingen </a></li>
  6. </ul>

Methoden:

$().tab

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

  1. <ul class = "nav nav-tabs" id = "mijnTab" >
  2. <li class = "active" ><a href = "#home" > Home </a></li>
  3. <li><a href = "#profile" > Profiel </a></li>
  4. <li><a href = "#messages" > Berichten </a></li>
  5. <li><a href = "#settings" > Instellingen </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-inhoud" >
  9. <div class = "tabvenster actief" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-paneel" id = "berichten" > ... </div>
  12. <div class = "tab-paneel" id = "instellingen" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( functie () {
  17. $ ( '#mijnTab a:laatste' ). tabblad ( 'toon' );
  18. })
  19. </script>

Evenementen

Evenement Beschrijving
show Deze gebeurtenis wordt geactiveerd bij tabshow, maar voordat het nieuwe tabblad is weergegeven. Gebruik event.targeten event.relatedTargetom respectievelijk het actieve tabblad en het vorige actieve tabblad (indien beschikbaar) te targeten.
getoond Deze gebeurtenis wordt geactiveerd bij tabshow nadat een tabblad is weergegeven. Gebruik event.targeten event.relatedTargetom respectievelijk het actieve tabblad en het vorige actieve tabblad (indien beschikbaar) te targeten.
  1. $ ( 'a[data-toggle="tab"]' ). aan ( 'getoond' , functie ( e ) {
  2. e . doel // geactiveerd tabblad
  3. e . gerelateerdTarget // vorig tabblad
  4. })

Over knopinfo

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 data-attributen voor lokale titelopslag.

Download bestand

Voorbeeld gebruik van Tooltips

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

Strakke broeken van het volgende niveau keffiyeh , je hebt er waarschijnlijk nog nooit van gehoord. Photo booth baard raw denim boekdruk veganistische messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie duurzame quinoa 8-bit amerikaanse kleding heeft een terry richardson vinyl chambray. Baardstumptown, vesten banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, vier loko mcsweeney's cleanse veganistische chambray. Een echt ironische ambachtsman , ongeacht keytar , scenester farm-to-table banksy Austin twitter omgaan met freegan cred raw denim single-origin coffee viral.


Bootstrap-tooltip.js gebruiken

Activeer de tooltip via javascript:

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

Opties

Naam type standaard Omschrijving
animatie booleaans WAAR pas een css fade-overgang toe op de tooltip
plaatsing tekenreeks|functie 'bovenkant' hoe de tooltip te positioneren - top | onderaan | links | Rechtsaf
selector snaar vals Als er een selector is, worden knopinfo-objecten gedelegeerd aan de opgegeven doelen.
titel tekenreeks | functie '' standaard titelwaarde als de tag 'title' niet aanwezig is
trekker snaar 'zweven' hoe knopinfo wordt geactiveerd - hover | focus | handleiding
vertraging nummer | object 0

vertraging bij het tonen en verbergen van de knopinfo (ms) - is niet van toepassing op het handmatige triggertype

Als een nummer wordt opgegeven, wordt vertraging toegepast op zowel verbergen/weergeven

Objectstructuur is:delay: { show: 500, hide: 100 }

Kop op! Opties voor individuele tooltips kunnen ook worden gespecificeerd door het gebruik van data-attributen.

Markup

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

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

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

.tooltip('verbergen')

Verbergt de knopinfo van een element.

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

.tooltip('toggle')

Schakelt de knopinfo van een element in.

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

Over popovers

Voeg kleine overlays van inhoud, zoals die op de iPad, toe aan elk element voor het huisvesten van secundaire informatie.

* Vereist Tooltip om te worden opgenomen

Download bestand

Voorbeeld hover popover

Beweeg over de knop om de popover te activeren.


Bootstrap-popover.js gebruiken

Popovers inschakelen via javascript:

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

Opties

Naam type standaard Omschrijving
animatie booleaans WAAR pas een css fade-overgang toe op de tooltip
plaatsing tekenreeks|functie 'Rechtsaf' hoe de popover te plaatsen - top | onderaan | links | Rechtsaf
selector snaar vals als er een selector is, worden knopinfo-objecten gedelegeerd aan de opgegeven doelen
trekker snaar 'zweven' hoe knopinfo wordt geactiveerd - hover | focus | handleiding
titel tekenreeks | functie '' standaard titelwaarde als het kenmerk 'titel' niet aanwezig is
inhoud tekenreeks | functie '' standaard inhoudswaarde als het kenmerk 'data-content' niet aanwezig is
vertraging nummer | object 0

vertraging bij het tonen en verbergen van de popover (ms) - is niet van toepassing op het handmatige triggertype

Als een nummer wordt opgegeven, wordt vertraging toegepast op zowel verbergen/weergeven

Objectstructuur is:delay: { show: 500, hide: 100 }

Kop op! Opties voor individuele popovers kunnen ook worden gespecificeerd door het gebruik van data-attributen.

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.

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

.popover('verbergen')

Verbergt een pop-over voor elementen.

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

.popover('toggle')

Schakelt een pop-over voor elementen in.

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

Over meldingen

De alert-plug-in is een kleine klasse voor het toevoegen van close-functionaliteit aan waarschuwingen.

Downloaden

Voorbeeldwaarschuwingen

De plug-in voor waarschuwingen werkt op reguliere waarschuwingsberichten en blokkeert berichten.

Heilige guacamole! U kunt het beste zelf controleren, u ziet er niet al te best uit.

Oh nee! Je hebt een fout!

Verander dit en dat en probeer het opnieuw. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Voer deze actie uit Of doe dit


Bootstrap-alert.js gebruiken

Afwijzing van een waarschuwing via javascript inschakelen:

  1. $ ( ".waarschuwing" ). waarschuwing ()

Markup

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

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

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

Evenementen

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

Evenement Beschrijving
dichtbij Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de closeinstantiemethode wordt aangeroepen.
gesloten Deze gebeurtenis wordt geactiveerd wanneer de waarschuwing is gesloten (wacht tot de CSS-overgangen zijn voltooid).
  1. $ ( '#mijn-waarschuwing' ). bind ( 'gesloten' , functie () {
  2. // doe iets…
  3. })

Over

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

Download bestand

Voorbeeldgebruik

Gebruik de plug-in voor knoppen voor statussen en schakelaars.

Stateful
Enkele schakelaar
Selectievakje
Radio

Bootstrap-button.js gebruiken

Knoppen inschakelen via javascript:

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

Markup

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

  1. <!-- Voeg data-toggle="button" toe om het schakelen op een enkele knop te activeren -->
  2. <button class = "btn" data-toggle = "button" > Enkele schakelaar </button>
  3.  
  4. <!-- Voeg data-toggle="buttons-checkbox" toe voor het in- en uitschakelen van de checkbox-stijl op btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Links </button>
  7. <button class = "btn" > Midden </button>
  8. <button class = "btn" > Rechts </button>
  9. </div>
  10.  
  11. <!-- Voeg data-toggle="buttons-radio" toe voor het omschakelen naar radiostijl op btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Links </button>
  14. <button class = "btn" > Midden </button>
  15. <button class = "btn" > Rechts </button>
  16. </div>

Methoden:

$().button('toggle')

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

Kop op! U kunt automatisch wisselen van een knop inschakelen door het data-toggleattribuut te gebruiken.
  1. <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.

  1. <button class = "btn" data-loading-text = "dingen laden..." > ... </button>
Kop op! Firefox behoudt de uitgeschakelde status bij het laden van pagina's . Een oplossing hiervoor is het gebruik van autocomplete="off".

$().button('reset')

Reset knopstatus - wisselt tekst naar originele tekst.

$().knop(tekenreeks)

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

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

Over

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

Download bestand

* Vereist dat de plug-in Transitions is opgenomen.

Voorbeeld accordeon

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

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Foodtruck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua zet er een vogel op inktvis single-origin koffie nulla veronderstelnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan behalve slager vice lomo. Leggings voor ambachtelijk bier van boer tot bord, ruwe denim esthetische synth nesciunt je hebt er waarschijnlijk nog nooit van gehoord accusamus labore duurzame VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Foodtruck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua zet er een vogel op inktvis single-origin koffie nulla veronderstelnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan behalve slager vice lomo. Leggings voor ambachtelijk bier van boer tot bord, ruwe denim esthetische synth nesciunt je hebt er waarschijnlijk nog nooit van gehoord accusamus labore duurzame VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Foodtruck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua zet er een vogel op inktvis single-origin koffie nulla veronderstelnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan behalve slager vice lomo. Leggings voor ambachtelijk bier van boer tot bord, ruwe denim esthetische synth nesciunt je hebt er waarschijnlijk nog nooit van gehoord accusamus labore duurzame VHS.

Bootstrap-collapse.js gebruiken

Inschakelen via javascript:

  1. $ ( ".collapse" ). instorten ()

Opties

Naam type standaard Omschrijving
ouder selector vals Indien selector dan worden alle samenvouwbare elementen onder de gespecificeerde ouder gesloten wanneer dit samenvouwbare item wordt getoond. (vergelijkbaar met traditioneel accordeongedrag)
schakelaar booleaans WAAR Schakelt het opvouwbare element in bij aanroepen

Markup

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.

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. eenvoudig opvouwbaar
  3. </knop>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>
Kop op! 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.

Methoden:

.collapse (opties)

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

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

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

Evenement Beschrijving
show Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de showinstantiemethode wordt aangeroepen.
getoond Deze gebeurtenis wordt geactiveerd wanneer een samenvouwelement zichtbaar is gemaakt voor de gebruiker (wacht tot css-overgangen zijn voltooid).
verbergen Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de hidemethode is aangeroepen.
verborgen Deze gebeurtenis wordt geactiveerd wanneer een samengevouwen element is verborgen voor de gebruiker (wacht tot de css-overgangen zijn voltooid).
  1. $ ( '#mijnInklapbaar' ). aan ( 'verborgen' , functie () {
  2. // doe iets…
  3. })

Over

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

Download bestand

Voorbeeld

Begin met typen in het onderstaande veld om de typeahead-resultaten weer te geven.


Bootstrap-typeahead.js gebruiken

Bel het typeahead via javascript:

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

Opties

Naam type standaard Omschrijving
bron reeks [ ] De gegevensbron waartegen een query moet worden uitgevoerd.
artikelen nummer 8 Het maximale aantal items dat in de vervolgkeuzelijst moet worden weergegeven.
matcher functie niet hoofdlettergevoelig De methode die wordt gebruikt om te bepalen of een zoekopdracht overeenkomt met een item. Accepteert een enkel argument, itemwaartegen de query moet worden getest. Open de huidige query met this.query. Retourneer een boolean trueals de zoekopdracht een overeenkomst is.
sorteerder functie exacte overeenkomst,
hoofdlettergevoelig,
niet hoofdlettergevoelig
Methode die wordt gebruikt om resultaten voor automatisch aanvullen te sorteren. Accepteert één argument itemsen heeft het bereik van de typeahead-instantie. Verwijs naar de huidige query met this.query.
markeerstift functie markeert alle standaardovereenkomsten Methode die wordt gebruikt om resultaten voor automatisch aanvullen te markeren. Accepteert één argument itemen heeft het bereik van de typeahead-instantie. Zou html moeten retourneren.

Markup

Voeg gegevensattributen toe om een ​​element met typeahead-functionaliteit te registreren.

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

Methoden:

.typeahead(opties)

Initialiseert een invoer met een typeahead.