Javascript a Bootstrap számára

Keltse életre a Bootstrap összetevőit – immár 12 egyéni jQuery beépülő modullal.

Modálok

Egy áramvonalas, de rugalmas, átveszi a hagyományos javascript modális beépülő modult, csak a minimálisan szükséges funkcionalitással és intelligens alapértelmezésekkel.

Legördülő menük

Ezzel az egyszerű beépülő modullal a Bootstrapben szinte bármihez hozzáadhat legördülő menüket. A Bootstrap teljes körű legördülő menü támogatást nyújt a navigációs sávon, a lapokon és a tablettákon.

Scrollspy

A scrollspy segítségével automatikusan frissítheti a navigációs sáv hivatkozásait, hogy a görgetés pozíciója alapján jelenjen meg az aktuális aktív hivatkozás.

Váltható lapok

Használja ezt a beépülő modult, hogy hasznosabbá tegye a lapokat és a tablettákat azáltal, hogy lehetővé teszi számukra a helyi tartalom lapozható ablaktáblái közötti váltogatást.

Eszköztippek

A jQuery Tipsy beépülő modul új változata, az eszköztippek nem támaszkodnak a képekre – CSS3-at használnak animációkhoz és adatattribútumokat a helyi címtároláshoz.

Popovers *

Adjon hozzá kis tartalomfedvényeket, például az iPaden lévőket, bármely másodlagos információ tárolására szolgáló elemhez.

* Eszköztippeket kell tartalmaznia

Figyelmeztető üzenetek

A riasztási beépülő modul egy apró osztály a riasztásokhoz való szoros funkciók hozzáadásához.

Gombok

Többet tehet a gombokkal. Vezérlő gombállapotokat vagy gombcsoportokat hozhat létre több összetevőhöz, például eszköztárhoz.

Összeomlás

Szerezzen alapstílusokat és rugalmas támogatást az összecsukható alkatrészekhez, mint például a harmonika és a navigáció.

Körhinta

Hozzon létre egy vidám kört minden olyan tartalomból, amelyet interaktív diavetítéssel szeretne biztosítani.

Írja előre

Alapvető, könnyen bővíthető beépülő modul elegáns fejlécek gyors létrehozásához bármilyen formátumú szövegbevitellel.

Átmenetek *

Az egyszerű átmeneti effektusok érdekében használja egyszer a bootstrap-transition.js fájlt a modális becsúszáshoz vagy a figyelmeztetések elhalványulásához.

* A bővítmények animációjához szükséges

Fel a fejjel! Minden javascript beépülő modulhoz a jQuery legújabb verziója szükséges.

A modálisokról

Egy áramvonalas, de rugalmas, átveszi a hagyományos javascript modális beépülő modult, csak a minimálisan szükséges funkcionalitással és intelligens alapértelmezésekkel.

Fájl letöltése

Statikus példa

Az alábbiakban egy statikusan renderelt modális látható.

Élő demó

Váltson át egy modált javascripten keresztül az alábbi gombra kattintva. Lecsúszik, és elhalványul az oldal tetejétől.

Indítsa el a demo modált

Bootstrap-modal használata

Hívja a modált javascripten keresztül:

  1. $ ( '#myModal' ). modális ( opciók )

Lehetőségek

Név típus alapértelmezett leírás
háttér logikai érték igaz Modális háttérelemet tartalmaz. Alternatív megoldásként staticolyan hátteret adjon meg, amely nem zárja be a modált kattintásra.
billentyűzet logikai érték igaz Bezárja a modált az Escape billentyű lenyomásakor
előadás logikai érték igaz Megjeleníti a modált inicializáláskor.

Jelölés

Könnyedén aktiválhatja a modálokat az oldalon anélkül, hogy egyetlen soros javascriptet kellene írnia. Csak állítson data-toggle="modal"be egy vezérlőelemet a data-target="#foo"vagy href="#foo"a modális elem azonosítójának megfelelő vezérlőelemre, és ha rákattint, elindítja a modált.

Ezenkívül, ha opciókat szeretne hozzáadni a modális példányhoz, csak adja meg azokat további adatattribútumokként vagy a vezérlőelemen, vagy magán a modális jelölésen.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Modal indítása </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ális fejléc </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Egy szép test… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Bezárás </a>
  11. <a href = "#" class = "btn btn-primary" > Módosítások mentése </a>
  12. </div>
  13. </div>
Fel a fejjel! Ha azt szeretné, hogy a modál be- és kifelé animálódjon, csak adjon hozzá egy .fadeosztályt az .modalelemhez (lásd a bemutatót, hogy megtekinthesse ezt működés közben), és adja hozzá a bootstrap-transition.js-t.

Mód

.modal(opciók)

Aktiválja a tartalmat modálisként. Elfogad egy opcionális opciót object.

  1. $ ( '#myModal' ). modális ({
  2. billentyűzet : false
  3. })

.modal('toggle')

Manuálisan vált egy módot.

  1. $ ( '#myModal' ). modális ( 'toggle' )

.modal('show')

Manuálisan megnyit egy modált.

  1. $ ( '#myModal' ). modális ( 'show' )

.modal('hide')

Manuálisan elrejti a modált.

  1. $ ( '#myModal' ). modális ( 'elrejtés' )

Események

A Bootstrap modális osztálya felfed néhány eseményt a modális funkciókhoz való kapcsolódáshoz.

Esemény Leírás
előadás Ez az esemény azonnal aktiválódik a showpéldánymetódus meghívásakor.
Látható Ez az esemény akkor indul el, amikor a modális láthatóvá vált a felhasználó számára (megvárja, amíg a css áttérés befejeződik).
elrejt Ez az esemény azonnal elindul, amikor a hidepéldánymetódus meghívásra került.
rejtett Ez az esemény akkor indul el, amikor a modális elrejtése befejeződött a felhasználó elől (megvárja, amíg a css áttérés befejeződik).
  1. $ ( '#myModal' ). on ( 'hidden' , function () {
  2. // csinálj valamit…
  3. })

A ScrollSpy beépülő modul a navigációs célok automatikus frissítésére szolgál a görgetés pozíciója alapján.

Fájl letöltése

Példa navigációs sávra scrollspy-vel

Görgessen az alábbi területen, és nézze meg a navigációs frissítést. A legördülő alelemek is kiemelve lesznek. Próbáld ki!

@zsír

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi, mielőtt elfogytak volna. Tumblr farmtól asztalig kerékpárjogok bármi. Anim keffiyeh carles kardigán. Velit seitan mcsweeney fotófülkéje 3 wolf moon irure. Cosby pulóver lomo jean shorts, williamsburg kapucnis minim qui valószínűleg még nem hallott róluk et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tetovált accusamus, cred irony biodízel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa bajuszos gördeszka, zsíros fugiat velit vasvillás szakáll. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tetovált cosby pulóver food truck, mcsweeney quis nem freegan bakelit. Lo-fi wes anderson +1 sartorial. Carles nem esztétikai gyakorlat quis gentrify. Brooklyn adipisicing kézműves sör vice keytar deserunt.

egy

Occaecat commodo aliqua delectus. Fap kézműves sör deserunt gördeszka ea. Lomo kerékpárjogok adipisicing banh mi, velit ea sunt next level locavore egyetlen eredetű kávé magna veniamban. High life id bakelit, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minimális futártáska. Cred ex in, fenntartható delectus consectetur fanny pack iphone.

két

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 whatever delectus food truck. Sapiente szintetizátor id guessnda. Locavore sed helvetica klisé irónia, mennydörgő macskák, amiket valószínűleg még nem hallottál róluk consequat kapucnis gluténmentes lo-fi fap aliquip. Labore elit placeat, mielőtt elfogytak volna, Terry richardson proident villásreggeli nesciunt quis cosby pulóver pariatur keffiyeh ut helvetica artisan. Kardigán kézműves sör seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


A bootstrap-scrollspy.js használata

Hívja a scrollspy-t javascripten keresztül:

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

Jelölés

A scrollspy viselkedés egyszerű hozzáadásához a felső sáv navigációjához egyszerűen adja hozzá data-spy="scroll"azt az elemet, amely után kémkedni szeretne (leggyakrabban ez a törzs).

  1. <body data-spy = "scroll" > ... </body>
Fel a fejjel! A navigációs sáv hivatkozásainak feloldható azonosítócélokkal kell rendelkezniük. Például egy <a href="#home">home</a>kell megfelelnie valaminek a dom-ban, mint például <div id="home"></div>.

Mód

.scrollspy('refresh')

Ha a scrollspy-t a DOM-elemek hozzáadásával vagy eltávolításával együtt használja, meg kell hívnia a frissítési metódust, például:

  1. $ ( '[data-spy="scroll"]' ). mindegyik ( függvény () {
  2. var $spy = $ ( ez ). scrollspy ( 'frissítés' )
  3. });

Lehetőségek

Név típus alapértelmezett leírás
beszámítás szám 10 Felülről eltolandó képpontok a görgetés helyzetének kiszámításakor.

Események

Esemény Leírás
aktiválja Ez az esemény akkor indul el, amikor egy új elemet aktivál a scrollspy.

Ez a beépülő modul gyors, dinamikus lap- és pillérfunkciókat ad a helyi tartalom közötti átálláshoz.

Fájl letöltése

Példalapok

Kattintson az alábbi fülekre a rejtett panelek közötti váltáshoz, akár legördülő menük segítségével is.

Nyers farmer, valószínűleg még nem hallott róluk farmer rövidnadrág, Austin. Nesciunt tofu stumptown aliqua, retro szinti mestertisztítás. Bajusz klisé tempor, williamsburg carles vegán helvetica. Reprehenderit hentes retro keffiyeh Dreamcatcher szinti. Cosby pulóver eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis kardigán amerikai ruházat, hentes 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.


A bootstrap-tab.js használata

Lapozható lapok engedélyezése javascripten keresztül (minden lapot külön kell aktiválni):

  1. $ ( '#myTab a' ). kattintás ( függvény ( e ) {
  2. e . preventDefault ();
  3. $ ( ez ). lap ( 'megjelenítés' );
  4. })

Az egyes lapokat többféleképpen is aktiválhatja:

  1. $ ( '#myTab a[href="#profile"]' ). lap ( 'megjelenítés' ); // Lap kiválasztása név szerint
  2. $ ( '#myTab a:first' ). lap ( 'megjelenítés' ); // Válassza ki az első fület
  3. $ ( '#myTab a:last' ). lap ( 'megjelenítés' ); // Utolsó lap kiválasztása
  4. $ ( '#myTab li:eq(2) a' ). lap ( 'megjelenítés' ); // Harmadik lap kiválasztása (0-indexelt)

Jelölés

Aktiválhat egy lapot vagy tabletta navigációt anélkül, hogy JavaScriptet írna, egyszerűen megadva data-toggle="tab"vagy data-toggle="pill"egy elemen. Ha hozzáadja a navés nav-tabsosztályokat a laphoz ul, akkor a rendszerindító lapstílus érvényesül.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Főoldal </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Üzenetek </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Beállítások </a></li>
  6. </ul>

Mód

$().tab

Aktivál egy tabulátor elemet és tartalomtárolót. A lapon egy data-targetvagy egy tárolócsomópontot kell hrefcélozni a DOM-ban.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "aktív" ><a href = "#home" > Kezdőlap </a></li>
  3. <li><a href = "#profile" > Profil </a></li>
  4. <li><a href = "#messages" > Üzenetek </a></li>
  5. <li><a href = "#settings" > Beállítások </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 = "profil" > ... </div>
  11. <div class = "tab-pane" id = "üzenetek" > ... </div>
  12. <div class = "tab-pane" id = "beállítások" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( függvény () {
  17. $ ( '#myTab a:last' ). lap ( 'megjelenítés' );
  18. })
  19. </script>

Események

Esemény Leírás
előadás Ez az esemény a lap megjelenítésekor aktiválódik, de az új lap megjelenítése előtt. Használja a event.targetés event.relatedTargetaz aktív lapot, illetve az előző aktív lapot (ha elérhető) célozza meg.
Látható Ez az esemény lapmegjelenítéskor aktiválódik, miután egy lap megjelenik. Használja a event.targetés event.relatedTargetaz aktív lapot, illetve az előző aktív lapot (ha elérhető) célozza meg.
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'shown' , function ( e ) {
  2. e . cél // aktivált lap
  3. e . relatedTarget // előző lap
  4. })

Az eszköztippekről

A Jason Frame által írt kiváló jQuery.tipsy plugin ihlette; Az eszköztippek egy frissített verzió, amely nem támaszkodik képekre, css3-at használ az animációkhoz, és adatattribútumokat a helyi címtároláshoz.

Fájl letöltése

Példa az Eszköztippek használatára

Az eszköztippek megtekintéséhez vigye az egérmutatót az alábbi linkekre:

Szűk nadrág következő szintű keffiyeh valószínűleg még nem hallott róluk. Photo Booth szakáll nyers farmer magasnyomású vegán futártáska stumptown. A gazdaságtól az asztalig terjedő seitán, az mcsweeney fixie, fenntartható quinoa 8 bites amerikai ruházata frottír richardson vinyl chambray -vel rendelkezik . Beard stumptown, kardigánok banh mi lomo thundercats. Tofu biodízel williamsburg marfa, négy loko mcsweeney's cleanse vegán chambray. Egy igazán ironikus kézműves , akármilyen keytar , scenester farm-to-table banksy Austin twitter fogantyú freegan cred nyers farmer egyetlen eredetű kávévírus.


A bootstrap-tooltip.js használata

Az eszköztipp aktiválása javascripten keresztül:

  1. $ ( '#example' ). eszköztipp ( opciók )

Lehetőségek

Név típus alapértelmezett leírás
élénkség logikai érték igaz alkalmazzon css fade átmenetet az eszköztippre
elhelyezés string|függvény 'felül' hogyan kell elhelyezni az eszköztipet - top | alsó | balra | jobb
választó húr hamis Ha rendelkezésre áll választó, akkor az eszköztipp objektumok delegálásra kerülnek a megadott célokra.
cím húr | funkció '' alapértelmezett cím értéke, ha a "title" címke nincs jelen
ravaszt húr 'lebeg' hogyan aktiválódik az eszköztipp – hover | fókusz | kézikönyv
késleltetés szám | tárgy 0

az eszköztipp megjelenítésének és elrejtésének késleltetése (ms) - nem vonatkozik kézi indítótípusra

Ha megad egy számot, akkor a késleltetés mindkét elrejtésre/megjelenítésre vonatkozik

Az objektum szerkezete a következő:delay: { show: 500, hide: 100 }

Fel a fejjel! Az egyes eszköztippek beállításai adatattribútumok használatával is megadhatók.

Jelölés

Teljesítmény okokból a Tooltip és a Popover data-apis be van kapcsolva. Ha használni szeretné őket, csak adjon meg egy választó opciót.

  1. <a href = "#" rel = "tooltip" title = "első eszköztipp" > mutasson rám </a>

Mód

$(). tooltip(opciók)

Eszköztipp-kezelőt csatol egy elemgyűjteményhez.

.tooltip('show')

Megjeleníti egy elem elemleírását.

  1. $ ( '#elem' ). eszköztipp ( 'show' )

.tooltip('hide')

Elrejti az elem elemleírását.

  1. $ ( '#elem' ). eszköztipp ( 'elrejtés' )

.tooltip('toggle')

Bekapcsolja az elem elemleírását.

  1. $ ( '#elem' ). eszköztipp ( 'toggle' )

A popoverekről

Adjon hozzá kis tartalomfedvényeket, például az iPaden lévőket, bármely másodlagos információ tárolására szolgáló elemhez.

* Szükséges az eszköztipp csatolása

Fájl letöltése

Példa hover popoverre

Vigye az egérmutatót a gomb fölé a popover aktiválásához.


A bootstrap-popover.js használata

Popover engedélyezése javascripten keresztül:

  1. $ ( '#example' ). popover ( opciók )

Lehetőségek

Név típus alapértelmezett leírás
élénkség logikai érték igaz alkalmazzon css fade átmenetet az eszköztippre
elhelyezés string|függvény 'jobb' hogyan kell elhelyezni a popovert - top | alsó | balra | jobb
választó húr hamis ha van választó, akkor az eszköztipp objektumok delegálásra kerülnek a megadott célokra
ravaszt húr 'lebeg' hogyan aktiválódik az eszköztipp – hover | fókusz | kézikönyv
cím húr | funkció '' alapértelmezett címérték, ha a "title" attribútum nincs jelen
tartalom húr | funkció '' alapértelmezett tartalomérték, ha a "data-content" attribútum nincs jelen
késleltetés szám | tárgy 0

a felugró ablak megjelenítésének és elrejtésének késleltetése (ms) - nem vonatkozik a kézi indítótípusra

Ha megad egy számot, akkor a késleltetés mindkét elrejtésre/megjelenítésre vonatkozik

Az objektum szerkezete a következő:delay: { show: 500, hide: 100 }

Fel a fejjel! Az egyes felugró ablakok beállításai adatattribútumok használatával is megadhatók.

Jelölés

Teljesítmény okokból a Tooltip és a Popover data-apis be van kapcsolva. Ha használni szeretné őket, csak adjon meg egy választó opciót.

Mód

$().popover(options)

Inicializálja az elemgyűjtemény popovereit.

.popover('show')

Felfedi az elemek felbukkanását.

  1. $ ( '#elem' ). popover ( 'show' )

.popover('hide')

Elrejti az elemek felbukkanását.

  1. $ ( '#elem' ). popover ( 'elrejtés' )

.popover('toggle')

Bekapcsolja az elemek felbukkanását.

  1. $ ( '#elem' ). popover ( 'toggle' )

A riasztásokról

A riasztási beépülő modul egy apró osztály a riasztásokhoz való szoros funkciók hozzáadásához.

Letöltés

Példa figyelmeztetések

A riasztások beépülő modulja a normál figyelmeztető üzeneteken és a blokkoló üzeneteken működik.

Szent guacamole! A legjobb, ha megnézed magad, nem nézel ki túl jól.

Ajjaj! Hiba történt!

Változtasd meg ezt-azt, és próbáld újra. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Tedd meg ezt a műveletet Vagy csináld ezt


A bootstrap-alert.js használata

Figyelmeztetés elutasításának engedélyezése javascripten keresztül:

  1. $ ( ".alert" ). figyelmeztetés ()

Jelölés

Csak adja hozzá data-dismiss="alert"a bezárás gombot, hogy automatikusan riasztási bezárási funkciót adjon.

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

Mód

$().alert()

Az összes figyelmeztetést szoros funkcionalitással burkolja. Ha azt szeretné, hogy a figyelmeztetések bezárt állapotban megjelenjenek, győződjön meg arról, hogy a .fadeés .inosztály már alkalmazza őket.

.alert('close')

Bezár egy riasztást.

  1. $ ( ".alert" ). figyelmeztetés ( 'bezárás' )

Események

A Bootstrap riasztási osztálya felfed néhány eseményt a riasztási funkciókhoz való csatlakozáshoz.

Esemény Leírás
Bezárás Ez az esemény azonnal aktiválódik a closepéldánymetódus meghívásakor.
zárva Ez az esemény akkor indul el, amikor a riasztást lezárták (megvárja, amíg a css-átmenetek befejeződnek).
  1. $ ( '#my-alert' ). bind ( 'zárt' , function () {
  2. // csinálj valamit…
  3. })

Ról ről

Többet tehet a gombokkal. Vezérlő gombállapotokat vagy gombcsoportokat hozhat létre több összetevőhöz, például eszköztárhoz.

Fájl letöltése

Használati példák

Használja a gombok beépülő modulját az állapotokhoz és a kapcsolókhoz.

Állítólagos
Egyetlen kapcsoló
Jelölőnégyzet
Rádió

A bootstrap-button.js használata

Gombok engedélyezése javascripten keresztül:

  1. $ ( '.nav-tabs' ). gomb ()

Jelölés

Az adatattribútumok a gombbővítmény szerves részét képezik. Tekintse meg az alábbi példakódot a különböző jelöléstípusokhoz.

  1. <!-- Add data-toggle="button" a váltás aktiválásához egyetlen gombon -->
  2. <button class = "btn" data-toggle = "button" > Egyetlen kapcsoló </button>
  3.  
  4. <!-- Add data-toggle="buttons-checkbox" a jelölőnégyzet stílusának váltásához a btn-groupnál -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Bal </button>
  7. <button class = "btn" > Középső </button>
  8. <button class = "btn" > Jobb </button>
  9. </div>
  10.  
  11. <!-- Add data-toggle="buttons-radio" a rádióstílus váltásához a btn-groupnál -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Bal </button>
  14. <button class = "btn" > Középső </button>
  15. <button class = "btn" > Jobb </button>
  16. </div>

Mód

$().button('toggle')

Bekapcsolja a push állapotot. Azt a látszatot kölcsönzi a gombnak, mintha aktiválva lett volna.

Fel a fejjel! Az data-toggleattribútum használatával engedélyezheti a gombok automatikus váltását.
  1. <button class = "btn" data-toggle = "button" > </button>

$().button('betöltés')

A gomb állapotát betöltésre állítja – letiltja a gombot, és a szöveget szöveg betöltésére cseréli. A betöltési szöveget a gombelemen kell megadni a data attribútum segítségével data-loading-text.

  1. <button class = "btn" data-loading-text = "cuccok betöltése..." > ... </button>
Fel a fejjel! A Firefox az oldalbetöltések során a letiltott állapotot fenntartja . Ennek megoldása a autocomplete="off".

$().button('reset')

Visszaállítja a gomb állapotát – a szöveget eredeti szövegre cseréli.

$().button(karakterlánc)

Visszaállítja a gomb állapotát – a szöveget bármely adatban meghatározott szövegállapotra cseréli.

  1. <button class = "btn" data-complete-text = "kész!" > ... </button>
  2. <script>
  3. $ ( '.btn' ). gomb ( 'teljes' )
  4. </script>

Ról ről

Szerezzen alapstílusokat és rugalmas támogatást az összecsukható alkatrészekhez, mint például a harmonika és a navigáció.

Fájl letöltése

* A Transitions beépülő modul belefoglalása szükséges.

Példa harmonika

Az összecsukás plugin segítségével egy egyszerű harmonika stílusú widgetet építettünk:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson és tintahal. 3 wolf moon officia aute, non cupidatat gördeszka dolor villásreggeli. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it tintahal egyeredetű kávé nulla guessnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegán kivételes hentes vice lomo. Leggings occaecat kézműves sör farmtól asztalig, nyers farmer esztétikus szintetizátor, valószínűleg még nem hallott róluk accusamus labore fenntartható VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson és tintahal. 3 wolf moon officia aute, non cupidatat gördeszka dolor villásreggeli. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it tintahal egyeredetű kávé nulla guessnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegán kivételes hentes vice lomo. Leggings occaecat kézműves sör farmtól asztalig, nyers farmer esztétikus szintetizátor, valószínűleg még nem hallott róluk accusamus labore fenntartható VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson és tintahal. 3 wolf moon officia aute, non cupidatat gördeszka dolor villásreggeli. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it tintahal egyeredetű kávé nulla guessnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegán kivételes hentes vice lomo. Leggings occaecat kézműves sör farmtól asztalig, nyers farmer esztétikus szintetizátor, valószínűleg még nem hallott róluk accusamus labore fenntartható VHS.

A bootstrap-collapse.js használata

Engedélyezés javascripten keresztül:

  1. $ ( ".collapse" ). összeomlik ()

Lehetőségek

Név típus alapértelmezett leírás
szülő választó hamis Ha kiválasztja, akkor a megadott szülő alatti összes összecsukható elem bezárul, amikor ez az összecsukható elem megjelenik. (hasonlóan a hagyományos harmonika viselkedéshez)
kapcsolót logikai érték igaz Bekapcsolja az összecsukható elemet híváskor

Jelölés

Csak adjon hozzá data-toggle="collapse"és egy data-targetelemet az összecsukható elem vezérléséhez. Az data-targetattribútum elfogad egy css-választót az összecsukás alkalmazásához. Feltétlenül adja hozzá az osztályt collapseaz összecsukható elemhez. Ha azt szeretné, hogy alapértelmezetten megnyíljon, adja hozzá a további osztályt in.

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. egyszerű összecsukható
  3. </button>
  4.  
  5. <div id = "demo" class = "összecsukása" > </div>
Fel a fejjel! Ha harmonikaszerű csoportkezelést szeretne hozzáadni egy összecsukható vezérlőhöz, adja hozzá a data attribútumot data-parent="#selector". Tekintse meg a bemutatót, hogy megtekinthesse ezt működés közben.

Mód

.collapse(options)

A tartalmat összecsukható elemként aktiválja. Elfogad egy opcionális opciót object.

  1. $ ( '#myCollapsible' ). összecsukása ({
  2. toggle : false
  3. })

.collapse('toggle')

Az összecsukható elemet megjelenített vagy rejtett állapotba kapcsolja.

.collapse('show')

Összecsukható elemet jelenít meg.

.collapse('hide')

Elrejti az összecsukható elemet.

Események

A Bootstrap összecsukási osztálya felfed néhány eseményt az összecsukási funkcióhoz való kapcsolódáshoz.

Esemény Leírás
előadás Ez az esemény azonnal aktiválódik a showpéldánymetódus meghívásakor.
Látható Ez az esemény akkor indul el, amikor egy összecsukott elem láthatóvá lett a felhasználó számára (megvárja, amíg a css áttérés befejeződik).
elrejt Ez az esemény azonnal aktiválódik, amikor a hidemetódus meghívásra került.
rejtett Ez az esemény akkor aktiválódik, amikor egy összecsukott elemet elrejtettek a felhasználó elől (megvárja, amíg a css áttérés befejeződik).
  1. $ ( '#myCollapsible' ). on ( 'hidden' , function () {
  2. // csinálj valamit…
  3. })

Ról ről

Alapvető, könnyen bővíthető beépülő modul elegáns fejlécek gyors létrehozásához bármilyen formátumú szövegbevitellel.

Fájl letöltése

Példa

Kezdje el a gépelést az alábbi mezőbe, hogy megjelenjen a gépelési eredmények.


A bootstrap-typeahead.js használata

Hívja meg a typeaheadet javascripten keresztül:

  1. $ ( '.typeahead' ). előre gépelve ()

Lehetőségek

Név típus alapértelmezett leírás
forrás sor [ ] A lekérdezendő adatforrás.
tételeket szám 8 A legördülő menüben megjeleníthető elemek maximális száma.
matcher funkció kis- és nagybetű nem érzékeny A módszer annak meghatározására, hogy egy lekérdezés megfelel-e egy elemnek. Egyetlen argumentumot fogad el, itemamellyel szemben tesztelni kell a lekérdezést. Nyissa meg az aktuális lekérdezést a segítségével this.query. Boolean értéket ad vissza, trueha a lekérdezés egyezik.
válogató funkció pontos egyezés, kis- és nagybetűk
megkülönböztetése, kis- és
nagybetűk megkülönböztetése
Az automatikus kiegészítés eredményeinek rendezésére használt módszer. Egyetlen argumentumot fogad el, itemsés rendelkezik a typeahead példány hatókörével. Hivatkozzon az aktuális lekérdezésre a segítségével this.query.
kiemelő funkció kiemeli az összes alapértelmezett egyezést Az automatikus kiegészítés eredményeinek kiemelésére használt módszer. Egyetlen argumentumot fogad el, itemés rendelkezik a typeahead példány hatókörével. html-t kell visszaadnia.

Jelölés

Adjon hozzá adatattribútumokat, hogy regisztráljon egy elemet betűfejes funkcióval.

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

Mód

.typeahead(options)

Inicializálja a bemenetet egy előírással.