Naš Modal dodatak je super tanka verzija tradicionalnog modal js dodatka, vodeći posebno računa da uključi samo golu funkcionalnost koja nam je potrebna ovdje na twitteru.

Skinuti

Korištenje bootstrap-modal

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

Opcije

Ime	tip	default	opis
pozadina	boolean	false	Uključuje element modalne pozadine
tastatura	boolean	false	Zatvara modal kada se pritisne tipka za izlaz
show	boolean	false	Otvara modalno pri inicijalizaciji klase

Markup

Možete jednostavno aktivirati modale na svojoj stranici bez potrebe da pišete ni jedan red javascripta. Samo dajte elementu data-controls-modalatribut koji odgovara ID-u modalnog elementa, a kada se klikne, on će pokrenuti vaš modalni. Da biste dodali modalne opcije, samo ih uključite i kao atribute podataka.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true" > Pokreni modalni </a>    

Napomena Ako želite da vaš modal animira unutra i van, samo dodajte .fadeklasu svom .modalelementu (pogledajte demo da vidite ovo u akciji).

Metode

.modal(opcije)

Aktivira vaš sadržaj kao modalni. Prihvata opcione opcije object.

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

.modal('toggle')

Ručno prebacuje modal.

$ ( '#my-modal' ). modalni ( 'prebaciti' )

.modal('show')

Ručno otvara modalni.

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

.modal('sakrij')

Ručno skriva modal.

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

.modal(true)

Vraća instancu modalne klase elemenata.

$ ( '#my-modal' ). modalni ( tačno )

Napomena Alternativno, ovo se može preuzeti pomoću $().data('modal').

Događaji

Bootstrap-ova modalna klasa izlaže nekoliko događaja za spajanje na modalnu funkcionalnost.

Događaj	Opis
show	Ovaj događaj se aktivira odmah kada showse pozove metoda instance.
pokazano	Ovaj događaj se pokreće kada modal postane vidljiv korisniku (će pričekati da se css prijelazi dovrše).
sakriti	Ovaj događaj se pokreće odmah kada se hidepozove metoda instance.
skriveno	Ovaj događaj se pokreće kada modal završi sa sakrivanjem od korisnika (će pričekati da se css tranzicije dovrše).

$ ( '#my-modal' ). bind ( 'hidden' , function () {   
  // radi nešto ...
})

Demo

Pokrenite Modal

Ovaj dodatak služi za dodavanje interakcije padajućeg menija na gornju traku za pokretanje ili navigaciju sa karticama.

Skinuti

Korištenje boostrap-dropdown.js

$ ( '#topbar' ). padajući meni ()

Markup

Za brzo dodavanje funkcionalnosti padajućeg izbornika bilo kojem navigacijskom elementu, koristite data-dropdownatribut. Svaki važeći padajući izbornik za pokretanje automatski će se aktivirati.

<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 meni </a>  
    <ul class = "padajući meni" > 
      <li><a href = "#" > Sekundarni link </a></li> 
      <li><a href = "#" > Nešto drugo ovdje </a></li> 
      <li class = "razdjelnik" ></li> 
      <li><a href = "#" > Još jedan link </a></li> 
    </ul>
  </li>
</ul>

Napomena Ako vaš korisnički interfejs ima nekoliko padajućih menija, razmislite o dodavanju data-dropdownatributa značajnijem elementu kontejnera kao što je .tabsili .topbar.

Metode

$().dropdown()

Programski API za aktiviranje menija za datu gornju traku ili navigaciju sa karticama.

Demo

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

Skinuti

Korištenje boostrap-scrollspy.js

$ ( '#topbar' ). padajući meni ()

Markup

Za jednostavno dodavanje scrollspy ponašanja u svoju navigaciju, samo dodajte data-scrollspyatribut u .topbar.

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

Metode

$().scrollspy()

Automatski aktivira dugmad za navigaciju prema poziciji pomicanja korisnika.

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

Napomena Topbar sidrene oznake moraju imati razlučive id ciljeve. Na primjer, <a href="#home">home</a>mora odgovarati nečemu u domu kao što je <div id="home"></div>.

.scrollspy('osvježi')

Scrollspy kešira navigacijske dugmad i koordinate sekcija za performanse. Ako trebate ažurirati ovu keš memoriju (vjerovatno ako imate dinamički sadržaj), samo pozovite ovu metodu osvježavanja. Ako ste koristili data atribut da definišete svoj scrollspy, samo pozovite refresh na telu.

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

Demo

Provjerite navigaciju gornje trake na ovoj stranici.

Ovaj dodatak dodaje brzu, dinamičnu funkcionalnost kartica i tableta.

Skinuti

Korištenje boostrap-tabs.js

$ ( '.tabs' ). kartice ()

Markup

Možete aktivirati navigaciju po kartici ili tabletama bez pisanja bilo kakvog javascripta jednostavnim davanjem atributa data-tabsili .data-pills

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

Metode

$().tabs ili $().pilule

Aktivira funkcionalnost kartice i tableta za dati spremnik. Veze kartica treba da upućuju 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 = "sadržaj pilule" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "profil" > ... </div> 
  <div id = "messages" > ... </div> 
  <div id = "settings" > ... </div> 
</ul>
 
<script>
  $ ( funkcija () {  
    $ ( '.tabs' ). kartice ()
  })
</script>

Demo

• Dom
• Profil
• Poruke
• Postavke

Zasnovan na odličnom 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!

Skinuti

Korištenje bootstrap-twipsy.js

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

Opcije

Ime	tip	default	opis
animirati	boolean	tačno	primijeniti css fade prijelaz na tooltip
delayIn	broj	0	odgoda prije prikazivanja opisa alata (ms)
delayOut	broj	0	odgoda prije skrivanja opisa alata (ms)
povući se	string	''	tekst koji se koristi kada nema naslova opisa alata
plasman	string	'iznad'	kako pozicionirati tooltip - iznad | ispod | lijevo | u pravu
html	boolean	false	dozvoljava html sadržaj u opisu alata
live	boolean	false	koristiti delegiranje događaja umjesto pojedinačnih rukovatelja događajima
offset	broj	0	pixel offset opisa alata od ciljnog elementa
naslov	string | funkcija	'titula'	atribut ili metod za dohvaćanje teksta naslova
okidač	string	'lebdjeti'	kako se tooltip pokreće - lebdjeti | fokus | priručnik

Metode

$().twipsy(opcije)

Pripaja twipsy obrađivač kolekciji elemenata.

.twipsy('prikaži')

Otkriva zakrivljene elemente.

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

.twipsy('sakrij')

Sakriva elemente twipsy.

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

.twipsy(true)

Vraća element twipsy instancu klase.

$ ( '#element' ). twipsy ( tačno )

Napomena Alternativno, ovo se može preuzeti pomoću $().data('twipsy').

Demo

Popover dodatak pruža jednostavno sučelje za dodavanje popovera vašoj aplikaciji. On proširuje dodatak boostrap-twipsy.js , pa svakako zgrabite i tu datoteku kada uključujete iskačuće elemente u svoj projekat!

Skinuti

Korištenje boostrap-popover.js

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

Opcije

Ime	tip	default	opis
animirati	boolean	tačno	primijeniti css fade prijelaz na tooltip
delayIn	broj	0	odgoda prije prikazivanja opisa alata (ms)
delayOut	broj	0	odgoda prije skrivanja opisa alata (ms)
povući se	string	''	tekst koji se koristi kada nema naslova opisa alata
plasman	string	'tačno'	kako pozicionirati tooltip - iznad | ispod | lijevo | u pravu
html	boolean	false	dozvoljava html sadržaj u opisu alata
live	boolean	false	koristiti delegiranje događaja umjesto pojedinačnih rukovatelja događajima
offset	broj	0	pixel offset opisa alata od ciljnog elementa
naslov	string | funkcija	'titula'	atribut ili metod za dohvaćanje teksta naslova
sadržaj	string | funkcija	'data-content'	atribut ili metod za dohvaćanje teksta sadržaja
okidač	string	'lebdjeti'	kako se tooltip pokreće - lebdjeti | fokus | priručnik

Metode

$().popover(opcije)

Inicijalizira skočne prozore za kolekciju elemenata.

.popover('show')

Otkriva iskačući element.

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

.popover('sakrij')

Sakriva skočni prozor elemenata.

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

Demo

zadržite pokazivač miša za popover

Dodatak za upozorenje je super mala klasa za dodavanje bliske funkcionalnosti upozorenjima.

Skinuti

Korištenje bootstrap-alerts.js

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

Markup

Samo dodajte data-alertatribut svojim porukama upozorenja da biste im automatski dali funkciju zatvaranja.

Metode

$().alert()

Omotava sva upozorenja sa bliskom funkcionalnošću. Da bi se vaša upozorenja animirala kada su zatvorena, provjerite jesu li na njih već primijenjena klasa i .fade..in

.alert('zatvori')

Zatvara upozorenje.

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

Demo