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	lažno	Uključuje element modalne pozadine
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 = "true" > 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 ({
  closeOnEscape : 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 se dovršetak css prijelaza).

$ ( '#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 boostrap-dropdown.js

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

Markup

Za brzo dodavanje funkcionalnosti 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 boostrap-scrollspy.js

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

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('osvježi')

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 dodaje brzu, dinamičnu funkciju kartice i pilule.

preuzimanje datoteka

Korištenje boostrap-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> 
</ul>
 
<skripta>
  $ ( funkcija () {  
    $ ( '.tabs' ). kartice ()
  })
</script>

Demo

• Dom
• Profil
• Poruke
• postavke

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

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 boostrap-twipsy.js dodatak, pa svakako zgrabite i tu datoteku kada uključujete popover u svoj projekt!

preuzimanje datoteka

Korištenje boostrap-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'	atribut ili metoda za dohvaćanje teksta sadržaja
okidač	niz	'lebdjeti'	kako se aktivira opis alata - lebdite | fokus | priručnik

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.

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