Vores Modal-plugin er et super slankt bud på det traditionelle modal js-plugin, der er særlig opmærksom på kun at inkludere den nøgne funktionalitet, som vi har brug for her på twitter.

Hent

Bruger bootstrap-modal

$ ( '#my-modal' ). modal ( valgmuligheder )

Muligheder

Navn	type	Standard	beskrivelse
baggrund	boolesk	falsk	Indeholder et modal-baggrundselement
tastatur	boolesk	falsk	Lukker modalen, når der trykkes på escape-tasten
at vise	boolesk	falsk	Åbner modal på klasseinitialisering

Markup

Du kan nemt aktivere modals på din side uden at skulle skrive en eneste linje med javascript. Bare giv et element en data-controls-modalattribut, der svarer til et modalt element-id, og når der klikkes på det, vil det starte din modal. For at tilføje modale muligheder skal du bare inkludere dem som dataattributter.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true" > Start Modal </a>    

Bemærk Hvis du vil have din modal til at animere ind og ud, skal du blot tilføje en .fadeklasse til dit .modalelement (se demoen for at se dette i aktion).

Metoder

.modal(valgmuligheder)

Aktiverer dit indhold som en modal. Accepterer en valgfri indstilling object.

$ ( '#my-modal' ). modal ({
  closeOnEscape : sandt 
})

.modal('toggle')

Skifter manuelt en modal.

$ ( '#my-modal' ). modal ( 'skift' )

.modal('show')

Åbner manuelt en modal.

$ ( '#my-modal' ). modal ( 'vis' )

.modal('skjul')

Skjuler manuelt en modal.

$ ( '#my-modal' ). modal ( 'skjul' )

.modal(true)

Returnerer en elements modal klasseinstans.

$ ( '#my-modal' ). modal ( sandt )

Bemærk Alternativt kan dette hentes med $().data('modal').

Begivenheder

Bootstraps modal-klasse afslører nogle få hændelser for tilslutning til modal funktionalitet.

Begivenhed	Beskrivelse
at vise	Denne hændelse udløses med det samme, når showinstansmetoden kaldes.
vist	Denne hændelse udløses, når modalen er blevet gjort synlig for brugeren (vil vente på, at css-overgange er fuldført).
skjule	Denne hændelse udløses straks, når hideinstansmetoden er blevet kaldt.
skjult	Denne hændelse udløses, når modalen er færdig med at blive skjult for brugeren (vil vente på, at css-overgange er fuldført).

$ ( '#my-modal' ). bind ( 'skjult' , funktion () {   
  // gør noget ...
})

Demo

Start Modal

Dette plugin er til at tilføje dropdown-interaktion til bootstrap-topbjælken eller navigation med faner.

Hent

Brug af boostrap-dropdown.js

$ ( '#topbar' ). dropdown ()

Markup

Brug data-dropdownattributten for hurtigt at tilføje dropdown-funktionalitet til ethvert nav-element. Enhver gyldig bootstrap dropdown vil automatisk blive aktiveret.

<ul class = "faner" > 
  <li class = "active" ><a href = "#" > Startside </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Dropdown </a>  
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > Sekundært link </a></li> 
      <li><a href = "#" > Noget andet her </a></li> 
      <li klasse = "deler" ></li> 
      <li><a href = "#" > Endnu et link </a></li> 
    </ul>
  </li>
</ul>

Bemærk Hvis din brugergrænseflade har flere rullemenuer, kan du overveje at tilføje data-dropdownattributten til et mere signifikant containerelement som .tabseller .topbar.

Metoder

$().dropdown()

Et programatisk api til aktivering af menuer for en given toplinje eller navigation med faner.

Demo

Dette plugin er til at tilføje scrollspy-interaktionen (automatisk opdatering af nav) til bootstrap-topbjælken.

Hent

Brug af boostrap-scrollspy.js

$ ( '#topbar' ). dropdown ()

Markup

For nemt at tilføje scrollspy-adfærd til din nav, skal du blot tilføje data-scrollspyattributten til .topbar.

<div class = "topbar" data-scrollspy = "scrollspy" > ... </div>   

Metoder

$().scrollspy()

Automatisk aktiverer navigationsknapper efter brugerens rulleposition.

$ ( 'body > .topbar' ). scrollSpy ()

Bemærk Topbar-ankertags skal have opløselige id-mål. For eksempel skal et <a href="#home">home</a>must svare til noget i dom som <div id="home"></div>.

.scrollspy('refresh')

Scrollspy'en cacherer nav-knapper og sektionskoordinater for ydeevne. Hvis du har brug for at opdatere denne cache (sandsynligvis hvis du har dynamisk indhold), skal du bare kalde denne opdateringsmetode. Hvis du brugte dataattributten til at definere din scrollspy, skal du bare ringe til refresh på kroppen.

$ ( 'krop' ). scrollspy ( 'opdater' )

Demo

Tjek topbjælkens navigation på denne side.

Dette plugin tilføjer hurtig, dynamisk fane- og pillefunktionalitet.

Hent

Brug af boostrap-tabs.js

$ ( '.tabs' ). faner ()

Markup

Du kan aktivere en fane- eller pillenavigation uden at skrive noget javascript ved blot at give dem en data-tabseller data-pillsattribut.

 <ul class = "tabs" data-tabs = "tabs" > ... </ul>   

Metoder

$().tabs eller $().piller

Aktiverer fane- og pillefunktionalitet for en given beholder. Fanelinks skal referere til id'er i dokumentet.

<ul class = "faner" > 
  <li class = "active" ><a href = "#home" > Startside </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Beskeder </a></li> 
  <li><a href = "#settings" > Indstillinger </a></li> 
</ul>
 
<div class = "pille-indhold" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "profil" > ... </div> 
  <div id = "meddelelser" > ... </div> 
  <div id = "indstillinger" > ... </div> 
</ul>
 
<script>
  $ ( funktion () {  
    $ ( '.tabs' ). faner ()
  })
</script>

Demo

• Hjem
• Profil
• Beskeder
• Indstillinger

Baseret på det fremragende jQuery.tipsy plugin skrevet af Jason Frame; twipsy er en opdateret version, som ikke er afhængig af billeder, bruger css3 til animationer og dataattributter til titellagring!

Hent

Brug af bootstrap-twipsy.js

$ ( '#eksempel' ). twipsy ( valgmuligheder )

Muligheder

Navn	type	Standard	beskrivelse
animere	boolesk	rigtigt	anvende en css-fade-overgang til værktøjstip
forsinket	nummer	0	forsinkelse før visning af værktøjstip (ms)
delayOut	nummer	0	forsinkelse, før værktøjstip skjules (ms)
Falde tilbage	snor	''	tekst, der skal bruges, når der ikke er nogen værktøjstip-titel
placering	snor	'over'	hvordan placeres værktøjstip - ovenfor | nedenfor | venstre | ret
html	boolesk	falsk	tillader html-indhold i værktøjstip
Direkte	boolesk	falsk	brug hændelsesdelegering i stedet for individuelle hændelseshandlere
offset	nummer	0	pixel offset af værktøjstip fra målelement
titel	streng | fungere	'titel'	attribut eller metode til at hente titeltekst
udløser	snor	'hover'	hvordan værktøjstip udløses - svæv | fokus | brugervejledning

Metoder

$().twipsy(optioner)

Knytter en twipsy-handler til en elementsamling.

.twipsy('vis')

Afslører en twipsy elementer.

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

.twipsy('skjul')

Skjuler en elementer twipsy.

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

.twipsy(true)

Returnerer en elements twipsy-klasseinstans.

$ ( '#element' ). twipsy ( sandt )

Bemærk Alternativt kan dette hentes med $().data('twipsy').

Demo

Popover-plugin'et giver en enkel grænseflade til at tilføje popovers til din applikation. Det udvider boostrap-twipsy.js plugin, så sørg for at få fat i den fil også, når du inkluderer popovers i dit projekt!

Hent

Brug af boostrap-popover.js

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

Muligheder

Navn	type	Standard	beskrivelse
animere	boolesk	rigtigt	anvende en css-fade-overgang til værktøjstip
forsinket	nummer	0	forsinkelse før visning af værktøjstip (ms)
delayOut	nummer	0	forsinkelse, før værktøjstip skjules (ms)
Falde tilbage	snor	''	tekst, der skal bruges, når der ikke er nogen værktøjstip-titel
placering	snor	'ret'	hvordan placeres værktøjstip - ovenfor | nedenfor | venstre | ret
html	boolesk	falsk	tillader html-indhold i værktøjstip
Direkte	boolesk	falsk	brug hændelsesdelegering i stedet for individuelle hændelseshandlere
offset	nummer	0	pixel offset af værktøjstip fra målelement
titel	streng | fungere	'titel'	attribut eller metode til at hente titeltekst
indhold	streng | fungere	'data-indhold'	attribut eller metode til at hente indholdstekst
udløser	snor	'hover'	hvordan værktøjstip udløses - svæv | fokus | brugervejledning

Metoder

$().popover(indstillinger)

Initialiserer popovers for en elementsamling.

.popover('vis')

Afslører en popover for elementer.

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

.popover('skjul')

Skjuler en popover for elementer.

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

Demo

svæv for popover

Alert-plugin'et er en superlille klasse til at tilføje tæt funktionalitet til alarmer.

Hent

Brug af bootstrap-alerts.js

$ ( ".alert-message" ). advarsel ()

Markup

Du skal blot tilføje en data-alertegenskab til dine alarmbeskeder for automatisk at give dem tæt funktionalitet.

Metoder

$().alert()

Omslutter alle advarsler med tæt funktionalitet. For at få dine underretninger til at animere, når de er lukket, skal du sørge for, at klassen .fadeog .inklassen allerede er anvendt på dem.

.alert('close')

Lukker en alarm.

$ ( ".alert-message" ). alarm ( 'luk' )

Demo