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	boolean, reťazec	falošný	Obsahuje prvok modálneho pozadia. Nastavte pozadie na, "static"ak nechcete, aby sa modál po kliknutí na pozadie zatvoril.
klávesnica	boolovská hodnota	falošný	Zatvorí modál 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 = "static" > 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 ({
  klávesnica : 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 ( pravdivý )

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 po showzavolaní 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 bootstrap-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 bootstrap-scrollspy.js

$ ( '#topbar' ). scrollSpy ()

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 ( 'refresh' )

Demo

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

Tento doplnok ponúka ďalšie funkcie na správu stavu tlačidiel.

Stiahnuť ▼

Pomocou bootstrap-buttons.js

$ ( '.tabs' ). tlačidlo ()

Metódy

$().button('toggle')

Prepína stav push. Dáva btn vzhľad, že bol aktivovaný.

Upozornenie Pomocou data-toggleatribútu môžete povoliť automatické prepínanie tlačidla.

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

$().button('načítava sa')

Nastaví stav tlačidla na načítanie - deaktivuje tlačidlo a zamení text za načítaný text. Načítavaný text by mal byť definovaný na prvku button pomocou atribútu data data-loading-text.

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

$().button('reset')

Resetuje stav tlačidla - zamení text na pôvodný text.

$().tlačidlo(reťazec)

Resetuje stav tlačidla - prepne text do ľubovoľného stavu textu definovaného údajmi.

<button class = "btn" data-complete-text = "dokončené!" > ... </button>   
<script>
  $('.btn').button('complete')
</scrip>

Demo

Načítava sa ukážka Prepnúť ukážku

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

Stiahnuť ▼

Pomocou bootstrap-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> 
</div>
 
<script>
  $ ( funkcia () {  
    $ ( '.tabs' ). karty ()
  })
</script>

Diania

Udalosť	Popis
zmeniť	Táto udalosť sa spustí pri zmene karty. Pomocou event.targeta event.relatedTargetzacielite na aktívnu kartu a predchádzajúcu aktívnu kartu.

$ ( '#.tabs' ). bind ( 'zmena' , funkcia ( e ) {   
  e . target // aktivovaná tab
  e . relatedTarget // predchádzajúca karta
})

Demo

• Domov
• Profil
• Správy
• nastavenie
• Rozbaľovacia ponuka
  • @tuk
  • @mdo

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žiť 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ý názov popisu
umiestnenie	reťazec	'nad'	ako umiestniť popis – nad | 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, funkcia	'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
šablóna	reťazec	[predvolené označenie]	Šablóna html použitá na vykreslenie twipsy.

Poznámka Jednotlivé voľby inštancií twipsy možno alternatívne špecifikovať pomocou údajových atribútov.

<a href = "#" data-placement = "below" rel = 'twipsy' title = 'Niektorý text nadpisu' > text </a>    

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 bootstrap-twipsy.js , takže pri začleňovaní popoverov do svojho projektu nezabudnite vziať aj tento súbor!

Upozornenie Pred bootstrap-popover.js musíte zahrnúť súbor bootstrap-twipsy.js.

Stiahnuť ▼

Pomocou bootstrap-popover.js

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

možnosti

názov	typu	predvolená	popis
animovať	boolovská hodnota	pravda	použiť 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ý názov popisu
umiestnenie	reťazec	'správny'	ako umiestniť popis – nad | 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, funkcia	'názov'	atribút alebo metóda na získanie textu nadpisu
obsahu	reťazec, funkcia	'data-content'	reťazec alebo metóda na získanie textu obsahu. ak nie sú poskytnuté, obsah bude získavaný z atribútu data-content.
spúšťač	reťazec	'vznášať sa'	ako sa spúšťa popis – podržte kurzor myši | zameranie | Manuálny
šablóna	reťazec	[predvolené označenie]	Šablóna html použitá na vykreslenie kontextového okna.

Upozornenie Jednotlivé možnosti inštancie popover možno zadať aj pomocou atribútov údajov.

<a data-placement = "below" href = "#" class = "nebezpečenstvo btn" rel = "popover" > text </a>    

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.

možnosti

názov	typu	predvolená	popis
selektor	reťazec	'.Zavrieť'	Na aký selektor sa má zamerať pri zatvorení upozornenia.

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