JavaScript

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

Hlavy vzhůru! Tyto dokumenty jsou pro verzi 2.3.2, která již není oficiálně podporována. Podívejte se na nejnovější verzi Bootstrapu!

Individuální nebo sestavené

Pluginy mohou být zahrnuty jednotlivě (ačkoli některé mají požadované závislosti) nebo všechny najednou. Oba bootstrap.js i bootstrap.min.js obsahují všechny pluginy v jednom souboru.

Atributy dat

Všechny zásuvné moduly Bootstrap můžete používat čistě prostřednictvím značkovacího API, aniž byste museli psát jediný řádek JavaScriptu. Toto je první třída API Bootstrapu a při používání zásuvného modulu byste jej měli nejprve zvážit.

To znamená, že v některých situacích může být žádoucí tuto funkci vypnout. Proto také poskytujeme možnost deaktivovat rozhraní API datových atributů zrušením vazby všech událostí v těle s jmenným prostorem `'data-api'`. Tohle vypadá takto:

  1. $ ( 'tělo' ). vypnuto ( '.data-api' )

Alternativně, chcete-li cílit na konkrétní plugin, stačí zahrnout název pluginu jako jmenný prostor spolu s jmenným prostorem data-api, jako je tento:

  1. $ ( 'tělo' ). vypnuto ( '.alert.data-api' )

Programové rozhraní API

Také věříme, že byste měli být schopni používat všechny Bootstrap pluginy čistě přes JavaScript API. Všechna veřejná rozhraní API jsou jediné, zřetězitelné metody a vracejí kolekci, podle které se jedná.

  1. $ ( ".btn.danger" ). tlačítko ( "přepnout" ). addClass ( "tlustý" )

Všechny metody by měly přijímat volitelný objekt voleb, řetězec, který cílí na konkrétní metodu, nebo nic (což spouští plugin s výchozím chováním):

  1. $ ( "#myModal" ). modal () // inicializován s výchozími hodnotami
  2. $ ( "#myModal" ). modální ({ keyboard : false }) // inicializováno bez klávesnice
  3. $ ( "#myModal" ). modal ( 'show' ) // okamžitě inicializuje a vyvolá show

Každý plugin také odhaluje svůj nezpracovaný konstruktor na vlastnosti `Constructor`: $.fn.popover.Constructor. Pokud chcete získat konkrétní instanci pluginu, načtěte ji přímo z prvku: $('[rel=popover]').data('popover').

Žádný konflikt

Někdy je nutné použít Bootstrap pluginy s jinými UI frameworky. Za těchto okolností může občas dojít ke kolizím oboru názvů. Pokud k tomu dojde, můžete zavolat .noConflictna plugin, jehož hodnotu chcete vrátit.

  1. var bootstrapButton = $ . fn _ tlačítko . noConflict () // vrátí $.fn.button na dříve přiřazenou hodnotu
  2. $ . fn _ bootstrapBtn = bootstrapButton // dá $().bootstrapBtn funkci bootstrap

Události

Bootstrap poskytuje vlastní události pro většinu jedinečných akcí pluginu. Obecně platí, že jsou ve formě infinitivu a minulého příčestí - kde infinitiv (např. show) je spuštěn na začátku události a jeho minulý tvar participia (např. shown) se spouští při dokončení akce.

Všechny infinitivní události poskytují funkci preventDefault. To poskytuje možnost zastavit provádění akce před jejím zahájením.

  1. $ ( '#myModal' ). on ( 'show' , function ( e ) {
  2. jestliže (! data ) vrátí e . preventDefault () // zastaví zobrazování modalu
  3. })

O přechodech

Pro jednoduché přechodové efekty zahrňte bootstrap-transition.js jednou vedle ostatních souborů JS. Pokud používáte zkompilovaný (nebo minifikovaný) bootstrap.js , není potřeba jej zahrnout – už to tam je.

Případy užití

Několik příkladů přechodového pluginu:

  • Posouvání nebo blednutí v modálech
  • Vyblednutí karet
  • Slábnoucí upozornění
  • Posuvné karuselové panely

Příklady

Modály jsou zjednodušené, ale flexibilní dialogové výzvy s minimální požadovanou funkčností a inteligentními výchozími nastaveními.

Statický příklad

Vykreslený modal se záhlavím, tělem a sadou akcí v zápatí.

  1. <div class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. < typ tlačítka = "button" class = "zavřít" data-dismiss = "modální" aria-hidden = "true" > × </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" > Zavřít </a>
  11. <a href = "#" class = "btn btn-primary" > Uložit změny </a>
  12. </div>
  13. </div>

Ž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.

  1. <!-- Tlačítko pro modální spuštění -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Spustit demo modal </a>
  3.  
  4. <!-- Modální -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div class = "modal-header" >
  7. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > Modální záhlaví </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> Jedno jemné tělo… </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Zavřít </button>
  15. <button class = "btn btn-primary" > Uložit změny </button>
  16. </div>
  17. </div>

Používání

Prostřednictvím datových atributů

Aktivujte modal bez psaní JavaScriptu. Nastavit data-toggle="modal"na ovládacím prvku, jako je tlačítko, spolu s data-target="#foo"nebo href="#foo"pro cíl na konkrétní modal, který chcete přepnout.

  1. <button type = "button" data-toggle = "modal" data-target = "#myModal" > Spustit modální </button>

Prostřednictvím JavaScriptu

Zavolejte modal s id myModalpomocí jediného řádku JavaScriptu:

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

Možnosti

Možnosti lze předávat prostřednictvím atributů dat nebo JavaScriptu. U atributů dat připojte název volby k data-, jako v data-backdrop="".

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.
dálkový cesta Nepravdivé

Pokud je poskytnuta vzdálená adresa URL, obsah bude načten pomocí loadmetody jQuery a vložen do souboru .modal-body. Pokud používáte datové rozhraní API, můžete alternativně použít hrefznačku k určení vzdáleného zdroje. Příklad je uveden níže:

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

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ž se modal dokončí skrytí před uživatelem (bude čekat na dokončení přechodů css).
  1. $ ( '#myModal' ). on ( 'hidden' , function () {
  2. // dělej něco…
  3. })

Příklad v navigační liště

Zásuvný modul ScrollSpy slouží k automatické aktualizaci cílů navigace na základě pozice posouvání. Posouvejte oblast pod navigační lištou a sledujte, jak se aktivní třída mění. Rozbalovací podpoložky budou také zvýrazněny.

@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ím, 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.


Používání

Prostřednictvím datových atributů

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), a data-target=".navbar"vybrat, kterou navigaci použít. Budete chtít použít scrollspy s .navkomponentou.

  1. <body data-spy = "scroll" data-target = ".navbar" > ... </body>

Prostřednictvím JavaScriptu

Zavolejte scrollspy přes JavaScript:

  1. $ ( '#navbar' ). scrollspy ()
Hlavy vzhůru! Odkazy na navigační liště musí mít rozliš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

Možnosti lze předávat prostřednictvím atributů dat nebo JavaScriptu. U atributů dat připojte název volby k data-, jako v data-offset="".

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

Události

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

Příklady karet

Přidejte rychlou, dynamickou funkci karet pro přechod mezi panely místního obsahu, 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.


Používání

Povolit záložky pomocí JavaScriptu (každá karta musí být aktivována 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 na kartě nebo pilulce bez psaní jakéhokoli JavaScriptu pouhým zadáním data-toggle="tab"nebo data-toggle="pill"na prvku. 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. })

Příklady

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ů.

Z důvodů výkonu jsou tooltip a popover data-apis aktivovány, což znamená, že je musíte inicializovat sami .

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.

Čtyři směry

Popisky ve vstupních skupinách

Při používání popisků a vyskakovacích oken se vstupními skupinami Bootstrap budete muset nastavit možnost container(popsáno níže), abyste se vyhnuli nežádoucím vedlejším účinkům.


Používání

Spusťte popis pomocí JavaScriptu:

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

Možnosti

Možnosti lze předávat prostřednictvím atributů dat nebo JavaScriptu. U atributů dat připojte název volby k data-, jako v data-animation="".

název typ výchozí popis
animace booleovský skutečný použijte přechod css fade na popisek
html booleovský Nepravdivé Vložte html do popisku. Pokud je nepravda, textk vložení obsahu do dom se použije metoda jquery. Pokud se obáváte útoků XSS, použijte text.
umístění řetězec | funkce 'horní' jak umístit nápovědu - nahoru | dole | vlevo | že jo
volič tětiva Nepravdivé Pokud je k dispozici selektor, objekty popisků budou delegovány na zadané cíle.
titul řetězec | funkce '' výchozí hodnota názvu, pokud není přítomna značka `title`
spoušť tětiva 'zaostření po najetí myší' jak se spouští nápověda - klikněte | vznášet se | zaměření | manuál. Všimněte si, že předáváte spouštěče vícenásobné, mezerou oddělené, typy spouštěčů.
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 }

kontejner řetězec | Nepravdivé Nepravdivé

Připojí popisek ke konkrétnímu prvkucontainer: 'body'

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

Označení

  1. <a href = "#" data-toggle = "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' )

.tooltip('destroy')

Skryje a zničí popisek prvku.

  1. $ ( '#element' ). tooltip ( 'zničit' )

Příklady

Přidejte malé překryvné vrstvy obsahu, jako jsou ty na iPadu, k libovolnému prvku pro uložení sekundárních informací. Vyskakovací okno spustíte najetím na tlačítko. Vyžaduje zahrnutí Tooltip .

Statický popover

K dispozici jsou čtyři možnosti: zarovnání nahoře, vpravo, dole a vlevo.

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover vpravo

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover dole

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover vlevo

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

dataZ JavaScriptu a obsahu v rámci atributu nejsou generovány žádné značky zobrazené jako vyskakovací okna .

Živé demo

Čtyři směry


Používání

Povolit vyskakovací okna prostřednictvím JavaScriptu:

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

Možnosti

Možnosti lze předávat prostřednictvím atributů dat nebo JavaScriptu. U atributů dat připojte název volby k data-, jako v data-animation="".

název typ výchozí popis
animace booleovský skutečný použijte přechod css fade na popisek
html booleovský Nepravdivé Vložte html do vyskakovacího okna. Pokud je nepravda, textk vložení obsahu do dom se použije metoda jquery. Pokud se obáváte útoků XSS, použijte text.
umístění řetězec | 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 'kliknout' jak se spouští vyskakovací okno - klikněte | vznášet se | 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 }

kontejner řetězec | Nepravdivé Nepravdivé

Připojí vyskakovací okno ke konkrétnímu prvkucontainer: 'body'

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

.popover('zničit')

Skryje a zničí popover prvku.

  1. $ ( '#element' ). vyskakovací okno ( 'zničit' )

Příklad upozornění

Pomocí tohoto pluginu přidejte ke všem výstražným zprávám funkci zrušení.

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


Používání

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 ( 'uzavřeno' , funkce () {
  2. // dělej něco…
  3. })

Příklady použití

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átní

Přidat data-loading-text="Loading...", chcete-li použít stav načítání na tlačítku.

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Načítání..." > Stav načítání </button>

Jediný přepínač

Přidat data-toggle="button"pro aktivaci přepínání na jednom tlačítku.

  1. <button type = "button" class = "btn btn-primary" data-toggle = "button" > Single Toggle </button>

Zaškrtávací políčko

Přidat data-toggle="buttons-checkbox"pro přepínání stylu zaškrtávacího políčka na skupině btn.

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > Left </button>
  3. <button type = "button" class = "btn btn-primary" > Middle </button>
  4. <button type = "button" class = "btn btn-primary" > Right </button>
  5. </div>

Rádio

Přidat data-toggle="buttons-radio"pro přepínání stylu rádia na skupině btn.

  1. <div class = "btn-group" data-toggle = "buttons-radio" >
  2. <button type = "button" class = "btn btn-primary" > Left </button>
  3. <button type = "button" class = "btn btn-primary" > Middle </button>
  4. <button type = "button" class = "btn btn-primary" > Right </button>
  5. </div>

Používání

Povolit tlačítka prostřednictvím 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í.

Možnosti

Žádný

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 type = "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 type = "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. < typ tlačítka = "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.

* 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.
  1. <div class = "akordeon" id = "akordeon2" >
  2. <div class = "akordeon-skupina" >
  3. <div class = "akordeon-heading" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. Položka skládací skupiny č. 1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "kolaps těla harmoniky v" >
  9. <div class = "akordeon-vnitřní" >
  10. Anim pariatur klišé...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "akordeon-skupina" >
  15. <div class = "akordeon-heading" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. Položka skládací skupiny č. 2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "kolaps těla harmoniky" >
  21. <div class = "akordeon-vnitřní" >
  22. Anim pariatur klišé...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

Plugin můžete použít i bez označení akordeonu. Vytvořit tlačítko přepíná rozbalení a sbalení jiného prvku.

  1. < typ tlačítka = "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>

Používání

Prostřednictvím datových atributů

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.

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.

Prostřednictvím JavaScriptu

Povolit ručně pomocí:

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

Možnosti

Možnosti lze předávat prostřednictvím atributů dat nebo JavaScriptu. U atributů dat připojte název volby k data-, jako v data-parent="".

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í

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. })

Příklad

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.

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

Budete chtít nastavit autocomplete="off", aby se výchozí nabídky prohlížeče nezobrazovaly nad rozevíracím seznamem typu Bootstrap.


Používání

Prostřednictvím datových atributů

Přidáním atributů dat zaregistrujete prvek s funkcí napřed, jak je znázorněno v příkladu výše.

Prostřednictvím JavaScriptu

Zavolejte typahead ručně pomocí:

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

Možnosti

Možnosti lze předávat prostřednictvím atributů dat nebo JavaScriptu. U atributů dat připojte název volby k data-, jako v data-source="".

název typ výchozí popis
zdroj pole, funkce [ ] Zdroj dat, na který se má dotazovat. Může to být pole řetězců nebo funkce. Funkci jsou předány dva argumenty, queryhodnota ve vstupním poli a processzpětné volání. Funkci lze použít synchronně vrácením zdroje dat přímo nebo asynchronně prostřednictvím processjediného argumentu zpětného volání.
položky číslo 8 Maximální počet položek, které se mají zobrazit v rozbalovací nabídce.
minLength číslo 1 Minimální délka znaků potřebná před spuštěním návrhů automatického doplňování
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.
aktualizátor funkce vrátí vybranou položku Metoda použitá k vrácení vybrané položky. Přijímá jeden argument, itema má rozsah instance typeahead.
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.

Metody

.typeahead(options)

Inicializuje vstup s přepisem.

Příklad

Subnavigace vlevo je živou ukázkou pluginu afixu.


Používání

Prostřednictvím datových atributů

Chcete-li snadno přidat chování připojování k libovolnému prvku, stačí přidat data-spy="affix"k prvku, který chcete špehovat. Poté pomocí posunů definujte, kdy zapnout a vypnout připnutí prvku.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Hlavy vzhůru! Musíte spravovat pozici připnutého prvku a chování jeho bezprostředního rodiče. Pozice je řízena pomocí affix, affix-top, a affix-bottom. Nezapomeňte zkontrolovat potenciálně zhroucený rodič, když se afix spustí, protože odstraňuje obsah z normálního toku stránky.

Prostřednictvím JavaScriptu

Zavolejte plugin pro připojení pomocí JavaScriptu:

  1. $ ( '#navbar' ). připojit ()

Možnosti

Možnosti lze předávat prostřednictvím atributů dat nebo JavaScriptu. U atributů dat připojte název volby k data-, jako v data-offset-top="200".

název typ výchozí popis
offset číslo | funkce | objekt 10 Pixely k odsazení od obrazovky při výpočtu pozice posouvání. Pokud je zadáno jediné číslo, posun bude použit v horním i levém směru. Chcete-li poslouchat jeden směr nebo více jedinečných posunů, stačí zadat objekt offset: { x: 10 }. Funkci použijte, když potřebujete dynamicky poskytnout offset (užitečné pro některé responzivní návrhy).