Náš modul Modal je super štíhly pohľad na tradičný modul modal js, pričom venuje osobitnú pozornosť tomu, aby obsahoval iba holú funkčnosť, ktorú požadujeme tu na Twitteri.

Stiahnuť ▼

Použitie bootstrap-modal

$ ( '#my-modal' ). modálny ( možnosti )

možnosti

názov	typu	predvolená	popis
pozadie	boolovská hodnota	falošné	Obsahuje prvok modálneho pozadia
klávesnica	boolovská hodnota	falošné	Zatvorí modal po stlačení klávesu Escape
šou	boolovská hodnota	falošné	Otvorí modálny pri inicializácii triedy

Označenie

Modály na svojej stránke môžete jednoducho aktivovať bez toho, aby ste museli napísať jediný riadok javascriptu. Stačí dať prvku data-controls-modalatribút, ktorý zodpovedá ID modálneho prvku, a po kliknutí sa spustí váš modal. Ak chcete pridať modálne možnosti, stačí ich zahrnúť aj ako atribúty údajov.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true" > Spustiť modal </a>    

Upozornenie Ak chcete, aby sa váš modal animoval dovnútra a von, jednoducho pridajte .fadetriedu do svojho .modalprvku (pozrite si ukážku, kde je to v akcii).

Metódy

.modal(options)

Aktivuje váš obsah ako modálny. Prijíma voliteľné možnosti object.

$ ( '#my-modal' ). modálny ({
  closeOnEscape : pravda 
})

.modal('toggle')

Manuálne prepína modal.

$ ( '#my-modal' ). modálny ( 'prepnúť' )

.modal('show')

Manuálne otvorí modál.

$ ( '#my-modal' ). modálny ( 'zobraziť' )

.modal('hide')

Manuálne skryje modal.

$ ( '#my-modal' ). modálny ( 'skryť' )

.modal(true)

Vráti inštanciu modálnej triedy prvkov.

$ ( '#my-modal' ). modálny ( pravda )

Upozornenie Alternatívne to možno získať pomocou $().data('modal').

Diania

Modálna trieda Bootstrapu odhaľuje niekoľko udalostí na pripojenie k modálnej funkcii.

Udalosť	Popis
šou	Táto udalosť sa spustí okamžite pri showvolaní metódy inštancie.
zobrazené	Táto udalosť sa spustí, keď bude modal viditeľný pre používateľa (bude čakať na dokončenie prechodov css).
skryť	Táto udalosť sa spustí okamžite po hidezavolaní metódy inštancie.
skryté	Táto udalosť sa spustí, keď sa dokončí skrytie modálu pred používateľom (bude čakať na dokončenie prechodov css).

$ ( '#my-modal' ). bind ( 'hidden' , function () {   
  // urob niečo ...
})

Demo

Spustite Modal

Tento doplnok slúži na pridanie interakcie s rozbaľovacím zoznamom na hornú lištu zavádzania alebo na navigáciu v záložkách.

Stiahnuť ▼

Pomocou boostrap-dropdown.js

$ ( '#topbar' ). rozbaľovacia ponuka ()

Označenie

Ak chcete rýchlo pridať funkciu rozbaľovacej ponuky do ľubovoľného prvku navigácie, použite data-dropdownatribút. Akákoľvek platná rozbaľovacia ponuka bootstrapu sa automaticky aktivuje.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Domov </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Rozbaľovacia ponuka </a>  
    <ul class = "rozbaľovacia ponuka" > 
      <li><a href = "#" > Sekundárny odkaz </a></li> 
      <li><a href = "#" > Tu je niečo iné </a></li> 
      <li class = "delider" ></li> 
      <li><a href = "#" > Ďalší odkaz </a></li> 
    </ul>
  </li>
</ul>

Upozornenie Ak má vaše používateľské rozhranie niekoľko rozbaľovacích ponúk, zvážte pridanie data-dropdownatribútu do významnejšieho prvku kontajnera, napríklad .tabsalebo .topbar.

Metódy

$().rozbaľovacia ponuka()

Programové rozhranie API na aktiváciu ponúk pre danú hornú lištu alebo navigáciu s kartami.

Demo

Tento doplnok slúži na pridanie interakcie scrollspy (automatická aktualizácia navigácie) na hornú lištu bootstrapu.

Stiahnuť ▼

Pomocou boostrap-scrollspy.js

$ ( '#topbar' ). rozbaľovacia ponuka ()

Označenie

Ak chcete jednoducho pridať scrollspy správanie do vašej navigácie, stačí pridať data-scrollspyatribút do .topbar.

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

Metódy

$().scrollspy()

Automaticky aktivuje navigačné tlačidlá podľa polohy rolovania používateľov.

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

Všimnite si, že značky ukotvenia hornej lišty musia mať rozlíšiteľné ciele ID. Napríklad <a href="#home">home</a>musí zodpovedať niečomu v dome ako <div id="home"></div>.

.scrollspy('refresh')

Scrollspy ukladá tlačidlá navigácie a súradnice sekcií do vyrovnávacej pamäte pre výkon. Ak potrebujete aktualizovať túto vyrovnávaciu pamäť (pravdepodobne ak máte dynamický obsah), stačí zavolať túto metódu obnovenia. Ak ste použili atribút data na definovanie vášho scrollspy, stačí zavolať refresh na telo.

$ ( 'telo' ). scrollspy ( 'obnoviť' )

Demo

Pozrite si navigáciu v hornej lište na tejto stránke.

Tento doplnok pridáva rýchle, dynamické funkcie kariet a tabliet.

Stiahnuť ▼

Pomocou boostrap-tabs.js

$ ( '.tabs' ). karty ()

Označenie

Môžete aktivovať navigáciu na karte alebo tablete bez písania akéhokoľvek javascriptu jednoduchým zadaním atribútu data-tabsalebo .data-pills

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

Metódy

$().tabs alebo $().pilulky

Aktivuje funkciu karty a pilulky pre daný kontajner. Odkazy na karty by mali odkazovať na ID v dokumente.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#home" > Domov </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Správy </a></li> 
  <li><a href = "#settings" > Nastavenia </a></li> 
</ul>
 
<div class = "pill-content" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "profile" > ... </div> 
  <div id = "messages" > ... </div> 
  <div id = "nastavenia" > ... </div> 
</ul>
 
<script>
  $ ( funkcia () {  
    $ ( '.tabs' ). karty ()
  })
</script>

Demo

• Domov
• Profil
• Správy
• nastavenie

Na základe vynikajúceho doplnku jQuery.tipsy, ktorý napísal Jason Frame; twipsy je aktualizovaná verzia, ktorá sa nespolieha na obrázky, používa css3 na animácie a dátové atribúty na ukladanie titulov!

Stiahnuť ▼

Pomocou bootstrap-twipsy.js

$ ( '#príklad' ). Twipsy ( možnosti )

možnosti

názov	typu	predvolená	popis
animovať	boolovská hodnota	pravda	použite prechod css miznutia na popis
delayIn	číslo	0	oneskorenie pred zobrazením popisu (ms)
oneskorenie	číslo	0	oneskorenie pred skrytím popisku (ms)
záložný	reťazec	''	text, ktorý sa má použiť, keď nie je prítomný žiadny názov popisku
umiestnenie	reťazec	'nad'	ako umiestniť popis – hore | nižšie | vľavo | správny
html	boolovská hodnota	falošné	umožňuje html obsah v popise
naživo	boolovská hodnota	falošné	použite delegovanie udalostí namiesto jednotlivých obsluhovačov udalostí
offset	číslo	0	pixelová odchýlka popisku od cieľového prvku
titul	reťazec | funkciu	'názov'	atribút alebo metóda na získanie textu nadpisu
spúšťač	reťazec	'vznášať sa'	ako sa spúšťa popis – podržte kurzor myši | zameranie | Manuálny

Metódy

$().twipsy(možnosti)

Pripája obslužný program twipsy ku kolekcii prvkov.

.twipsy('show')

Odhaľuje prvky twipsy.

$ ( '#element' ). twipsy ( 'zobraziť' )

.twipsy('skryť')

Skryje prvky twipsy.

$ ( '#element' ). twipsy ( 'skryť' )

.twipsy (pravda)

Vráti inštanciu triedy elementov twipsy.

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

Upozornenie Alternatívne to možno získať pomocou $().data('twipsy').

Demo

Popover plugin poskytuje jednoduché rozhranie na pridávanie popoverov do vašej aplikácie. Rozširuje doplnok boostrap-twipsy.js , takže pri začleňovaní popoverov do svojho projektu nezabudnite vziať aj tento súbor!

Stiahnuť ▼

Pomocou boostrap-popover.js

$ ( '#príklad' ). vyskakovacie okno ( možnosti )

možnosti

názov	typu	predvolená	popis
animovať	boolovská hodnota	pravda	použite prechod css miznutia na popis
delayIn	číslo	0	oneskorenie pred zobrazením popisu (ms)
oneskorenie	číslo	0	oneskorenie pred skrytím popisku (ms)
záložný	reťazec	''	text, ktorý sa má použiť, keď nie je prítomný žiadny názov popisku
umiestnenie	reťazec	'správny'	ako umiestniť popis – hore | nižšie | vľavo | správny
html	boolovská hodnota	falošné	umožňuje html obsah v popise
naživo	boolovská hodnota	falošné	použite delegovanie udalostí namiesto jednotlivých obsluhovačov udalostí
offset	číslo	0	pixelová odchýlka popisku od cieľového prvku
titul	reťazec | funkciu	'názov'	atribút alebo metóda na získanie textu nadpisu
obsahu	reťazec | funkciu	'data-content'	atribút alebo metóda na získanie textu obsahu
spúšťač	reťazec	'vznášať sa'	ako sa spúšťa popis – podržte kurzor myši | zameranie | Manuálny

Metódy

$().popover(options)

Inicializuje vyskakovacie okná pre kolekciu prvkov.

.popover('show')

Odhaľuje kontextové okno prvkov.

$ ( '#element' ). vyskakovacie okno ( 'zobraziť' )

.popover('hide')

Skryje vyskakovacie okno prvkov.

$ ( '#element' ). vyskakovacie okno ( 'skryť' )

Demo

Umiestnite kurzor myši na popover

Výstražný doplnok je super malá trieda na pridávanie blízkych funkcií k výstrahám.

Stiahnuť ▼

Pomocou bootstrap-alerts.js

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

Označenie

Stačí pridať data-alertatribút k svojim výstražným správam, aby ste im automaticky poskytli zatváracie funkcie.

Metódy

$().alert()

Zabalí všetky upozornenia do funkcie blízkej. Ak chcete, aby sa vaše upozornenia po zatvorení animovali, uistite sa, že už majú aplikovanú triedu .fadea ..in

.alert('zavrieť')

Zatvorí upozornenie.

$ ( ".alert-message" ). upozornenie ( 'zavrieť' )

Demo