Javascript pro Bootstrap

Oživte komponenty Bootstrapu – nyní s 12 vlastními zásuvnými moduly jQuery .

Modály

Efektivní, ale flexibilní, převzít tradiční javascript modální plugin pouze s minimální požadovanou funkčností a inteligentními výchozími nastaveními.

Rozbalovací seznamy

Pomocí tohoto jednoduchého pluginu přidejte rozbalovací nabídky téměř ke všemu v Bootstrapu. Bootstrap nabízí plnou podporu rozevírací nabídky na navigační liště, kartách a pilulkách.

Scrollspy

Použijte scrollspy k automatické aktualizaci odkazů v navigační liště tak, aby zobrazovaly aktuální aktivní odkaz na základě pozice posouvání.

Přepínatelné karty

Pomocí tohoto pluginu můžete učinit karty a pilulky užitečnějšími tím, že jim umožníte přepínat mezi panely místního obsahu s kartami.

Popisky

Tooltips, nový pohled na plugin jQuery Tipsy, se nespoléhají na obrázky – používají CSS3 pro animace a datové atributy pro místní ukládání titulků.

Popovers *

Přidejte malé překryvné vrstvy obsahu, jako jsou ty na iPadu, k libovolnému prvku pro uložení sekundárních informací.

* Vyžaduje zahrnutí popisků

Výstražné zprávy

Výstražný plugin je malá třída pro přidávání blízkých funkcí k výstrahám.

Tlačítka

Udělejte více s tlačítky. Stavy ovládacích tlačítek nebo vytváření skupin tlačítek pro více komponent, jako jsou panely nástrojů.

Kolaps

Získejte základní styly a flexibilní podporu pro skládací komponenty, jako jsou akordeony a navigace.

Kolotoč

Vytvořte kolotoč jakéhokoli obsahu, který chcete poskytnout interaktivní prezentaci obsahu.

Přepisovat dopředu

Základní, snadno rozšířený plugin pro rychlé vytváření elegantních textových předloh s libovolným textovým vstupem z formuláře.

Přechody *

Pro jednoduché přechodové efekty zahrňte jednou bootstrap-transition.js, abyste vložili modály nebo zeslabili upozornění.

* Vyžadováno pro animaci v pluginech

Hlavy vzhůru! Všechny pluginy javascriptu vyžadují nejnovější verzi jQuery.

O modálech

Efektivní, ale flexibilní, převzít tradiční javascript modální plugin pouze s minimální požadovanou funkčností a inteligentními výchozími nastaveními.

Stáhnout soubor

Statický příklad

Níže je staticky vykreslený modal.

Živé demo

Přepněte modal pomocí javascriptu kliknutím na tlačítko níže. Posune se dolů a zmizí z horní části stránky.

Spusťte demo modal

Použití bootstrap-modal

Zavolejte modal pomocí javascriptu:

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

Možnosti

název typ výchozí popis
pozadí booleovský skutečný Zahrnuje prvek modálního pozadí. Případně zadejte staticpro pozadí, které neuzavře modal po kliknutí.
klávesnice booleovský skutečný Zavře modal po stisknutí klávesy Escape
ukázat booleovský skutečný Po inicializaci zobrazí modal.

Označení

Modály na své stránce můžete snadno aktivovat, aniž byste museli psát jediný řádek javascriptu. Stačí nastavit data-toggle="modal"prvek ovladače s data-target="#foo"nebo href="#foo", který odpovídá ID modálního prvku, a po kliknutí spustí váš modal.

Chcete-li také přidat možnosti do své modální instance, stačí je zahrnout jako další datové atributy buď do ovládacího prvku, nebo do samotného modálního označení.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Spustit 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ální záhlaví </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Jedno jemné tělo… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Zavřít </a>
  11. <a href = "#" class = "btn btn-primary" > Uložit změny </a>
  12. </div>
  13. </div>
Hlavy vzhůru! Pokud chcete, aby se váš modal animoval dovnitř a ven, stačí .fadek prvku přidat třídu .modal(viz ukázka, kde je to vidět v akci) a zahrnout bootstrap-transition.js.

Metody

.modal(options)

Aktivuje váš obsah jako modální. Přijímá volitelné možnosti object.

  1. $ ( '#myModal' ). modální ({
  2. klávesnice : false
  3. })

.modal('toggle')

Ručně přepíná modal.

  1. $ ( '#myModal' ). modální ( 'přepnout' )

.modal('show')

Ručně otevře modal.

  1. $ ( '#myModal' ). modální ( 'ukázat' )

.modal('hide')

Ručně skryje modal.

  1. $ ( '#myModal' ). modální ( 'skrýt' )

Události

Modální třída Bootstrapu odhaluje několik událostí pro zapojení do modální funkčnosti.

událost Popis
ukázat Tato událost se spustí okamžitě při showvolání metody instance.
zobrazeno Tato událost se spustí, když bude modal zviditelněn pro uživatele (bude čekat na dokončení přechodů css).
skrýt Tato událost se spustí okamžitě po hidezavolání metody instance.
skrytý Tato událost se spustí, když modal skončí skrytí před uživatelem (bude čekat na dokončení přechodů css).
  1. $ ( '#myModal' ). on ( 'hidden' , function () {
  2. // dělej něco…
  3. })

Zásuvný modul ScrollSpy slouží k automatické aktualizaci cílů navigace na základě pozice posouvání.

Stáhnout soubor

Příklad navigační lišty s scrollspy

Procházejte oblast níže a sledujte aktualizaci navigace. Rozbalovací podpoložky budou také zvýrazněny. Zkus to!

@Tlustý

Ad legíny keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi, než vyprodali qui. Tumblr práva na kolo od farmy až po stůl. Anim keffiyeh carles cardigan. Foto budka Velit seitan mcsweeney 3 wolf moon irure. Cosby svetr lomo jean šortky, williamsburg mikina minim qui pravděpodobně jste o nich neslyšeli a cardigan svěřenecký fond culpa biodiesel wes anderson estetický. Nihil tetovaný accusamus, víra ironie bionafta keffiyeh řemeslník ullamco consequat.

@mdo

Skateboard Veniam Marfa knír, adipisicing fugiat velit vidle vousy. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat čtyři loko nisi, ea helvetica nulla carles. Tetovaný cosby svetr food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson + 1 sartorial. Carles neestetické cvičení quis genrify. Brooklyn adipisicing craft beer vice keytar deserunt.

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á životnost id vinyl, echo park consequat quis aliquip banh mi vidle. Vero VHS je adipisicing. Minimální messenger taška Consectetur nisi DIY. Cred ex in, udržitelný 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 cokoliv delectus food truck. Sapiente synth id předpokládá. Locavore sed helvetica klišé ironie, thundercats, o kterých jste pravděpodobně ještě neslyšeli, consequat hoodie bezlepkový lo-fi fap aliquip. Labore elit placeat před vyprodání, Terry richardson proident brunch nesciunt quis cosby svetr pariatur keffiyeh ut helvetica artisan. Cardigan řemeslné pivo seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Pomocí bootstrap-scrollspy.js

Zavolejte scrollspy přes javascript:

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

Označení

Chcete-li snadno přidat scrollspy chování do vaší navigace na horní liště, stačí přidat data-spy="scroll"prvek, který chcete špehovat (nejčastěji by to bylo tělo).

  1. <body data-spy = "scroll" > ... </body>
Hlavy vzhůru! Odkazy na navigační liště musí mít řešitelné cíle id. Například <a href="#home">home</a>musí odpovídat něčemu v domku, jako je <div id="home"></div>.

Metody

.scrollspy('refresh')

Když používáte scrollspy ve spojení s přidáváním nebo odebíráním prvků z DOM, budete muset volat metodu refresh takto:

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

Možnosti

název typ výchozí popis
offset číslo 10 Pixely k odsazení shora při výpočtu pozice posouvání.

Události

událost Popis
aktivovat Tato událost se spustí vždy, když bude scrollspy aktivována nová položka.

Tento plugin přidává funkci rychlých, dynamických karet a pilulek pro přechod přes místní obsah.

Stáhnout soubor

Příklady karet

Klepnutím na níže uvedené karty můžete přepínat mezi skrytými panely, a to i prostřednictvím rozbalovacích nabídek.

Raw denim o nich jste pravděpodobně ještě neslyšeli džínové šortky Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Moustache klišé tempor, williamsburg carles veganská helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby svetr eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan americké oblečení, řezník 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.


Pomocí bootstrap-tab.js

Povolit záložky pomocí javascriptu (každou kartu je třeba aktivovat samostatně):

  1. $ ( '#myTab a' ). klikni ( funkce ( e ) {
  2. e . preventDefault ();
  3. $ ( toto ). karta ( 'zobrazit' );
  4. })

Jednotlivé karty můžete aktivovat několika způsoby:

  1. $ ( '#myTab a[href="#profile"]' ). karta ( 'zobrazit' ); // Vyberte kartu podle názvu
  2. $ ( '#myTab a:first' ). karta ( 'zobrazit' ); // Vyberte první kartu
  3. $ ( '#myTab a:last' ). karta ( 'zobrazit' ); // Vyberte poslední kartu
  4. $ ( '#myTab li:eq(2) a' ). karta ( 'zobrazit' ); // Vyberte třetí kartu (indexováno 0)

Označení

Můžete aktivovat navigaci pomocí karty nebo pilulky bez psaní jakéhokoli javascriptu pouhým zadáním prvku data-toggle="tab"nebo data-toggle="pill"na prvek. Přidáním tříd nava nav-tabsna kartu ulse použije styl karty bootstrap.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Domovská stránka </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Zprávy </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Nastavení </a></li>
  6. </ul>

Metody

$().tab

Aktivuje prvek karty a kontejner obsahu. Karta by měla mít buď a data-targetnebo hrefcílící na uzel kontejneru v modelu DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Home </a></li>
  3. <li><a href = "#profile" > Profil </a></li>
  4. <li><a href = "#messages" > Zprávy </a></li>
  5. <li><a href = "#settings" > Nastavení </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. $ ( function () {
  17. $ ( '#myTab a:last' ). karta ( 'zobrazit' );
  18. })
  19. </script>

Události

událost Popis
ukázat Tato událost se spustí při zobrazení karty, ale předtím, než se zobrazí nová karta. Pomocí event.targeta event.relatedTargetmůžete cílit na aktivní kartu a na předchozí aktivní kartu (pokud je k dispozici).
zobrazeno Tato událost se spustí při zobrazení karty po zobrazení karty. Pomocí event.targeta event.relatedTargetmůžete cílit na aktivní kartu a na předchozí aktivní kartu (pokud je k dispozici).
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'show' , function ( e ) {
  2. e . target // aktivovaná karta
  3. e . relatedTarget // předchozí záložka
  4. })

O nástrojových nápovědách

Inspirováno vynikajícím pluginem jQuery.tipsy, který napsal Jason Frame; Popisky jsou aktualizovanou verzí, která se nespoléhá na obrázky, používá css3 pro animace a datové atributy pro místní úložiště titulů.

Stáhnout soubor

Příklad použití Tooltips

Umístěním kurzoru na níže uvedené odkazy zobrazíte popisky:

Úzké kalhoty další úrovně keffiyeh pravděpodobně jste o nich neslyšeli. Fotobudka vousy raw denim knihtisk vegan messenger bag stumptown. Osmibitové americké oblečení z farmy na stůl seitan, mcsweeney's fixie z udržitelné quinoy má vinylový chambray z froté richardson. Beard stumptown, cardigany banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, čtyři loko mcsweeney's cleanse vegan chambray. Skutečně ironický řemeslník bez ohledu na klíč , scénárista z farmy na stůl banky Austin twitter zvládá freeganský cred raw denim single-origin coffee viral.


Pomocí bootstrap-tooltip.js

Spusťte popis pomocí javascriptu:

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

Možnosti

název typ výchozí popis
animace booleovský skutečný použijte přechod css fade na popisek
umístění string|funkce 'horní' jak umístit nápovědu - nahoru | dole | vlevo | že jo
volič tětiva Nepravdivé Pokud je k dispozici selektor, budou objekty s popisem nástroje delegovány na zadané cíle.
titul řetězec | funkce '' výchozí hodnota názvu, pokud tag `title` není přítomen
spoušť tětiva 'vznášet se' jak se spouští nápověda - umístěte kurzor | zaměření | manuál
zpoždění číslo | objekt 0

zpoždění zobrazení a skrytí popisku (ms) - nevztahuje se na typ ručního spouštění

Pokud je zadáno číslo, použije se prodleva pro skrytí/zobrazení

Struktura objektu je:delay: { show: 500, hide: 100 }

Hlavy vzhůru! Volby pro jednotlivé popisky lze alternativně specifikovat pomocí datových atributů.

Označení

Z důvodů výkonu jsou povolena data-apis Tooltip a Popover. Pokud je chcete používat, zadejte možnost výběru.

  1. <a href = "#" rel = "tooltip" title = "first tooltip" > najeďte na mě </a>

Metody

$().tooltip(options)

Připojí obslužný program popisku ke kolekci prvků.

.tooltip('show')

Zobrazí popisek prvku.

  1. $ ( '#element' ). popis ( 'zobrazit' )

.tooltip('hide')

Skryje popisek prvku.

  1. $ ( '#element' ). popis ( 'skrýt' )

.tooltip('toggle')

Přepíná popisek prvku.

  1. $ ( '#element' ). popis ( 'přepnout' )

O popovers

Přidejte malé překryvné vrstvy obsahu, jako jsou ty na iPadu, k libovolnému prvku pro uložení sekundárních informací.

* Vyžaduje zahrnutí popisku

Stáhnout soubor

Příklad vyskakovacího okna po najetí myší

Vyskakovací okno spustíte najetím na tlačítko.


Pomocí bootstrap-popover.js

Povolit vyskakovací okna pomocí javascriptu:

  1. $ ( '#příklad' ). vyskakovací okno ( možnosti )

Možnosti

název typ výchozí popis
animace booleovský skutečný použijte přechod css fade na popisek
umístění string|funkce 'že jo' jak umístit vyskakovací okno - nahoře | dole | vlevo | že jo
volič tětiva Nepravdivé pokud je k dispozici selektor, budou objekty s popisem nástroje delegovány na zadané cíle
spoušť tětiva 'vznášet se' jak se spouští nápověda - umístěte kurzor | zaměření | manuál
titul řetězec | funkce '' výchozí hodnota názvu, pokud atribut `title` není přítomen
obsah řetězec | funkce '' výchozí hodnota obsahu, pokud atribut `data-content` není přítomen
zpoždění číslo | objekt 0

zpoždění zobrazení a skrytí popoveru (ms) - nevztahuje se na ruční typ spouštění

Pokud je zadáno číslo, použije se prodleva pro skrytí/zobrazení

Struktura objektu je:delay: { show: 500, hide: 100 }

Hlavy vzhůru! Volby pro jednotlivá vyskakovací okna lze alternativně specifikovat pomocí datových atributů.

Označení

Z důvodů výkonu jsou povolena data-apis Tooltip a Popover. Pokud je chcete používat, zadejte možnost výběru.

Metody

$().popover(options)

Inicializuje vyskakovací okna pro kolekci prvků.

.popover('show')

Odhalí vyskakovací okno prvků.

  1. $ ( '#element' ). vyskakovací okno ( 'ukázat' )

.popover('hide')

Skryje vyskakovací okno prvků.

  1. $ ( '#element' ). vyskakovací okno ( 'skrýt' )

.popover('toggle')

Přepíná vyskakovací okno prvků.

  1. $ ( '#element' ). vyskakovací okno ( 'přepnout' )

O upozorněních

Výstražný plugin je malá třída pro přidávání blízkých funkcí k výstrahám.

Stažení

Příklad upozornění

Zásuvný modul pro výstrahy funguje na běžných výstražných zprávách a blokuje zprávy.

Svaté guacamole! Raději se přesvědčte, že nevypadáte příliš dobře.

Kruci! Máte chybu!

Změňte to a to a zkuste to znovu. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Proveďte tuto akci Nebo udělejte toto


Pomocí bootstrap-alert.js

Povolit odmítnutí upozornění pomocí javascriptu:

  1. $ ( ".upozornění" ). upozornění ()

Označení

Stačí přidat data-dismiss="alert"k vašemu tlačítku zavřít a automaticky poskytnout funkci uzavření upozornění.

  1. <a class = "zavřít" data-dismiss = "alert" href = "#" > × </a>

Metody

$().alert()

Zabalí všechny výstrahy s funkcí zavření. Chcete-li, aby se vaše upozornění po zavření animovala, ujistěte se, že na ně již byla použita třída .fadea ..in

.alert('zavřít')

Zavře upozornění.

  1. $ ( ".upozornění" ). upozornění ( 'zavřít' )

Události

Výstražná třída Bootstrapu odhaluje několik událostí pro zapojení do funkce výstrah.

událost Popis
zavřít Tato událost se spustí okamžitě při closevolání metody instance.
ZAVŘENO Tato událost se spustí, když bude výstraha uzavřena (bude čekat na dokončení přechodů css).
  1. $ ( '#my-upozornění' ). bind ( 'closed' , function () {
  2. // dělej něco…
  3. })

O

Udělejte více s tlačítky. Stavy ovládacích tlačítek nebo vytváření skupin tlačítek pro více komponent, jako jsou panely nástrojů.

Stáhnout soubor

Příklady použití

Pro stavy a přepínače použijte plugin tlačítek.

Státní
Jediný přepínač
Zaškrtávací políčko
Rádio

Pomocí bootstrap-button.js

Povolit tlačítka pomocí javascriptu:

  1. $ ( '.nav-tabs' ). tlačítko ()

Označení

Atributy dat jsou nedílnou součástí pluginu tlačítka. Podívejte se na níže uvedený příklad kódu pro různé typy označení.

  1. <!-- Add data-toggle="button" pro aktivaci přepínání na jednom tlačítku -->
  2. <button class = "btn" data-toggle = "button" > Single Toggle </button>
  3.  
  4. <!-- Přidat data-toggle="buttons-checkbox" pro přepínání stylu zaškrtávacího políčka ve skupině 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. <!-- Přidat data-toggle="buttons-radio" pro přepínání stylu rádia na btn-group -->
  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>

Metody

$().button('toggle')

Přepíná stav push. Dává tlačítku dojem, že bylo aktivováno.

Hlavy vzhůru! Pomocí data-toggleatributu můžete povolit automatické přepínání tlačítka.
  1. <button class = "btn" data-toggle = "button" > </button>

$().button('načítání')

Nastaví stav tlačítka na načítání - deaktivuje tlačítko a zamění text za načítání textu. Text načítání by měl být definován na prvku tlačítka pomocí atributu data data-loading-text.

  1. <button class = "btn" data-loading-text = "loading things..." > ... </button>
Hlavy vzhůru! Firefox přetrvává v deaktivovaném stavu během načítání stránky . Řešením je použití autocomplete="off".

$().button('reset')

Resetuje stav tlačítka - zamění text za původní text.

$().tlačítko(řetězec)

Resetuje stav tlačítka – přepne text do libovolného datově definovaného textového stavu.

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

O

Získejte základní styly a flexibilní podporu pro skládací komponenty, jako jsou akordeony a navigace.

Stáhnout soubor

* Vyžaduje zahrnutí pluginu Transitions.

Příklad akordeonu

Pomocí pluginu pro sbalení jsme vytvořili jednoduchý widget ve stylu akordeonu:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad chobotnice. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua dát na něj ptáka chobotnice single-origin coffee nulla expectnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan kromě řezníka vice lomo. Legíny occaecat řemeslné pivo farma-to-table, syrový denim estetický synth nesciunt pravděpodobně jste o nich neslyšeli accusamus labore udržitelné VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad chobotnice. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua dát na něj ptáka chobotnice single-origin coffee nulla expectnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan kromě řezníka vice lomo. Legíny occaecat řemeslné pivo farma-to-table, syrový denim estetický synth nesciunt pravděpodobně jste o nich neslyšeli accusamus labore udržitelné VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad chobotnice. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua dát na něj ptáka chobotnice single-origin coffee nulla expectnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan kromě řezníka vice lomo. Legíny occaecat řemeslné pivo farma-to-table, syrový denim estetický synth nesciunt pravděpodobně jste o nich neslyšeli accusamus labore udržitelné VHS.

Pomocí bootstrap-collapse.js

Povolit pomocí javascriptu:

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

Možnosti

název typ výchozí popis
rodič volič Nepravdivé Je-li selektor, všechny skládací prvky pod zadaným nadřazeným prvkem se při zobrazení této skládací položky uzavřou. (podobné tradičnímu chování akordeonu)
přepnout booleovský skutečný Přepíná sbalitelný prvek při vyvolání

Označení

Stačí přidat data-toggle="collapse"a data-targetk prvku a automaticky přiřadit ovládání skládacího prvku. Atribut data-targetpřijímá selektor css, na který se má použít sbalení. Nezapomeňte přidat třídu collapsedo skládacího prvku. Pokud chcete, aby se ve výchozím nastavení otevřela, přidejte další třídu in.

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. jednoduchý skládací
  3. </button>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>
Hlavy vzhůru! Chcete-li ke sbalitelnému ovládacímu prvku přidat správu skupiny podobnou akordeonu, přidejte atribut data data-parent="#selector". Podívejte se na ukázku, abyste to viděli v akci.

Metody

.collapse(options)

Aktivuje váš obsah jako sbalitelný prvek. Přijímá volitelné možnosti object.

  1. $ ( '#myCollapsible' ). kolaps ({
  2. přepnout : nepravda
  3. })

.collapse('toggle')

Přepne sbalitelný prvek na zobrazený nebo skrytý.

.collapse('show')

Zobrazuje skládací prvek.

.collapse('skrýt')

Skrývá skládací prvek.

Události

Třída sbalení Bootstrapu odhaluje několik událostí pro zapojení do funkce sbalení.

událost Popis
ukázat Tato událost se spustí okamžitě při showvolání metody instance.
zobrazeno Tato událost se spustí, když je prvek sbalení viditelný pro uživatele (bude čekat na dokončení přechodů css).
skrýt Tato událost se spustí okamžitě po hidezavolání metody.
skrytý Tato událost se spustí, když byl sbalený prvek skryt před uživatelem (bude čekat na dokončení přechodů css).
  1. $ ( '#myCollapsible' ). on ( 'hidden' , function () {
  2. // dělej něco…
  3. })

O

Základní, snadno rozšířený plugin pro rychlé vytváření elegantních textových předloh s libovolným textovým vstupem z formuláře.

Stáhnout soubor

Příklad

Začněte psát do pole níže, aby se zobrazily výsledky přepisu.


Pomocí bootstrap-typeahead.js

Zavolejte typeahead přes javascript:

  1. $ ( '.typeahead' ). překlep ()

Možnosti

název typ výchozí popis
zdroj pole [ ] Zdroj dat, na který se má dotazovat.
položky číslo 8 Maximální počet položek, které se mají zobrazit v rozbalovací nabídce.
dohazovač funkce nerozlišuje malá a velká písmena Metoda použitá k určení, zda dotaz odpovídá položce. Přijímá jeden argument, itemproti kterému se má dotaz testovat. Přístup k aktuálnímu dotazu pomocí this.query. Vraťte logickou hodnotu true, pokud je dotaz shodný.
třídič funkce přesná shoda,
rozlišovat malá a velká písmena,
nerozlišovat malá a velká písmena
Metoda používaná k řazení výsledků automatického doplňování. Přijímá jeden argument itemsa má rozsah instance typu napřed. Odkaz na aktuální dotaz pomocí this.query.
zvýrazňovač funkce zvýrazní všechny výchozí shody Metoda použitá ke zvýraznění výsledků automatického doplňování. Přijímá jeden argument itema má rozsah instance typu napřed. Měl by vrátit html.

Označení

Přidejte datové atributy pro registraci prvku s funkcí typu ahead.

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

Metody

.typeahead(options)

Inicializuje vstup s přepisem.