JavaScript

Väck Bootstraps komponenter till liv – nu med 13 anpassade jQuery-plugins.

Individuell eller sammanställd

Plugins kan inkluderas individuellt (även om vissa har nödvändiga beroenden), eller alla på en gång. Både bootstrap.js och bootstrap.min.js innehåller alla plugins i en enda fil.

Dataattribut

Du kan använda alla Bootstrap-plugins enbart genom markup-API:et utan att skriva en enda rad JavaScript. Detta är Bootstraps första klassens API och bör vara ditt första övervägande när du använder ett plugin.

Som sagt, i vissa situationer kan det vara önskvärt att stänga av den här funktionen. Därför tillhandahåller vi också möjligheten att inaktivera dataattributet API genom att avbinda alla händelser på kroppen med namnintervall med `'data-api'`. Det här ser ut så här:

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

Alternativt, för att rikta in sig på ett specifikt plugin, inkludera bara pluginens namn som ett namnområde tillsammans med data-api-namnområdet så här:

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

Programmatisk API

Vi tror också att du bör kunna använda alla Bootstrap-plugins enbart genom JavaScript API. Alla offentliga API:er är enkla, kedjabara metoder och returnerar den samling som åtgärdats.

  1. $ ( ".btn.danger" ). knappen ( "växla" ). addClass ( "fett" )

Alla metoder bör acceptera ett valfritt alternativobjekt, en sträng som riktar sig mot en viss metod, eller ingenting (som initierar en plugin med standardbeteende):

  1. $ ( "#myModal" ). modal () // initierad med standardvärden
  2. $ ( "#myModal" ). modal ({ keyboard : false }) // initierad utan tangentbord
  3. $ ( "#myModal" ). modal ( 'show' ) // initierar och anropar show omedelbart

Varje plugin exponerar också sin råkonstruktor på en `Constructor`-egenskap: $.fn.popover.Constructor. Om du vill skaffa en viss plugin-instans, hämta den direkt från ett element: $('[rel=popover]').data('popover').

Ingen konflikt

Ibland är det nödvändigt att använda Bootstrap-plugins med andra UI-ramverk. Under dessa omständigheter kan namnutrymmeskollisioner ibland inträffa. Om detta händer kan du anropa .noConflictplugin-programmet du vill återställa värdet på.

  1. var bootstrapButton = $ . fn . knappen . noConflict () // returnera $.fn.button till tidigare tilldelat värde
  2. $ . fn . bootstrapBtn = bootstrapButton // ge $().bootstrapBtn bootstrap-funktionen

evenemang

Bootstrap tillhandahåller anpassade händelser för de flesta plugins unika åtgärder. I allmänhet kommer dessa i en infinitiv och participform - där infinitiv (ex. show) utlöses i början av en händelse, och dess participform (ex. shown) utlöses vid fullbordandet av en handling.

Alla infinitiva händelser tillhandahåller preventDefault-funktionalitet. Detta ger möjlighet att stoppa utförandet av en åtgärd innan den startar.

  1. $ ( '#myModal' ). on ( 'show' , function ( e ) {
  2. om (! data ) returnerar e . preventDefault () // stoppar modal från att visas
  3. })

Om övergångar

För enkla övergångseffekter, inkludera bootstrap-transition.js en gång tillsammans med de andra JS-filerna. Om du använder den kompilerade (eller minifierade) bootstrap.js behöver du inte inkludera detta – det finns redan där.

Användningsfall

Några exempel på övergångsplugin:

  • Glidande eller blekning i modaler
  • Tona ut flikar
  • Tona ut varningar
  • Glidande karusellrutor

Exempel

Modalerna är strömlinjeformade men flexibla dialogrutiner med minsta möjliga funktionalitet och smarta standardinställningar.

Statiskt exempel

En renderad modal med sidhuvud, brödtext och uppsättning åtgärder i sidfoten.

  1. <div class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "stäng" data-dismiss = "modal" aria-hidden = "true" > × </button>
  4. <h3> Modal rubrik </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" > Stäng </a>
  11. <a href = "#" class = "btn btn-primary" > Spara ändringar </a>
  12. </div>
  13. </div>

Live-demo

Växla en modal via JavaScript genom att klicka på knappen nedan. Den kommer att glida ned och tona in från toppen av sidan.

  1. <!-- Knapp för att utlösa modal -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Starta demomodal </a>
  3.  
  4. <!-- Modal -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div class = "modal-header" >
  7. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > Modal header </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> En fin kropp... </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Stäng </button>
  15. <button class = "btn btn-primary" > Spara ändringar </button>
  16. </div>
  17. </div>

Användande

Via dataattribut

Aktivera en modal utan att skriva JavaScript. Ställ in data-toggle="modal"på ett kontrollelement, som en knapp, tillsammans med en data-target="#foo"eller href="#foo"för att rikta in en specifik modal att växla.

  1. <button type = "button" data-toggle = "modal" data-target = "#myModal" > Starta modal </button>

Via JavaScript

Anropa en modal med id myModalmed en enda rad JavaScript:

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

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-, som i data-backdrop="".

namn typ standard beskrivning
bakgrund booleskt Sann Inkluderar ett modal-bakgrundselement. Alternativt, ange staticför en bakgrund som inte stänger modalen vid klick.
tangentbord booleskt Sann Stänger modalen när escape-tangenten trycks ned
show booleskt Sann Visar modalen när den initieras.
avlägsen väg falsk

Om en fjärr-url tillhandahålls kommer innehållet att laddas via jQuerys loadmetod och injiceras i .modal-body. Om du använder data-API kan du alternativt använda hreftaggen för att ange fjärrkällan. Ett exempel på detta visas nedan:

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

Metoder

.modal(alternativ)

Aktiverar ditt innehåll som en modal. Accepterar ett valfritt alternativ object.

  1. $ ( '#myModal' ). modal ({
  2. tangentbord : falskt
  3. })

.modal('toggle')

Växlar manuellt en modal.

  1. $ ( '#myModal' ). modal ( 'växla' )

.modal('show')

Öppnar en modal manuellt.

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

.modal('hide')

Döljer en modal manuellt.

  1. $ ( '#myModal' ). modal ( 'gömma' )

evenemang

Bootstraps modalklass avslöjar några händelser för att koppla in modal funktionalitet.

Händelse Beskrivning
show Denna händelse aktiveras omedelbart när showinstansmetoden anropas.
visad Den här händelsen aktiveras när modalen har gjorts synlig för användaren (väntar på att css-övergångar ska slutföras).
Dölj Denna händelse aktiveras omedelbart när hideinstansmetoden har anropats.
dold Den här händelsen aktiveras när modalen har döljts för användaren (väntar på att css-övergångar ska slutföras).
  1. $ ( '#myModal' ). on ( 'dold' , function () {
  2. // göra någonting…
  3. })

Exempel i navbar

ScrollSpy-pluginen är till för att automatiskt uppdatera nav-mål baserat på rullningsposition. Bläddra i området under navigeringsfältet och se hur den aktiva klassen ändras. Underposterna i rullgardinsmenyn kommer också att markeras.

@fett

Annonsleggings keytar, brunch-id art party dolor labore. Pitchfork yr enim lo-fi innan de sålde slut qui. Tumblr från jord till bord cykelrättigheter oavsett. Anim keffiyeh carles kofta. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jeans shorts, williamsburg hoodie minim qui du förmodligen inte har hört talas om dem et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tatuerade accusamus, cred ironi biodiesel keffiyeh hantverkare ullamco consequat.

@mdo

Veniam marfa mustasch skateboard, adipisicing fugiat velit höggaffelskägg. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat fyra loko nisi, ea helvetica nulla carles. Tatuerad cosbytröja food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles icke estetisk övning quis gentrify. Brooklyn adipisicing hantverksöl vice keytar deserunt.

ett

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 är adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, hållbar delectus consectetur fanny pack iphone.

två

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 förmodligen inte har hört talas om dem consequat hoodie glutenfri lo-fi fap aliquip. Labore elit placeat innan de sålde slut, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan hantverksöl seitan färdiggjord velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Användande

Via dataattribut

För att enkelt lägga till scrollspy-beteende till din toppfältsnavigering, lägg bara data-spy="scroll"till elementet du vill spionera på (vanligtvis är detta kroppen) och data-target=".navbar"för att välja vilken nav som ska användas. Du vill använda scrollspy med en .navkomponent.

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

Via JavaScript

Ring scrollspy via JavaScript:

  1. $ ( '#navbar' ). scrollspy ()
Se upp! Navbar-länkar måste ha lösbara id-mål. Till exempel måste ett <a href="#home">home</a>måste motsvara något i dom som <div id="home"></div>.

Metoder

.scrollspy('refresh')

När du använder scrollspy i kombination med att lägga till eller ta bort element från DOM, måste du anropa uppdateringsmetoden så här:

  1. $ ( '[data-spy="scroll"]' ). varje ( funktion () {
  2. var $spy = $ ( detta ). scrollspy ( 'uppdatera' )
  3. });

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-, som i data-offset="".

namn typ standard beskrivning
offset siffra 10 Pixlar att förskjuta från toppen vid beräkning av rullningsposition.

evenemang

Händelse Beskrivning
Aktivera Denna händelse aktiveras när ett nytt objekt aktiveras av scrollspy.

Exempel flikar

Lägg till snabb, dynamisk flikfunktion för övergång genom paneler med lokalt innehåll, även via rullgardinsmenyer.

Raw denim du förmodligen inte har hört talas om dem jeans shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustasch cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby tröja eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan amerikanska kläder, slaktare 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.


Användande

Aktivera flikar med flikar via JavaScript (varje flik måste aktiveras individuellt):

  1. $ ( '#myTab a' ). klicka ( funktion ( e ) {
  2. e . preventDefault ();
  3. $ ( detta ). tab ( 'visa' );
  4. })

Du kan aktivera enskilda flikar på flera sätt:

  1. $ ( '#myTab a[href="#profile"]' ). tab ( 'visa' ); // Välj flik efter namn
  2. $ ( '#myTab a:first' ). tab ( 'visa' ); // Välj första fliken
  3. $ ( '#myTab a:last' ). tab ( 'visa' ); // Välj sista fliken
  4. $ ( '#myTab li:eq(2) a' ). tab ( 'visa' ); // Välj tredje flik (0-indexerad)

Pålägg

Du kan aktivera en navigering med flikar eller piller utan att skriva något JavaScript genom att helt enkelt ange data-toggle="tab"eller data-toggle="pill"på ett element. Om du lägger till navklasserna nav-tabsoch på fliken ultillämpas Bootstrap-flikens stil.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Hem </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Meddelanden </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Inställningar </a></li>
  6. </ul>

Metoder

$().tab

Aktiverar ett flikelement och innehållsbehållare. Tab ska ha antingen en data-targeteller en hrefinriktning på en containernod i DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Hem </a></li>
  3. <li><a href = "#profile" > Profil </a></li>
  4. <li><a href = "#messages" > Meddelanden </a></li>
  5. <li><a href = "#settings" > Inställningar </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-innehåll" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "meddelanden" > ... </div>
  12. <div class = "tab-pane" id = "inställningar" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( function () {
  17. $ ( '#myTab a:last' ). tab ( 'visa' );
  18. })
  19. </script>

evenemang

Händelse Beskrivning
show Den här händelsen aktiveras vid flikvisning, men innan den nya fliken har visats. Använd event.targetoch event.relatedTargetför att rikta in den aktiva fliken respektive den föregående aktiva fliken (om tillgänglig).
visad Den här händelsen aktiveras vid flikvisning efter att en flik har visats. Använd event.targetoch event.relatedTargetför att rikta in den aktiva fliken respektive den föregående aktiva fliken (om tillgänglig).
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'visas' , funktion ( e ) {
  2. e . mål // aktiverad flik
  3. e . relatedTarget // föregående flik
  4. })

Exempel

Inspirerad av det utmärkta plugin-programmet jQuery.tipsy skrivet av Jason Frame; Verktygstips är en uppdaterad version som inte förlitar sig på bilder, använder CSS3 för animationer och dataattribut för lokal titellagring.

Av prestandaskäl är verktygstipset och popover-data-apierna opt-in, vilket innebär att du måste initiera dem själv .

Håll muspekaren över länkarna nedan för att se verktygstips:

Tighta byxor nästa nivå keffiyeh du har förmodligen inte hört talas om dem. Photo booth skägg rå denim boktryck vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie hållbara quinoa 8-bitars amerikanska kläder har en frotté richardson vinyl chambray. Beard stumptown, koftor banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, fyra loko mcsweeney's cleanse vegan chambray. En riktigt ironisk hantverkare oavsett keytar , scenester farm-to-table banksy Austin twitter handtag freegan cred raw denim enkaffe viral.

Fyra riktningar

Verktygstips i inmatningsgrupper

När du använder verktygstips och popovers med Bootstrap-inmatningsgrupperna måste du ställa in containeralternativet (dokumenterat nedan) för att undvika oönskade biverkningar.


Användande

Aktivera verktygstipset via JavaScript:

  1. $ ( '#exempel' ). verktygstips ( alternativ )

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-, som i data-animation="".

namn typ standard beskrivning
animation booleskt Sann tillämpa en css-tonningsövergång på verktygstipset
html booleskt falsk Infoga html i verktygstipset. Om det är falskt kommer jquerys textmetod att användas för att infoga innehåll i domen. Använd text om du är orolig för XSS-attacker.
placering sträng | fungera 'topp' hur man placerar verktygstipset - topp | botten | vänster | höger
väljare sträng falsk Om en väljare tillhandahålls kommer verktygstipsobjekt att delegeras till de angivna målen.
titel sträng | fungera '' standardvärde för titel om "title"-taggen inte finns
utlösare sträng "sväva fokus" hur verktygstips triggas - klicka på | sväva | fokus | manuell. Notera att du passerar trigger multiple, space seperated, trigger typer.
dröjsmål nummer | objekt 0

fördröjning av att visa och dölja verktygstipset (ms) - gäller inte manuell triggertyp

Om ett nummer tillhandahålls, tillämpas fördröjning på både hide/show

Objektstrukturen är:delay: { show: 500, hide: 100 }

behållare sträng | falsk falsk

Lägger till verktygstipset till ett specifikt elementcontainer: 'body'

Se upp! Alternativ för individuella verktygstips kan alternativt specificeras genom användning av dataattribut.

Pålägg

  1. <a href = "#" data-toggle = "tooltip" title = "första verktygstips" > håll muspekaren över mig </a>

Metoder

$().tooltip(options)

Bifogar en verktygstipshanterare till en elementsamling.

.tooltip('show')

Visar ett elements verktygstips.

  1. $ ( '#element' ). verktygstips ( 'visa' )

.tooltip('hide')

Döljer ett elements verktygstips.

  1. $ ( '#element' ). verktygstips ( 'dölj' )

.tooltip('toggle')

Växlar ett elements verktygstips.

  1. $ ( '#element' ). verktygstips ( 'växla' )

.tooltip('destroy')

Döljer och förstör ett elements verktygstips.

  1. $ ( '#element' ). verktygstips ( 'förstör' )

Exempel

Lägg till små överlagringar av innehåll, som de på iPad, till valfritt element för att hysa sekundär information. Håll muspekaren över knappen för att utlösa popover. Kräver verktygstips för att vara med.

Statisk popover

Fyra alternativ är tillgängliga: topp-, höger-, botten- och vänsterjusterad.

Popover topp

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover höger

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover botten

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover vänster

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Ingen uppmärkning som visas som popovers genereras från JavaScript och innehåll inom endata attribut.

Live-demo

Fyra riktningar


Användande

Aktivera popovers via JavaScript:

  1. $ ( '#exempel' ). popover ( alternativ )

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-, som i data-animation="".

namn typ standard beskrivning
animation booleskt Sann tillämpa en css-tonningsövergång på verktygstipset
html booleskt falsk Infoga html i popover. Om det är falskt kommer jquerys textmetod att användas för att infoga innehåll i domen. Använd text om du är orolig för XSS-attacker.
placering sträng | fungera 'höger' hur man placerar popover - toppen | botten | vänster | höger
väljare sträng falsk om en väljare tillhandahålls kommer verktygstipsobjekt att delegeras till de angivna målen
utlösare sträng 'klick' hur popover utlöses - klicka på | sväva | fokus | manuell
titel sträng | fungera '' standardvärde för titel om "title"-attributet inte finns
innehåll sträng | fungera '' standardvärde för innehåll om "data-content"-attributet inte finns
dröjsmål nummer | objekt 0

fördröjning av att visa och dölja popover (ms) - gäller inte manuell triggertyp

Om ett nummer tillhandahålls, tillämpas fördröjning på både hide/show

Objektstrukturen är:delay: { show: 500, hide: 100 }

behållare sträng | falsk falsk

Lägger till popover till ett specifikt elementcontainer: 'body'

Se upp!Alternativ för individuella popovers kan alternativt specificeras genom användning av dataattribut.

Pålägg

Av prestandaskäl är verktygstips och Popover-data-apis aktiverade. Om du vill använda dem anger du bara ett väljaralternativ.

Metoder

$().popover(alternativ)

Initierar popovers för en elementsamling.

.popover('show')

Avslöjar en popover för element.

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

.popover('hide')

Döljer en popover för element.

  1. $ ( '#element' ). popover ( 'gömma' )

.popover('toggle')

Växlar en popover för element.

  1. $ ( '#element' ). popover ( 'växla' )

.popover('destroy')

Döljer och förstör ett elements popover.

  1. $ ( '#element' ). popover ( 'förstöra' )

Exempel på varningar

Lägg till avvisningsfunktion i alla varningsmeddelanden med detta plugin.

Heliga guacamole! Bäst kolla dig själv, du ser inte för bra ut.

Åh knäpp! Du har ett fel!

Ändra det och det och försök igen. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Vidta den här åtgärden Eller gör så här


Användande

Aktivera avvisande av en varning via JavaScript:

  1. $ ( ".alert" ). varning ()

Pålägg

Lägg bara data-dismiss="alert"till i din stängningsknapp för att automatiskt ge en aviseringsfunktion.

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

Metoder

$().alert()

Omsluter alla varningar med nära funktionalitet. För att dina varningar ska animeras när de är stängda, se till att klassen och redan har .fadetillämpats .inpå dem.

.alert('stäng')

Stänger en varning.

  1. $ ( ".alert" ). varning ( 'stäng' )

evenemang

Bootstraps varningsklass avslöjar några händelser för att koppla in varningsfunktioner.

Händelse Beskrivning
stänga Denna händelse aktiveras omedelbart när closeinstansmetoden anropas.
stängd Den här händelsen utlöses när varningen har stängts (väntar på att css-övergångar ska slutföras).
  1. $ ( '#my-alert' ). bind ( 'stängd' , funktion () {
  2. // göra någonting…
  3. })

Exempel på användningar

Gör mer med knappar. Kontrollera knapptillstånd eller skapa grupper av knappar för fler komponenter som verktygsfält.

Statlig

Lägg data-loading-text="Loading..."till för att använda ett laddningstillstånd på en knapp.

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Laddar..." > Laddar tillstånd </button>

Enkel växling

Lägg data-toggle="button"till för att aktivera växling på en enda knapp.

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

Kryssruta

Lägg data-toggle="buttons-checkbox"till för växling av kryssrutastil på btn-group.

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > Vänster </button>
  3. <button type = "button" class = "btn btn-primary" > Middle </button>
  4. <button type = "button" class = "btn btn-primary" > Höger </button>
  5. </div>

Radio

Lägg data-toggle="buttons-radio"till för att växla radiostil på btn-grupp.

  1. <div class = "btn-group" data-toggle = "buttons-radio" >
  2. <button type = "button" class = "btn btn-primary" > Vänster </button>
  3. <button type = "button" class = "btn btn-primary" > Middle </button>
  4. <button type = "button" class = "btn btn-primary" > Höger </button>
  5. </div>

Användande

Aktivera knappar via JavaScript:

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

Pålägg

Dataattribut är integrerade i knappens plugin. Kolla in exempelkoden nedan för de olika uppmärkningstyperna.

alternativ

Ingen

Metoder

$().button('toggle')

Växlar push-tillstånd. Ger knappen intrycket att den har aktiverats.

Se upp! Du kan aktivera automatisk växling av en knapp genom att använda data-toggleattributet.
  1. <button type = "button" class = "btn" data-toggle = "button" > </button>

$().button('laddar in')

Ställer in knappstatus till laddning - inaktiverar knapp och byter text till laddningstext. Laddande text ska definieras på knappelementet med hjälp av dataattributet data-loading-text.

  1. <button type = "button" class = "btn" data-loading-text = "laddar in saker..." > ... </button>
Se upp! Firefox behåller det inaktiverade tillståndet över sidhämtning . En lösning för detta är att använda autocomplete="off".

$().button('reset')

Återställer knappstatus - byter text till originaltext.

$().button(sträng)

Återställer knappstatus - byter text till valfritt datadefinierat textläge.

  1. <button type = "button" class = "btn" data-complete-text = "finished!" > ... </knapp>
  2. <script>
  3. $ ( '.btn' ). knapp ( 'komplett' )
  4. </script>

Handla om

Få basstilar och flexibelt stöd för hopfällbara komponenter som dragspel och navigering.

* Kräver att plugin-programmet Transitions ingår.

Exempel på dragspel

Med hjälp av kollaps-pluginen byggde vi en enkel dragspelstil-widget:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua sätta en fågel på det bläckfisk enkaffe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Annons vegan excepteur butcher vice lomo. Leggings occaecat hantverksöl från jord till bord, rå denim estetisk synth nesciunt du förmodligen inte har hört talas om dem accusamus labore hållbar VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua sätta en fågel på det bläckfisk enkaffe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Annons vegan excepteur butcher vice lomo. Leggings occaecat hantverksöl från jord till bord, rå denim estetisk synth nesciunt du förmodligen inte har hört talas om dem accusamus labore hållbar VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua sätta en fågel på det bläckfisk enkaffe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Annons vegan excepteur butcher vice lomo. Leggings occaecat hantverksöl från jord till bord, rå denim estetisk synth nesciunt du förmodligen inte har hört talas om dem accusamus labore hållbar VHS.
  1. <div class = "dragspel" id = "dragspel2" >
  2. <div class = "dragspelsgrupp" >
  3. <div class = "accordion-heading" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. Hopfällbar gruppartikel #1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "dragspel-kropp kollapsa in" >
  9. <div class = "dragspel-inre" >
  10. Anim pariatur cliche...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "dragspelsgrupp" >
  15. <div class = "accordion-heading" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. Hopfällbar gruppobjekt #2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "dragspel-kropp kollaps" >
  21. <div class = "dragspel-inre" >
  22. Anim pariatur cliche...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

Du kan också använda plugin utan dragspelsmärkning. Få en knapp att växla mellan att expandera och kollapsa ett annat element.

  1. <button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. enkel hopfällbar
  3. </button>
  4.  
  5. <div id = "demo" class = "kollaps in" > </div>

Användande

Via dataattribut

Lägg bara till data-toggle="collapse"och ett data-targettill-element för att automatiskt tilldela kontroll över ett hopfällbart element. Attributet data-targetaccepterar en css-väljare att tillämpa komprimeringen på. Se till att lägga till klassen collapsei det hopfällbara elementet. Om du vill att den ska öppnas som standard lägger du till den extra klassen in.

Lägg till dataattributet för att lägga till dragspelsliknande grupphantering till en hopfällbar kontroll data-parent="#selector". Se demon för att se detta i aktion.

Via JavaScript

Aktivera manuellt med:

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

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-, som i data-parent="".

namn typ standard beskrivning
förälder väljare falsk Om väljaren kommer alla hopfällbara element under den angivna överordnade att stängas när detta hopfällbara objekt visas. (liknar traditionellt dragspelsbeteende)
växla booleskt Sann Växlar det hopfällbara elementet vid anrop

Metoder

.collapse(alternativ)

Aktiverar ditt innehåll som ett hopfällbart element. Accepterar ett valfritt alternativ object.

  1. $ ( '#myCollapsible' ). kollapsa ({
  2. växla : falskt
  3. })

.collapse('toggle')

Växlar ett hopfällbart element till att visas eller döljas.

.collapse('show')

Visar ett hopfällbart element.

.collapse('hide')

Döljer ett hopfällbart element.

evenemang

Bootstraps kollapsklass avslöjar några händelser för att koppla in kollapsfunktionalitet.

Händelse Beskrivning
show Denna händelse aktiveras omedelbart när showinstansmetoden anropas.
visad Den här händelsen utlöses när ett kollapselement har gjorts synligt för användaren (väntar på att css-övergångar ska slutföras).
Dölj Denna händelse aktiveras omedelbart när hidemetoden har anropats.
dold Den här händelsen utlöses när ett kollapselement har dolts för användaren (väntar på att css-övergångar ska slutföras).
  1. $ ( '#myCollapsible' ). on ( 'dold' , function () {
  2. // göra någonting…
  3. })

Exempel

Ett enkelt, enkelt utökat plugin för att snabbt skapa eleganta skrivhuvuden med vilken form som helst.

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

Du vill ställa in autocomplete="off"för att förhindra att standardwebbläsarmenyer visas över rullgardinsmenyn Bootstrap typahead.


Användande

Via dataattribut

Lägg till dataattribut för att registrera ett element med typahead-funktion som visas i exemplet ovan.

Via JavaScript

Ring skrivhuvudet manuellt med:

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

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-, som i data-source="".

namn typ standard beskrivning
källa array, funktion [ ] Datakällan att fråga mot. Kan vara en array av strängar eller en funktion. Funktionen skickas två argument, queryvärdet i inmatningsfältet och processåteruppringningen. Funktionen kan användas synkront genom att returnera datakällan direkt eller asynkront via processåteruppringningens enda argument.
föremål siffra 8 Det maximala antalet objekt som ska visas i rullgardinsmenyn.
minLängd siffra 1 Den minsta teckenlängden som krävs innan förslag på autoslutförande utlöses
matchare fungera fallet okänslig Metoden som används för att avgöra om en fråga matchar ett objekt. Accepterar ett enda argument, itemmot vilket frågan ska testas. Öppna den aktuella frågan med this.query. Returnera ett booleskt värde trueom frågan är en matchning.
sorterare fungera exakt matchning,
skiftlägeskänslig,
skiftlägesokänslig
Metod som används för att sortera resultat för autoslutförande. Accepterar ett enda argument itemsoch har omfattningen av typahead-instansen. Referera till den aktuella frågan med this.query.
uppdaterare fungera returnerar vald artikel Metoden som används för att returnera vald artikel. Accepterar ett enda argument, itemoch har omfattningen av typahead-instansen.
överstrykningspenna fungera markerar alla standardmatchningar Metod som används för att markera resultat för autoslutförande. Accepterar ett enda argument itemoch har omfattningen av typahead-instansen. Bör returnera html.

Metoder

.typeahead(alternativ)

Initierar en indata med ett skrivhuvud.

Exempel

Undernavigeringen till vänster är en livedemo av affix-plugin.


Användande

Via dataattribut

För att enkelt lägga till affixbeteende till ett element, lägg bara data-spy="affix"till elementet du vill spionera på. Använd sedan förskjutningar för att definiera när du ska koppla på och av fästningen av ett element.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Se upp! Du måste hantera positionen för ett fäst element och beteendet hos dess omedelbara förälder. Positionen styrs av affix, affix-top, och affix-bottom. Kom ihåg att leta efter en potentiellt kollapsad förälder när affixet startar eftersom det tar bort innehåll från sidans normala flöde.

Via JavaScript

Anropa affix-plugin via JavaScript:

  1. $ ( '#navbar' ). fästa ()

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-, som i data-offset-top="200".

namn typ standard beskrivning
offset nummer | funktion | objekt 10 Pixlar att förskjuta från skärmen vid beräkning av rullningsposition. Om ett enda nummer anges, kommer offset att tillämpas i både övre och vänster riktning. För att lyssna efter en enskild riktning, eller flera unika förskjutningar, ange bara ett objekt offset: { x: 10 }. Använd en funktion när du dynamiskt behöver tillhandahålla en offset (användbart för vissa responsiva designs).