Naš vtičnik Modal je super tanka različica tradicionalnega vtičnika modal js, pri čemer je posebna pozornost namenjena vključitvi le golih funkcij, ki jih potrebujemo tukaj na twitterju.

Prenesi

Uporaba bootstrap-modal

$ ( '#my-modal' ). modalno ( možnosti )

Opcije

Ime	vrsta	privzeto	opis
ozadje	logična vrednost, niz	lažno	Vključuje element modalne kulise. Nastavite ozadje na, "static"če ne želite, da se modal zapre, ko kliknete ozadje.
tipkovnico	logično	lažno	Zapre modal, ko pritisnete tipko za izhod
pokazati	logično	lažno	Odpre modal ob inicializaciji razreda

Markup

Modale na svoji strani lahko preprosto aktivirate, ne da bi morali napisati eno vrstico javascripta. Samo dajte elementu data-controls-modalatribut, ki ustreza ID-ju modalnega elementa, in ko kliknete, bo zagnal vaš modal. Če želite dodati modalne možnosti, jih preprosto vključite tudi kot atribute podatkov.

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

Opomba Če želite, da se vaš modal animira noter in out, preprosto dodajte .faderazred svojemu .modalelementu (glejte predstavitev, da vidite to v akciji).

Metode

.modal(možnosti)

Aktivira vašo vsebino kot modalno. Sprejema neobvezne možnosti object.

$ ( '#my-modal' ). modalno ({
  tipkovnica : res 
})

.modal('preklop')

Ročno preklopi modal.

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

.modal('pokaži')

Ročno odpre modal.

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

.modal('skrij')

Ročno skrije modal.

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

.modal(true)

Vrne primerek modalnega razreda elementov.

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

Opomba To lahko prikličete tudi z $().data('modal').

Dogodki

Modalni razred Bootstrapa izpostavlja nekaj dogodkov za priključitev na modalno funkcionalnost.

Dogodek	Opis
pokazati	Ta dogodek se sproži takoj, ko showse pokliče metoda primerka.
prikazano	Ta dogodek se sproži, ko je modal viden uporabniku (počakal bo, da se prehodi css dokončajo).
skriti	Ta dogodek se sproži takoj, ko hideje bila poklicana metoda primerka.
skrit	Ta dogodek se sproži, ko je modal prenehal biti skrit pred uporabnikom (počakal bo, da se zaključijo prehodi css).

$ ( '#my-modal' ). bind ( 'skrito' , funkcija () {   
  // naredi kaj ...
})

Demo

Zaženite Modal

Ta vtičnik je namenjen dodajanju spustne interakcije v zgornjo vrstico zagonske vrstice ali navigacije z zavihki.

Prenesi

Uporaba bootstrap-dropdown.js

$ ( '#topbar' ). spustni meni ()

Markup

Če želite kateremu koli elementu navigacije hitro dodati spustno funkcijo, uporabite data-dropdownatribut. Vsak veljaven zagonski spustni meni bo samodejno aktiviran.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Domača stran </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Spustni meni </a>  
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > Sekundarna povezava </a></li> 
      <li><a href = "#" > Tukaj je še nekaj </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Druga povezava </a></li> 
    </ul>
  </li>
</ul>

Opomba Če ima vaš uporabniški vmesnik več spustnih menijev, razmislite o dodajanju data-dropdownatributa pomembnejšemu elementu vsebnika, kot je .tabsali .topbar.

Metode

$().dropdown()

Programski api za aktiviranje menijev za določeno zgornjo vrstico ali navigacijo z zavihki.

Demo

Ta vtičnik je namenjen dodajanju interakcije scrollspy (samodejno posodabljanje navigacije) v zgornjo vrstico zagona.

Prenesi

Uporaba bootstrap-scrollspy.js

$ ( '#topbar' ). scrollSpy ()

Markup

Če želite svoji navigaciji preprosto dodati vedenje Scrollspy, samo dodajte data-scrollspyatribut v .topbar.

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

Metode

$().scrollSpy()

Samodejno aktivira navigacijske gumbe glede na položaj drsenja uporabnika.

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

Opozorilo : sidrne oznake zgornje vrstice morajo imeti razločljive cilje ID-ja. Na primer, <a href="#home">home</a>mora ustrezati nečemu v domu, kot je <div id="home"></div>.

.scrollSpy('osveži')

Scrollspy predpomni navigacijske gumbe in koordinate odsekov za delovanje. Če morate posodobiti ta predpomnilnik (verjetno, če imate dinamično vsebino), preprosto pokličite to metodo osveževanja. Če ste uporabili atribut podatkov za definiranje vašega scrollspyja, preprosto pokličite osvežitev v telesu.

$ ( 'telo' ). scrollSpy ( 'osveži' )

Demo

Preverite navigacijo v zgornji vrstici na tej strani.

Ta vtičnik ponuja dodatne funkcije za upravljanje stanja gumbov.

Prenesi

Uporaba bootstrap-buttons.js

$ ( '.tabs' ). gumb ()

Metode

$().button('preklop')

Preklopi potisno stanje. Daje btn videti, da je bil aktiviran.

Opombadata-toggle Z atributom lahko omogočite samodejno preklapljanje gumba .

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

$().button('nalaganje')

Nastavi stanje gumba na nalaganje - onemogoči gumb in zamenja besedilo z besedilom za nalaganje. Nalaganje besedila mora biti definirano na elementu gumba z uporabo atributa podatkov data-loading-text.

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

$().button('reset')

Ponastavi stanje gumba - besedilo zamenja z izvirnim besedilom.

$().button(niz)

Ponastavi stanje gumba - zamenja besedilo v poljubno podatkovno definirano stanje besedila.

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

Demo

Nalaganje predstavitve Preklopi predstavitev

Ta vtičnik dodaja hitro, dinamično funkcijo zavihkov in tablet.

Prenesi

Uporaba bootstrap-tabs.js

$ ( '.tabs' ). zavihki ()

Markup

Navigacijo po zavihku ali tabletki lahko aktivirate brez pisanja javascripta, tako da jim preprosto dodelite atribut data-tabsali .data-pills

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

Metode

$().tabs ali $().pills

Aktivira funkcijo zavihkov in tabletk za določeno posodo. Povezave zavihkov se morajo sklicevati na ID-je v dokumentu.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#home" > Domača stran </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Sporočila </a></li> 
  <li><a href = "#settings" > Nastavitve </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>
 
<skript>
  $ ( funkcija () {  
    $ ( '.tabs' ). zavihki ()
  })
</script>

Dogodki

Dogodek	Opis
sprememba	Ta dogodek se sproži ob spremembi zavihka. Uporabite event.targetin event.relatedTargetza ciljanje na aktivni zavihek oziroma prejšnji aktivni zavihek.

$ ( '#.tabs' ). bind ( 'sprememba' , funkcija ( e ) {   
  e . cilj // aktiviran zavihek
  e . relatedTarget // prejšnji zavihek
})

Demo

• domov
• Profil
• Sporočila
• nastavitve
• Spustni meni
  • @debela
  • @mdo

Temelji na odličnem vtičniku jQuery.tipsy, ki ga je napisal Jason Frame; twipsy je posodobljena različica, ki se ne zanaša na slike, uporablja css3 za animacije in podatkovne atribute za shranjevanje naslovov!

Prenesi

Uporaba bootstrap-twipsy.js

$ ( '#primer' ). twipsy ( možnosti )

Opcije

Ime	vrsta	privzeto	opis
animirati	logično	prav	uporabite css fade prehod za opis orodja
delayIn	število	0	zakasnitev pred prikazom orodja (ms)
delayOut	število	0	zakasnitev pred skrivanjem opisa orodja (ms)
pasti nazaj	vrvica	''	besedilo za uporabo, ko ni naslova orodnega opisa
umestitev	vrvica	'zgoraj'	kako postaviti opis orodja - zgoraj | spodaj | levo | prav
html	logično	lažno	dovoljuje vsebino html v opisu orodja
v živo	logično	lažno	uporabite delegiranje dogodkov namesto posameznih obdelovalcev dogodkov
odmik	število	0	odmik slikovnih pik namiga orodja od ciljnega elementa
naslov	niz, funkcija	'naslov'	atribut ali metoda za pridobivanje besedila naslova
sprožilec	vrvica	'lebdeti'	kako se sproži opis orodja - lebdi | fokus | priročnik
predlogo	vrvica	[privzeta oznaka]	Predloga html, ki se uporablja za upodabljanje twipsyja.

Opomba Posamezne možnosti primerka twipsy je mogoče alternativno podati z uporabo podatkovnih atributov.

<a href = "#" data-placement = "below" rel = 'twipsy' title = 'Nekaj ​​naslovnega besedila' > besedilo </a>    

Metode

$().twipsy(možnosti)

Zbirki elementov pripne obravnavo twipsy.

.twipsy('pokaži')

Razkriva elemente twipsy.

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

.twipsy('skrij')

Skrije elemente twipsy.

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

.twipsy(true)

Vrne primerek razreda elementov twipsy.

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

Opomba To lahko prikličete tudi z $().data('twipsy').

Demo

Vtičnik popover ponuja preprost vmesnik za dodajanje pojavnih oken vaši aplikaciji. Razširja vtičnik bootstrap-twipsy.js , zato se prepričajte, da zgrabite tudi to datoteko, ko v svoj projekt vključite pojavna okna!

Opomba Datoteko bootstrap-twipsy.js morate vključiti pred bootstrap-popover.js.

Prenesi

Uporaba bootstrap-popover.js

$ ( '#primer' ). popover ( možnosti )

Opcije

Ime	vrsta	privzeto	opis
animirati	logično	prav	uporabite css fade prehod za opis orodja
delayIn	število	0	zakasnitev pred prikazom orodja (ms)
delayOut	število	0	zakasnitev pred skrivanjem opisa orodja (ms)
pasti nazaj	vrvica	''	besedilo za uporabo, ko ni naslova orodnega opisa
umestitev	vrvica	'prav'	kako postaviti opis orodja - zgoraj | spodaj | levo | prav
html	logično	lažno	dovoljuje vsebino html v opisu orodja
v živo	logično	lažno	uporabite delegiranje dogodkov namesto posameznih obdelovalcev dogodkov
odmik	število	0	odmik slikovnih pik namiga orodja od ciljnega elementa
naslov	niz, funkcija	'naslov'	atribut ali metoda za pridobivanje besedila naslova
vsebino	niz, funkcija	'data-content'	niz ali metoda za pridobivanje besedila vsebine. če ni na voljo nobena, bo vsebina pridobljena iz atributa podatkovne vsebine.
sprožilec	vrvica	'lebdeti'	kako se sproži opis orodja - lebdi | fokus | priročnik
predlogo	vrvica	[privzeta oznaka]	Predloga html, ki se uporablja za upodabljanje popoverja.

Opomba Posamezne možnosti pojavnega primerka se lahko določijo tudi z uporabo podatkovnih atributov.

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

Metode

$().popover(možnosti)

Inicializira pojavna okna za zbirko elementov.

.popover('pokaži')

Razkrije pojavni element elementov.

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

.popover('skrij')

Skrije pojavni element elementov.

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

Demo

lebdi za popover

Vtičnik za opozorila je zelo majhen razred za dodajanje tesne funkcionalnosti opozorilom.

Prenesi

Uporaba bootstrap-alerts.js

$ ( ".opozorilno-sporočilo" ). opozorilo ()

Markup

Preprosto dodajte data-alertatribut svojim opozorilnim sporočilom, da jim samodejno zagotovite tesno funkcijo.

Opcije

Ime	vrsta	privzeto	opis
selektor	vrvica	'.close'	Kateri izbirnik ciljati za zapiranje opozorila.

Metode

$().alert()

Zavije vsa opozorila s tesno funkcionalnostjo. Če želite, da se vaša opozorila animirajo, ko so zaprta, se prepričajte, da je zanje že uporabljen razred .fadein ..in

.alert('close')

Zapre opozorilo.

$ ( ".opozorilno-sporočilo" ). opozorilo ( 'blizu' )

Demo