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, streng	falsk	Inkluderer et modalt bakteppeelement. Sett bakteppe til "static"hvis du ikke vil at modalen skal lukkes når bakteppet klikkes.
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 = "static" > 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 ({
  tastatur : 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 bootstrap-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 bootstrap-scrollspy.js

$ ( '#topbar' ). scrollSpy ()

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å navigeringen i topplinjen på denne siden.

Denne plugin-en tilbyr ekstra funksjonalitet for å administrere knappstatus.

nedlasting

Bruker bootstrap-buttons.js

$ ( '.tabs' ). knapp ()

Metoder

$().button('toggle')

Bytter push-tilstand. Gir btn utseendet at den er aktivert.

Merknad Du kan aktivere automatisk veksling av en knapp ved å bruke data-toggleattributtet.

<button class = "btn" data-toggle = "toggle" > ... </button>   

$().button('laster')

Angir knappstatus til lasting - deaktiverer knapp og bytter tekst til lasting av tekst. Lastetekst skal defineres på knappeelementet ved hjelp av dataattributtet data-loading-text.

<button class = "btn" data-loading-text = "laster ting..." > ... </button>   

$().button('reset')

Tilbakestiller knappens tilstand - bytter tekst til originaltekst.

$().knapp(streng)

Tilbakestiller knappens tilstand - bytter tekst til hvilken som helst datadefinert teksttilstand.

<button class = "btn" data-complete-text = "ferdig!" > ... </knapp>   
<script>
  $('.btn').button('complete')
</script>

Demo

Laster demo Slå på demo

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

nedlasting

Bruker bootstrap-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> 
</div>
 
<script>
  $ ( funksjon () {  
    $ ( '.tabs' ). faner ()
  })
</script>

arrangementer

Begivenhet	Beskrivelse
endring	Denne hendelsen utløses ved fanebytte. Bruk event.targetog event.relatedTargetfor å målrette henholdsvis den aktive fanen og den forrige aktive fanen.

$ ( '#.tabs' ). bind ( 'endre' , funksjon ( e ) {   
  e . mål // aktivert fane
  e . relatedTarget // forrige fane
})

Demo

• Hjem
• Profil
• Meldinger
• Innstillinger
• Fall ned
  • @fett
  • @mdo

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
mal	streng	[standard oppmerking]	HTML-malen som brukes for å gjengi en twipsy.

Merknad Individuelle twipsy-forekomstalternativer kan alternativt spesifiseres ved bruk av dataattributter.

<a href = "#" data-placement = "below" rel = 'twipsy' title = 'Noen titteltekst' > tekst </a>    

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. Det utvider bootstrap-twipsy.js plugin, så sørg for å ta tak i den filen også når du inkluderer popovers i prosjektet ditt!

Merknad Du må inkludere bootstrap-twipsy.js-filen før bootstrap-popover.js.

nedlasting

Bruker bootstrap-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'	en streng eller metode for å hente innholdstekst. hvis ingen er oppgitt, hentes innholdet fra et datainnholdsattributt.
avtrekker	streng	'sveve'	hvordan verktøytips utløses - hover | fokus | Håndbok
mal	streng	[standard oppmerking]	HTML-malen som brukes til å gjengi en popover.

Merknad Individuelle popover-forekomstalternativer kan alternativt spesifiseres ved bruk av dataattributter.

<a data-placement = "below" href = "#" class = "btn fare" rel = "popover" > tekst </a>    

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.

Alternativer

Navn	type	misligholde	beskrivelse
velger	streng	'.Lukk'	Hvilken velger du skal målrette mot for å lukke et varsel.

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