Naš Modalni dodatak je super tanka verzija tradicionalnog modalnog js dodatka, pri čemu se posebno pazi da uključi samo golu funkcionalnost koja nam je potrebna ovdje na twitteru.

preuzimanje datoteka

Korištenje bootstrap-modala

$ ( '#my-modal' ). modalno ( opcije )

Mogućnosti

Ime	tip	zadano	opis
pozadina	booleov, niz	lažno	Uključuje element modalne pozadine. Postavite pozadinu na "static"ako ne želite da se modal zatvori kada se klikne na pozadinu.
tipkovnica	Booleov	lažno	Zatvara modal kada se pritisne tipka za izlaz
pokazati	Booleov	lažno	Otvara modal pri inicijalizaciji klase

Markup

Modale na svojoj stranici možete jednostavno aktivirati bez potrebe da napišete i jedan redak javascripta. Jednostavno dajte elementu data-controls-modalatribut koji odgovara ID-u modalnog elementa, a kada se klikne, pokrenut će vaš modal. Da biste dodali modalne opcije, samo ih također uključite kao atribute podataka.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > Pokreni Modal </a>    

Napomena Ako želite da se vaš modal animira unutra i van, samo dodajte .fadeklasu svom .modalelementu (pogledajte demo kako biste vidjeli ovo na djelu).

Metode

.modal(opcije)

Aktivira vaš sadržaj kao modal. Prihvaća izborne opcije object.

$ ( '#my-modal' ). modalni ({
  tipkovnica : istina 
})

.modal('prebaci')

Ručno mijenja modal.

$ ( '#my-modal' ). modalno ( 'prebacivanje' )

.modal('prikaži')

Ručno otvara modal.

$ ( '#my-modal' ). modalno ( 'prikaži' )

.modal('sakrij')

Ručno skriva modal.

$ ( '#my-modal' ). modalno ( 'sakrij' )

.modal(true)

Vraća instancu modalne klase elemenata.

$ ( '#my-modal' ). modalno ( istinito )

Napomena Alternativno, ovo se može dohvatiti s $().data('modal').

Događaji

Bootstrapova modalna klasa izlaže nekoliko događaja za spajanje na modalnu funkcionalnost.

Događaj	Opis
pokazati	Ovaj događaj aktivira se odmah kada showse pozove metoda instance.
prikazano	Ovaj se događaj pokreće kada je modal vidljiv korisniku (pričekat će se da se css prijelazi završe).
sakriti	Ovaj se događaj aktivira odmah nakon hidepozivanja metode instance.
skriven	Ovaj se događaj pokreće kada se modal više ne skriva od korisnika (pričekat će da se css prijelazi završe).

$ ( '#my-modal' ). vezati ( 'skriveno' , funkcija () {   
  // učini nešto ...
})

Demo

Pokrenite Modal

Ovaj dodatak služi za dodavanje padajuće interakcije na gornju traku za pokretanje ili navigacije s karticama.

preuzimanje datoteka

Korištenje bootstrap-dropdown.js

$ ( '#gornja traka' ). padajući izbornik ()

Markup

Da biste brzo dodali funkcionalnost padajućeg izbornika bilo kojem navigacijskom elementu, upotrijebite data-dropdownatribut. Svaki važeći padajući izbornik za pokretanje bit će automatski aktiviran.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Početna </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Padajući izbornik </a>  
    <ul class = "padajući izbornik" > 
      <li><a href = "#" > Sekundarna veza </a></li> 
      <li><a href = "#" > Ovdje je još nešto </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Još jedna poveznica </a></li> 
    </ul>
  </li>
</ul>

Napomena Ako vaše korisničko sučelje ima nekoliko padajućih izbornika, razmislite o dodavanju data-dropdownatributa značajnijem elementu spremnika kao što je .tabsili .topbar.

Metode

$().padajući()

Programski API za aktiviranje izbornika za zadanu gornju traku ili navigaciju s karticama.

Demo

Ovaj dodatak služi za dodavanje interakcije scrollspy (automatsko ažuriranje navigacije) na gornju traku pokretanja.

preuzimanje datoteka

Korištenje bootstrap-scrollspy.js

$ ( '#gornja traka' ). scrollSpy ()

Markup

Da biste jednostavno dodali scrollspy ponašanje svojoj navigaciji, samo dodajte data-scrollspyatribut u .topbar.

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

Metode

$().scrollSpy()

Automatski aktivira navigacijske gumbe prema poziciji pomicanja korisnika.

$ ( 'body > .gornja traka' ). scrollSpy ()

Obavijest Oznake sidra gornje trake moraju imati razrješive ID ciljeve. Na primjer, <a href="#home">home</a>mora odgovarati nečemu u domu poput <div id="home"></div>.

.scrollSpy('refresh')

Scrollspy sprema navigacijske gumbe i koordinate sekcija za rad. Ako trebate ažurirati ovu predmemoriju (vjerojatno ako imate dinamički sadržaj) samo pozovite ovu metodu osvježavanja. Ako ste upotrijebili data atribut da definirate svoj scrollspy, samo pozovite refresh na tijelu.

$ ( 'tijelo' ). scrollSpy ( 'osvježi' )

Demo

Provjerite navigaciju gornje trake na ovoj stranici.

Ovaj dodatak nudi dodatnu funkcionalnost za upravljanje stanjem gumba.

preuzimanje datoteka

Korištenje bootstrap-buttons.js

$ ( '.tabs' ). gumb ()

Metode

$().button('toggle')

Prebacuje stanje guranja. Daje btn-u izgled da je aktiviran.

Napomena Možete omogućiti automatsko prebacivanje gumba pomoću data-toggleatributa.

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

$().button('učitavanje')

Postavlja stanje gumba na učitavanje - onemogućuje gumb i mijenja tekst u tekst za učitavanje. Učitavanje teksta treba biti definirano na elementu gumba pomoću atributa podataka data-loading-text.

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

$().button('reset')

Ponovno postavlja stanje gumba - mijenja tekst u izvorni tekst.

$().button(niz)

Poništava stanje gumba - mijenja tekst u bilo koje stanje definirano podacima.

<button class = "btn" data-complete-text = "finished!" > ... </button>   
<skripta>
  $('.btn').button('complete')
</scrip>

Demo

Učitavanje demonstracije Uključi demonstraciju

Ovaj dodatak dodaje brzu, dinamičnu funkciju kartice i pilule.

preuzimanje datoteka

Korištenje bootstrap-tabs.js

$ ( '.tabs' ). kartice ()

Markup

Možete aktivirati karticu ili navigaciju pilulom bez pisanja javascripta jednostavnim davanjem atributa data-tabsili .data-pills

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

Metode

$().tabs ili $().pilule

Aktivira funkciju kartice i pilule za određeni spremnik. Veze na kartice trebaju upućivati ​​na ID-ove u dokumentu.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#home" > Početna </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Poruke </a></li> 
  <li><a href = "#settings" > Postavke </a></li> 
</ul>
 
<div class = "pillu-content" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "profile" > ... </div> 
  <div id = "messages" > ... </div> 
  <div id = "settings" > ... </div> 
</div>
 
<skripta>
  $ ( funkcija () {  
    $ ( '.tabs' ). kartice ()
  })
</script>

Događaji

Događaj	Opis
promijeniti	Ovaj se događaj aktivira pri promjeni kartice. Koristite event.targeti event.relatedTargetza ciljanje aktivne kartice odnosno prethodne aktivne kartice.

$ ( '#.tabs' ). bind ( 'promjena' , funkcija ( e ) {   
  e . cilj // aktivirana kartica
  e . relatedTarget // prethodna kartica
})

Demo

• Dom
• Profil
• Poruke
• postavke
• Padajući izbornik
  • @mast
  • @mdo

Temeljeno na izvrsnom dodatku jQuery.tipsy koji je napisao Jason Frame; twipsy je ažurirana verzija, koja se ne oslanja na slike, koristi css3 za animacije i data-atribute za pohranu naslova!

preuzimanje datoteka

Korištenje bootstrap-twipsy.js

$ ( '#primjer' ). twipsy ( opcije )

Mogućnosti

Ime	tip	zadano	opis
animirati	Booleov	pravi	primijenite css fade prijelaz na tooltip
kašnjenje	broj	0	kašnjenje prije prikazivanja opisa alata (ms)
odgodaOut	broj	0	kašnjenje prije skrivanja opisa alata (ms)
zamjena	niz	''	tekst koji se koristi kada nema naslova opisa alata
plasman	niz	'iznad'	kako postaviti opis alata - iznad | ispod | lijevo | pravo
html	Booleov	lažno	dopušta html sadržaj unutar opisa alata
uživo	Booleov	lažno	koristite delegiranje događaja umjesto pojedinačnih rukovatelja događajima
pomaknuti	broj	0	pikselni pomak opisa alata od ciljnog elementa
titula	niz, funkcija	'titula'	atribut ili metoda za dohvaćanje teksta naslova
okidač	niz	'lebdjeti'	kako se aktivira opis alata - lebdite | fokus | priručnik
šablona	niz	[zadano označavanje]	HTML predložak koji se koristi za iscrtavanje twipsyja.

Napomena Pojedinačne opcije instance twipsy mogu se alternativno specificirati upotrebom atributa podataka.

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

Metode

$().twipsy(opcije)

Priključuje twipsy rukovatelj kolekciji elemenata.

.twipsy('prikaži')

Otkriva elemente twipsy.

$ ( '#element' ). twipsy ( 'pokaži' )

.twipsy('sakrij')

Skriva elemente twipsy.

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

.twipsy(istina)

Vraća instancu klase elemenata twipsy.

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

Napomena Alternativno, ovo se može dohvatiti s $().data('twipsy').

Demo

Popover plugin pruža jednostavno sučelje za dodavanje popover-a vašoj aplikaciji. Proširuje bootstrap-twipsy.js dodatak, pa svakako zgrabite i tu datoteku kada uključujete popover u svoj projekt!

Napomena Morate uključiti datoteku bootstrap-twipsy.js prije bootstrap-popover.js.

preuzimanje datoteka

Korištenje bootstrap-popover.js

$ ( '#primjer' ). popover ( opcije )

Mogućnosti

Ime	tip	zadano	opis
animirati	Booleov	pravi	primijenite css fade prijelaz na tooltip
kašnjenje	broj	0	kašnjenje prije prikazivanja opisa alata (ms)
odgodaOut	broj	0	kašnjenje prije skrivanja opisa alata (ms)
zamjena	niz	''	tekst koji se koristi kada nema naslova opisa alata
plasman	niz	'pravo'	kako postaviti opis alata - iznad | ispod | lijevo | pravo
html	Booleov	lažno	dopušta html sadržaj unutar opisa alata
uživo	Booleov	lažno	koristite delegiranje događaja umjesto pojedinačnih rukovatelja događajima
pomaknuti	broj	0	pikselni pomak opisa alata od ciljnog elementa
titula	niz, funkcija	'titula'	atribut ili metoda za dohvaćanje teksta naslova
sadržaj	niz, funkcija	'sadržaj podataka'	niz ili metoda za dohvaćanje teksta sadržaja. ako nijedan nije naveden, sadržaj će biti izvor iz data-content atributa.
okidač	niz	'lebdjeti'	kako se aktivira opis alata - lebdite | fokus | priručnik
šablona	niz	[zadano označavanje]	HTML predložak koji se koristi za iscrtavanje skočnog prozora.

Napomena Pojedinačne opcije instance skočnog prozora mogu se alternativno odrediti korištenjem atributa podataka.

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

Metode

$().popover(opcije)

Inicijalizira skočne prozore za zbirku elemenata.

.popover('prikaži')

Otkriva popover elemenata.

$ ( '#element' ). popover ( 'prikaži' )

.popover('sakrij')

Skriva skočni prozor elemenata.

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

Demo

lebdite za popover

Dodatak upozorenja je super malena klasa za dodavanje bliske funkcionalnosti upozorenjima.

preuzimanje datoteka

Korištenje bootstrap-alerts.js

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

Markup

Samo dodajte data-alertatribut svojim porukama upozorenja kako biste im automatski dali blisku funkcionalnost.

Mogućnosti

Ime	tip	zadano	opis
selektor	niz	'.Zatvoriti'	Koji birač ciljati za zatvaranje upozorenja.

Metode

$().alert()

Obuhvaća sva upozorenja bliskom funkcionalnošću. Da bi vaša upozorenja bila animirana kada se zatvore, provjerite imaju li već primijenjenu klasu i .fade..in

.alert('close')

Zatvara upozorenje.

$ ( ".alert-message" ). upozorenje ( 'blizu' )

Demo