Vår Modal-plugin er en superslank versjon av den tradisjonelle modal js-pluginen, og tar spesielt vare på å inkludere bare funksjonaliteten vi trenger her på twitter.

nedlasting

Bruker bootstrap-modal

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

Alternativer

Navn	type	misligholde	beskrivelse
bakteppe	boolsk	falsk	Inkluderer et modalt bakteppeelement
tastatur	boolsk	falsk	Lukker modalen når escape-tasten trykkes
forestilling	boolsk	falsk	Åpner modal ved klasseinitialisering

Markup

Du kan enkelt aktivere modaler på siden din uten å måtte skrive en eneste linje med javascript. Bare gi et element et data-controls-modalattributt som tilsvarer en modal element-ID, og ​​når du klikker, vil det starte din modal. For å legge til modale alternativer, inkluderer du dem også som dataattributter.

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

Merk Hvis du vil at din modal skal animere inn og ut, bare legg til en .fadeklasse til .modalelementet ditt (se demoen for å se dette i aksjon).

Metoder

.modal(alternativer)

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

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

.modal('toggle')

Bytter en modal manuelt.

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

.modal('show')

Åpner en modal manuelt.

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

.modal('skjul')

Skjuler en modal manuelt.

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

.modal(true)

Returnerer en elements modal klasseforekomst.

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

Merknad Alternativt kan dette hentes med $().data('modal').

arrangementer

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

Begivenhet	Beskrivelse
forestilling	Denne hendelsen utløses umiddelbart når showinstansmetoden kalles.
vist	Denne hendelsen utløses når modalen er gjort synlig for brukeren (vil vente på at css-overgangene er fullført).
gjemme seg	Denne hendelsen utløses umiddelbart når hideinstansmetoden er kalt.
skjult	Denne hendelsen utløses når modalen er ferdig skjult for brukeren (vil vente på at css-overgangene er fullført).

$ ( '#my-modal' ). bind ( 'skjult' , funksjon () {   
  // gjør noe ...
})

Demo

Start Modal

Dette pluginet er for å legge til rullegardininteraksjon til bootstrap-toppen eller navigering med faner.

nedlasting

Bruker boostrap-dropdown.js

$ ( '#topbar' ). rullegardin ()

Markup

For raskt å legge til rullegardinfunksjonalitet til et hvilket som helst nav-element, bruk data-dropdownattributtet. Enhver gyldig bootstrap-rullegardin vil automatisk bli aktivert.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Hjem </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Dropdown </a>  
    <ul class = "rullegardinmeny" > 
      <li><a href = "#" > Sekundær lenke </a></li> 
      <li><a href = "#" > Noe annet her </a></li> 
      <li class = "deler" ></li> 
      <li><a href = "#" > En annen lenke </a></li> 
    </ul>
  </li>
</ul>

Merk Hvis brukergrensesnittet ditt har flere rullegardiner, bør du vurdere å legge til data-dropdownattributtet til et mer signifikant beholderelement som .tabseller .topbar.

Metoder

$().dropdown()

Et programatisk API for å aktivere menyer for en gitt topplinje eller navigering med faner.

Demo

Dette pluginet er for å legge til scrollspy-interaksjonen (automatisk oppdatering av nav) til bootstrap-toppen.

nedlasting

Bruker boostrap-scrollspy.js

$ ( '#topbar' ). rullegardin ()

Markup

For enkelt å legge til scrollspy-adferd til navigasjonen din, legg bare til data-scrollspyattributtet til .topbar.

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

Metoder

$().scrollspy()

Autoaktiverer navigasjonsknapper etter brukerens rulleposisjon.

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

Legg merke til Topbar-ankertagger må ha løsbare id-mål. For eksempel, en <a href="#home">home</a>må svare til noe i dom som <div id="home"></div>.

.scrollspy('refresh')

Scrollspy bufrer navigasjonsknapper og seksjonskoordinater for ytelse. Hvis du trenger å oppdatere denne hurtigbufferen (sannsynligvis hvis du har dynamisk innhold), bare ring denne oppdateringsmetoden. Hvis du brukte dataattributtet for å definere din scrollspy, ring bare refresh på kroppen.

$ ( 'kropp' ). scrollspy ( 'oppdater' )

Demo

Ta en titt på navigasjonen på topplinjen på denne siden.

Dette pluginet legger til rask, dynamisk fane- og pillefunksjonalitet.

nedlasting

Bruker boostrap-tabs.js

$ ( '.tabs' ). faner ()

Markup

Du kan aktivere en fane- eller pillenavigasjon uten å skrive noe javascript ved ganske enkelt å gi dem et data-tabseller data-pillsattributt.

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

Metoder

$().tabs eller $().piller

Aktiverer fane- og pillefunksjonalitet for en gitt beholder. Fanekoblinger skal referere til ID-er i dokumentet.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#home" > Hjem </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Meldinger </a></li> 
  <li><a href = "#settings" > Innstillinger </a></li> 
</ul>
 
<div class = "pille-innhold" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "profil" > ... </div> 
  <div id = "meldinger" > ... </div> 
  <div id = "innstillinger" > ... </div> 
</ul>
 
<script>
  $ ( funksjon () {  
    $ ( '.tabs' ). faner ()
  })
</script>

Demo

• Hjem
• Profil
• Meldinger
• Innstillinger

Basert på den utmerkede jQuery.tipsy-pluginen skrevet av Jason Frame; twipsy er en oppdatert versjon, som ikke er avhengig av bilder, bruker css3 for animasjoner og dataattributter for tittellagring!

nedlasting

Bruker bootstrap-twipsy.js

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

Alternativer

Navn	type	misligholde	beskrivelse
animere	boolsk	ekte	bruk en css-fade-overgang på verktøytipset
forsinkelse i	Antall	0	forsinkelse før visning av verktøytips (ms)
delayOut	Antall	0	forsinkelse før du skjuler verktøytips (ms)
falle tilbake	streng	''	tekst som skal brukes når ingen verktøytipstittel er til stede
plassering	streng	'ovenfor'	hvordan plassere verktøytipset - over | under | venstre | Ikke sant
html	boolsk	falsk	tillater html-innhold i verktøytips
bo	boolsk	falsk	bruk hendelsesdelegering i stedet for individuelle hendelsesbehandlere
offset	Antall	0	pikselforskyvning av verktøytips fra målelementet
tittel	streng | funksjon	'tittel'	attributt eller metode for å hente titteltekst
avtrekker	streng	'sveve'	hvordan verktøytips utløses - hover | fokus | Håndbok

Metoder

$().twipsy(opsjoner)

Fester en twipsy-handler til en elementsamling.

.twipsy('show')

Avslører en twipsy elementer.

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

.twipsy('hide')

Skjuler en elementer twipsy.

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

.twipsy(true)

Returnerer en elements twipsy-klasseforekomst.

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

Merknad Alternativt kan dette hentes med $().data('twipsy').

Demo

Popover-pluginet gir et enkelt grensesnitt for å legge til popovers til applikasjonen din. Den utvider boostrap-twipsy.js- pluginen, så sørg for å ta tak i den filen også når du inkluderer popovers i prosjektet ditt!

nedlasting

Bruker boostrap-popover.js

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

Alternativer

Navn	type	misligholde	beskrivelse
animere	boolsk	ekte	bruk en css-fade-overgang på verktøytipset
forsinkelse i	Antall	0	forsinkelse før visning av verktøytips (ms)
delayOut	Antall	0	forsinkelse før du skjuler verktøytips (ms)
falle tilbake	streng	''	tekst som skal brukes når ingen verktøytipstittel er til stede
plassering	streng	'Ikke sant'	hvordan plassere verktøytipset - over | under | venstre | Ikke sant
html	boolsk	falsk	tillater html-innhold i verktøytips
bo	boolsk	falsk	bruk hendelsesdelegering i stedet for individuelle hendelsesbehandlere
offset	Antall	0	pikselforskyvning av verktøytips fra målelementet
tittel	streng | funksjon	'tittel'	attributt eller metode for å hente titteltekst
innhold	streng | funksjon	'data-innhold'	attributt eller metode for å hente innholdstekst
avtrekker	streng	'sveve'	hvordan verktøytips utløses - hover | fokus | Håndbok

Metoder

$().popover(alternativer)

Initialiserer popovers for en elementsamling.

.popover('show')

Avslører en popover for elementer.

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

.popover('skjul')

Skjuler en popover for elementer.

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

Demo

hover for popover

Varslingspluginen er en superliten klasse for å legge til nærfunksjonalitet til varsler.

nedlasting

Bruker bootstrap-alerts.js

$ ( ".alert-melding" ). varsel ()

Markup

Bare legg til et data-alertattributt til varselmeldingene dine for automatisk å gi dem nær funksjonalitet.

Metoder

$().alert()

Dekker alle varsler med nærfunksjonalitet. For å få varslene dine til å animere når de er lukket, sørg for at de har .fadeog .inklassen allerede brukt på dem.

.alert('close')

Lukker et varsel.

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

Demo