Javascript pre Bootstrap

Oživte komponenty Bootstrapu – teraz s 12 vlastnými zásuvnými modulmi jQuery .

Modály

Efektívne, ale flexibilné, prevezme tradičný modálny doplnok javascript len ​​s minimálnou požadovanou funkčnosťou a inteligentnými predvolenými nastaveniami.

Rozbaľovacie ponuky

Pomocou tohto jednoduchého doplnku pridajte rozbaľovacie ponuky takmer ku všetkému v Bootstrape. Bootstrap obsahuje plnú podporu rozbaľovacej ponuky na navigačnom paneli, kartách a tabletkách.

Scrollspy

Použite scrollspy na automatickú aktualizáciu odkazov na navigačnom paneli tak, aby zobrazovali aktuálne aktívne prepojenie na základe pozície rolovania.

Prepínateľné karty

Pomocou tohto doplnku môžete zvýšiť užitočnosť kariet a tabletiek tým, že im umožníte prepínať medzi tabuľkami miestneho obsahu.

Popisy

Nový pohľad na doplnok jQuery Tipsy, Tooltips, sa nespoliehajú na obrázky – používajú CSS3 na animácie a dátové atribúty na lokálne ukladanie titulkov.

Popovers *

Pridajte malé prekryvné vrstvy obsahu, ako sú tie na iPade, do ľubovoľného prvku, aby ste mohli umiestniť sekundárne informácie.

* Vyžaduje , aby boli zahrnuté popisy

Výstražné správy

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

Tlačidlá

Urobte viac s tlačidlami. Stavy ovládacích tlačidiel alebo vytváranie skupín tlačidiel pre viac komponentov, ako sú panely s nástrojmi.

kolaps

Získajte základné štýly a flexibilnú podporu pre skladacie komponenty, ako sú akordeóny a navigácia.

Kolotoč

Vytvorte kolotoč akéhokoľvek obsahu, ktorý chcete poskytnúť interaktívnu prezentáciu obsahu.

Prepisujte dopredu

Základný, jednoducho rozšírený plugin na rýchle vytváranie elegantných hlások s ľubovoľným zadávaním textu z formulára.

Prechody *

Pre jednoduché prechodové efekty raz zahrňte bootstrap-transition.js na zasunutie modálov alebo stlmenie upozornení.

* Vyžaduje sa pre animáciu v zásuvných moduloch

Hlavy hore! Všetky doplnky javascript vyžadujú najnovšiu verziu jQuery.

O spôsoboch

Efektívne, ale flexibilné, prevezme tradičný modálny doplnok javascript len ​​s minimálnou požadovanou funkčnosťou a inteligentnými predvolenými nastaveniami.

Stiahnuť súbor

Statický príklad

Nižšie je staticky vykreslený modál.

Živá ukážka

Prepnite modal cez javascript kliknutím na tlačidlo nižšie. Posunie sa nadol a bude miznúť z hornej časti stránky.

Spustite demo modal

Použitie bootstrap-modal

Zavolajte modal cez javascript:

  1. $ ( '#myModal' ). modálny ( možnosti )

možnosti

názov typu predvolená popis
pozadie boolovská hodnota pravda Obsahuje prvok modálneho pozadia. Prípadne zadajte staticpozadie, ktoré nezatvorí modál po kliknutí.
klávesnica boolovská hodnota pravda Zatvorí modál po stlačení klávesu Escape
šou boolovská hodnota pravda Po inicializácii zobrazí modal.

Označenie

Modály na svojej stránke môžete jednoducho aktivovať bez toho, aby ste museli napísať jediný riadok javascriptu. Stačí nastaviť data-toggle="modal"prvok ovládača s data-target="#foo"alebo href="#foo", ktorý zodpovedá ID modálneho prvku a po kliknutí sa spustí váš modal.

Ak chcete pridať možnosti do svojej modálnej inštancie, stačí ich zahrnúť ako ďalšie atribúty údajov buď do ovládacieho prvku alebo do samotného modálneho označenia.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Spustiť modal </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </button>
  4. <h3> Modálna hlavička </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Jedno jemné telo… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Zavrieť </a>
  11. <a href = "#" class = "btn btn-primary" > Uložiť zmeny </a>
  12. </div>
  13. </div>
Hlavy hore! Ak chcete, aby sa váš modal animoval dovnútra a von, jednoducho pridajte .fadetriedu do .modalprvku (pozrite si ukážku, kde to uvidíte v akcii) a pridajte bootstrap-transition.js.

Metódy

.modal(options)

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

  1. $ ( '#myModal' ). modálny ({
  2. klávesnica : nepravda
  3. })

.modal('toggle')

Manuálne prepína modal.

  1. $ ( '#myModal' ). modálny ( 'prepnúť' )

.modal('show')

Manuálne otvorí modál.

  1. $ ( '#myModal' ). modálny ( 'zobraziť' )

.modal('hide')

Manuálne skryje modal.

  1. $ ( '#myModal' ). modálny ( 'skryť' )

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).
  1. $ ( '#myModal' ). on ( 'skryté' , funkcia () {
  2. // urob niečo…
  3. })

Doplnok ScrollSpy slúži na automatickú aktualizáciu cieľov navigácie na základe pozície posúvania.

Stiahnuť súbor

Príklad navigačného panela so scrollspy

Prejdite oblasťou nižšie a sledujte aktualizáciu navigácie. Rozbaľovacie podpoložky budú tiež zvýraznené. Skús to!

@tuk

Ad legíny keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi predtým, ako vypredali qui. Tumblr práva na bicykel od farmy až po stôl. Anim keffiyeh carles cardigan. Fotka užívateľa Velit seitan mcsweeney 3 wolf moon irure. Cosby sveter lomo jean šortky, williamsburg mikina minim qui pravdepodobne ste o nich nepočuli a kardigan trustový fond culpa biodiesel wes anderson estetický. Nihil vytetovaný accusamus, viera irónia bionafta keffiyeh remeselník ullamco consequat.

@mdo

Skateboard Veniam Marfa fúzy, tuková brada fugiat velit vidly. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat štyri loko nisi, ea helvetica nulla carles. Potetovaný cosby sveter food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 kreatíva. Carles neestetické cvičenie quis genrify. Brooklyn adipisicing remeselné pivo vice keytar dezert.

jeden

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bike rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. Vysoká životnosť id vinyl, echo park consequat quis aliquip banh mi vidly. Vero VHS je adipisicing. Minimálna messenger taška Consectetur nisi DIY. Cred ex in, udržateľný delectus consectetur fanny pack iphone.

dva

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa čokoľvek delectus food truck. Predpokladá sa, že ID syntetizátora Sapiente. Locavore sed helvetica klišé irónia, thundercats ste o nich pravdepodobne nepočuli consequat hoodie bezlepkový lo-fi fap aliquip. Labore elitné miesto predtým, než sa vypredali, Terry richardson proident brunch nesciunt quis cosby sveter pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Pomocou bootstrap-scrollspy.js

Zavolajte scrollspy cez javascript:

  1. $ ( '#navbar' ). scrollspy ()

Označenie

Ak chcete jednoducho pridať rolovacie správanie do navigácie v hornej lište, jednoducho pridajte data-spy="scroll"prvok, ktorý chcete špehovať (najčastejšie by to bolo telo).

  1. <body data-spy = "scroll" > ... </body>
Hlavy hore! Odkazy na navigačnom paneli 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>.

Metódy

.scrollspy('refresh')

Keď používate scrollspy v spojení s pridávaním alebo odstraňovaním prvkov z DOM, budete musieť zavolať metódu refresh takto:

  1. $ ( '[data-spy="scroll"]' ). každý ( function () {
  2. var $spy = $ ( toto ). scrollspy ( 'obnoviť' )
  3. });

možnosti

názov typu predvolená popis
offset číslo 10 Pixely na odsadenie zhora pri výpočte polohy rolovania.

Diania

Udalosť Popis
Aktivovať Táto udalosť sa spustí vždy, keď scrollspy aktivuje novú položku.

Tento doplnok pridáva rýchlu, dynamickú funkciu kariet a tabletiek na prechod cez miestny obsah.

Stiahnuť súbor

Príklady kariet

Kliknutím na karty nižšie môžete prepínať medzi skrytými panelmi, a to aj prostredníctvom rozbaľovacích ponúk.

Raw denim ste o nich pravdepodobne ešte nepočuli džínsové šortky Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Moustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sveter eu banh mi, qui irure terry richardson ex squid. Aliquip miesto na salvia cillum iphone. Seitan aliquip quis cardigan americké oblečenie, mäsiar voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


Pomocou bootstrap-tab.js

Povoliť karty s tabuľkami prostredníctvom javascriptu (každá karta musí byť aktivovaná samostatne):

  1. $ ( '#myTab a' ). klikni ( funkcia ( e ) {
  2. e . zabrániťPredvolené ();
  3. $ ( toto ). tab ( 'zobraziť' );
  4. })

Jednotlivé karty môžete aktivovať niekoľkými spôsobmi:

  1. $ ( '#myTab a[href="#profile"]' ). tab ( 'zobraziť' ); // Vyberte kartu podľa názvu
  2. $ ( '#myTab a:first' ). tab ( 'zobraziť' ); // Vyberte prvú kartu
  3. $ ( '#myTab a:last' ). tab ( 'zobraziť' ); // Vyberte poslednú kartu
  4. $ ( '#myTab li:eq(2) a' ). tab ( 'zobraziť' ); // Vyberte tretiu kartu (indexovaná 0)

Označenie

Môžete aktivovať navigáciu na karte alebo tablete bez písania akéhokoľvek javascriptu jednoduchým zadaním data-toggle="tab"alebo data-toggle="pill"na prvku. Pridaním tried nava nav-tabsna kartu ulsa použije štýl karty bootstrap.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Domov </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Správy </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Nastavenia </a></li>
  6. </ul>

Metódy

$().tab

Aktivuje prvok karty a kontajner obsahu. Karta by mala mať buď a data-targetalebo hrefzacielenie na kontajnerový uzol v DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Domov </a></li>
  3. <li><a href = "#profile" > Profil </a></li>
  4. <li><a href = "#messages" > Správy </a></li>
  5. <li><a href = "#settings" > Nastavenia </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( funkcia () {
  17. $ ( '#myTab a:last' ). tab ( 'zobraziť' );
  18. })
  19. </script>

Diania

Udalosť Popis
šou Táto udalosť sa spustí pri zobrazení kariet, ale predtým, než sa zobrazí nová karta. Pomocou event.targeta event.relatedTargetzacielite na aktívnu kartu a predchádzajúcu aktívnu kartu (ak je k dispozícii).
zobrazené Táto udalosť sa spustí pri zobrazení karty po zobrazení karty. Pomocou event.targeta event.relatedTargetzacielite na aktívnu kartu a predchádzajúcu aktívnu kartu (ak je k dispozícii).
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'zobrazené' , funkcia ( e ) {
  2. e . target // aktivovaná tab
  3. e . relatedTarget // predchádzajúca karta
  4. })

Informácie o popisoch

Inšpirované vynikajúcim doplnkom jQuery.tipsy, ktorý napísal Jason Frame; Popisy sú aktualizovanou verziou, ktorá sa nespolieha na obrázky, používa css3 na animácie a dátové atribúty na lokálne ukladanie titulov.

Stiahnuť súbor

Príklad použitia Tooltipov

Umiestnením kurzora myši na odkazy nižšie zobrazíte popisy:

Tesné nohavice ďalšej úrovne keffiyeh , o ktorých ste pravdepodobne ešte nepočuli. Photo booth brada raw denim kníhtlač vegan messenger bag stumptown. 8-bitové americké oblečenie z farmy na stôl seitan, mcsweeney's fixie udržateľná quinoa vinylovú chambray z froté richardson. Beard stumptown, cardigany banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, štyri loko mcsweeney's cleanse vegan chambray. Skutočne ironický remeselník bez ohľadu na klávesnicu, scénár z farmy na stôl Banky Austin twitter zvládnuť freegan cred raw denim single-origin coffee viral.


Pomocou bootstrap-tooltip.js

Spustite popis pomocou javascriptu:

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

možnosti

názov typu predvolená popis
animácie boolovská hodnota pravda použiť prechod css miznutia na popis
umiestnenie string|funkcia 'top' ako umiestniť popis – hore | dole | vľavo | správny
selektor reťazec falošný Ak je k dispozícii selektor, objekty popisov budú delegované na zadané ciele.
titul reťazec | funkciu '' predvolená hodnota názvu, ak značka `title` nie je prítomná
spúšťač reťazec 'vznášať sa' ako sa spúšťa popis – podržte kurzor myši | zameranie | Manuálny
meškanie číslo | objekt 0

oneskorenie zobrazenia a skrytia tooltipu (ms) – netýka sa manuálneho typu spúšťania

Ak je zadané číslo, oneskorenie sa použije na skrytie/zobrazenie

Štruktúra objektu je:delay: { show: 500, hide: 100 }

Hlavy hore! Možnosti pre jednotlivé nápovedy možno alternatívne špecifikovať pomocou atribútov údajov.

Označenie

Z výkonnostných dôvodov sú povolené Tooltip a Popover data-apis. Ak ich chcete použiť, stačí zadať možnosť výberu.

  1. <a href = "#" rel = "tooltip" title = "first tooltip" > umiestnite kurzor myši na mňa </a>

Metódy

$().tooltip(options)

Ku kolekcii prvkov pripojí popisovač.

.tooltip('show')

Zobrazí popis prvku.

  1. $ ( '#element' ). popis ( 'zobraziť' )

.tooltip('hide')

Skryje popis prvku.

  1. $ ( '#element' ). popis ( 'skryť' )

.tooltip('toggle')

Prepína popis prvku.

  1. $ ( '#element' ). popis ( 'prepnúť' )

O popoveroch

Pridajte malé prekryvné vrstvy obsahu, ako sú tie na iPade, do ľubovoľného prvku, aby ste mohli umiestniť sekundárne informácie.

* Vyžaduje , aby bol zahrnutý popis

Stiahnuť súbor

Príklad vyskakovacieho okna po umiestnení kurzora myši

Ak chcete spustiť kontextové okno, umiestnite kurzor myši na tlačidlo.


Pomocou bootstrap-popover.js

Povoliť vyskakovacie okná cez javascript:

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

možnosti

názov typu predvolená popis
animácie boolovská hodnota pravda použiť prechod css miznutia na popis
umiestnenie string|funkcia 'správny' ako umiestniť popover - hore | dole | vľavo | správny
selektor reťazec falošný ak je poskytnutý selektor, objekty popisku budú delegované na zadané ciele
spúšťač reťazec 'vznášať sa' ako sa spúšťa popis – podržte kurzor myši | zameranie | Manuálny
titul reťazec | funkciu '' predvolená hodnota názvu, ak atribút názov nie je prítomný
obsahu reťazec | funkciu '' predvolená hodnota obsahu, ak atribút „data-content“ nie je prítomný
meškanie číslo | objekt 0

oneskorenie zobrazenia a skrytia popoveru (ms) - netýka sa manuálneho typu spúšťania

Ak je zadané číslo, oneskorenie sa použije na skrytie/zobrazenie

Štruktúra objektu je:delay: { show: 500, hide: 100 }

Hlavy hore! Voľby pre jednotlivé kontextové okná môžu byť alternatívne špecifikované pomocou dátových atribútov.

Označenie

Z výkonnostných dôvodov sú povolené Tooltip a Popover data-apis. Ak ich chcete použiť, stačí zadať možnosť výberu.

Metódy

$().popover(options)

Inicializuje vyskakovacie okná pre kolekciu prvkov.

.popover('show')

Odhaľuje kontextové okno prvkov.

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

.popover('hide')

Skryje vyskakovacie okno prvkov.

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

.popover('toggle')

Prepína vyskakovacie okno prvkov.

  1. $ ( '#element' ). vyskakovacie okno ( 'prepnúť' )

O upozorneniach

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

Stiahnuť ▼

Príklady upozornení

Doplnok výstrah funguje na bežných výstražných správach a blokuje správy.

Sväté guacamole! Najlepšie sa presvedčte, že nevyzeráte príliš dobre.

Och, rýchlo! Máte chybu!

Zmeňte to a to a skúste to znova. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Vykonajte túto akciu Alebo urobte toto


Pomocou bootstrap-alert.js

Povoliť zrušenie upozornenia prostredníctvom javascriptu:

  1. $ ( ".upozornenie" ). upozornenie ()

Označenie

Stačí pridať data-dismiss="alert"tlačidlo na zatvorenie, aby sa automaticky aktivovala funkcia zatvorenia upozornenia.

  1. <a class = "close" data-dismiss = "alert" href = "#" > × </a>

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.

  1. $ ( ".upozornenie" ). upozornenie ( 'zavrieť' )

Diania

Výstražná trieda Bootstrapu odhaľuje niekoľko udalostí na pripojenie k funkcii výstrahy.

Udalosť Popis
Zavrieť Táto udalosť sa spustí okamžite po closezavolaní metódy inštancie.
ZATVORENÉ Táto udalosť sa spustí po zatvorení výstrahy (bude čakať na dokončenie prechodov css).
  1. $ ( '#my-upozornenie' ). bind ( 'zatvorené' , funkcia () {
  2. // urob niečo…
  3. })

O

Urobte viac s tlačidlami. Stavy ovládacích tlačidiel alebo vytváranie skupín tlačidiel pre viac komponentov, ako sú panely s nástrojmi.

Stiahnuť súbor

Príklady použitia

Na stavy a prepínače použite doplnok tlačidiel.

Štátny
Jediný prepínač
začiarkavacie políčko
Rádio

Pomocou bootstrap-button.js

Povoliť tlačidlá cez javascript:

  1. $ ( '.nav-tabs' ). tlačidlo ()

Označenie

Atribúty údajov sú neoddeliteľnou súčasťou doplnku tlačidiel. Pozrite si príklad kódu nižšie pre rôzne typy značiek.

  1. <!-- Pridať data-toggle="button" na aktiváciu prepínania na jednom tlačidle -->
  2. <button class = "btn" data-toggle = "button" > Jeden prepínač </button>
  3.  
  4. <!-- Pridať data-toggle="buttons-checkbox" na prepínanie štýlu začiarkavacieho políčka v skupine btn -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Left </button>
  7. <button class = "btn" > Middle </button>
  8. <button class = "btn" > Vpravo </button>
  9. </div>
  10.  
  11. <!-- Pridať data-toggle="buttons-radio" na prepínanie štýlu rádia v skupine btn -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Left </button>
  14. <button class = "btn" > Middle </button>
  15. <button class = "btn" > Vpravo </button>
  16. </div>

Metódy

$().button('toggle')

Prepína stav push. Dodáva tlačidlu vzhľad, že bolo aktivované.

Hlavy hore! Pomocou data-toggleatribútu môžete povoliť automatické prepínanie tlačidla.
  1. <button class = "btn" data-toggle = "button" > </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.

  1. <button class = "btn" data-loading-text = "loading things..." > ... </button>
Hlavy hore! Firefox zotrváva v zakázanom stave počas načítania stránky . Riešením tohto problému je použitie autocomplete="off".

$().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.

  1. <button class = "btn" data-complete-text = "dokončené!" > ... </button>
  2. <script>
  3. $ ( '.btn' ). tlačidlo ( 'kompletné' )
  4. </script>

O

Získajte základné štýly a flexibilnú podporu pre skladacie komponenty, ako sú akordeóny a navigácia.

Stiahnuť súbor

* Vyžaduje, aby bol zahrnutý doplnok Transitions.

Príklad akordeónu

Pomocou doplnku na zbalenie sme vytvorili jednoduchý widget v štýle akordeónu:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua dať na to vtáka chobotnica single-origin coffee nulla expectnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan okrem mäsiara vice lomo. Legíny occaecat craft beer farm-to-table, raw denim estetický synth nesciunt asi ste o nich nepočuli accusamus labore udržateľné VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua dať na to vtáka chobotnica single-origin coffee nulla expectnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan okrem mäsiara vice lomo. Legíny occaecat craft beer farm-to-table, raw denim estetický synth nesciunt asi ste o nich nepočuli accusamus labore udržateľné VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua dať na to vtáka chobotnica single-origin coffee nulla expectnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan okrem mäsiara vice lomo. Legíny occaecat craft beer farm-to-table, raw denim estetický synth nesciunt asi ste o nich nepočuli accusamus labore udržateľné VHS.

Pomocou bootstrap-collapse.js

Povoliť cez javascript:

  1. $ ( ".collapse" ). kolaps ()

možnosti

názov typu predvolená popis
rodič selektor falošný Ak použijete selektor, po zobrazení tejto zbaliteľnej položky sa zatvoria všetky skladacie prvky pod zadaným rodičom. (podobné tradičnému správaniu na akordeóne)
prepnúť boolovská hodnota pravda Prepína zbaliteľný prvok pri vyvolaní

Označenie

Stačí pridať data-toggle="collapse"a data-targetdo prvku, aby sa automaticky priradilo ovládanie skladacieho prvku. Atribút data-targetakceptuje selektor css, na ktorý sa má použiť zbalenie. Nezabudnite pridať triedu collapsedo skladacieho prvku. Ak chcete, aby bola predvolene otvorená, pridajte ďalšiu triedu in.

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. jednoduchý skladací
  3. </button>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>
Hlavy hore! Ak chcete do skladacieho ovládacieho prvku pridať správu skupiny podobnú akordeónu, pridajte atribút data data-parent="#selector". Pozrite si ukážku, aby ste to videli v akcii.

Metódy

.collapse(možnosti)

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

  1. $ ( '#myCollapsible' ). kolaps ({
  2. prepnúť : nepravda
  3. })

.collapse('toggle')

Prepne zbaliteľný prvok na zobrazený alebo skrytý.

.collapse('show')

Zobrazuje skladací prvok.

.collapse('skryť')

Skryje skladací prvok.

Diania

Trieda zbalenia Bootstrapu odhaľuje niekoľko udalostí na pripojenie k funkcii zbalenia.

Udalosť Popis
šou Táto udalosť sa spustí okamžite po showzavolaní metódy inštancie.
zobrazené Táto udalosť sa spustí, keď je prvok zbalenia 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.
skryté Táto udalosť sa spustí, keď bol prvok zbalenia skrytý pred používateľom (bude čakať na dokončenie prechodov css).
  1. $ ( '#myCollapsible' ). on ( 'skryté' , funkcia () {
  2. // urob niečo…
  3. })

O

Základný, jednoducho rozšírený plugin na rýchle vytváranie elegantných hlások s ľubovoľným zadávaním textu z formulára.

Stiahnuť súbor

Príklad

Ak chcete zobraziť výsledky prepisovania, začnite písať do poľa nižšie.


Pomocou bootstrap-typeahead.js

Zavolajte typahead cez javascript:

  1. $ ( '.typeahead' ). písať dopredu ()

možnosti

názov typu predvolená popis
zdroj pole [ ] Zdroj údajov, na ktorý sa má dotazovať.
položky číslo 8 Maximálny počet položiek na zobrazenie v rozbaľovacej ponuke.
dohadzovač funkciu nerozlišuje veľké a malé písmená Metóda použitá na určenie, či sa dotaz zhoduje s položkou. Prijíma jeden argument, itemproti ktorému sa má test otestovať. Prístup k aktuálnemu dotazu získate pomocou this.query. trueAk sa dopyt zhoduje, vráti boolovskú hodnotu.
triedič funkciu presná zhoda, rozlišovať malé a veľké písmená
, nerozlišovať malé a
veľké písmená
Metóda používaná na triedenie výsledkov automatického dopĺňania. Akceptuje jeden argument itemsa má rozsah typovej inštancie. Odkaz na aktuálny dopyt pomocou this.query.
zvýrazňovač funkciu zvýrazní všetky predvolené zhody Metóda používaná na zvýraznenie výsledkov automatického dopĺňania. Akceptuje jeden argument itema má rozsah typovej inštancie. Mal by vrátiť html.

Označenie

Pridajte atribúty údajov na registráciu prvku s funkciou prepisovania.

  1. <input type = "text" data- provide = "typeahead" >

Metódy

.typeahead(options)

Inicializuje vstup písaním dopredu.