JavaScript
Keltse életre a Bootstrap összetevőit több mint egy tucat egyéni jQuery bővítménnyel. Könnyen beillesztheti mindegyiket vagy egyenként.
Keltse életre a Bootstrap összetevőit több mint egy tucat egyéni jQuery bővítménnyel. Könnyen beillesztheti mindegyiket vagy egyenként.
A beépülő modulok beépíthetők egyenként (a Bootstrap egyes *.js
fájljaival), vagy egyszerre (a bootstrap.js
vagy a kicsinyített fájl használatával bootstrap.min.js
).
Mindkettő bootstrap.js
és bootstrap.min.js
az összes beépülő modult egyetlen fájlban tartalmazza. Csak egyet tartalmazzon.
Egyes bővítmények és CSS-összetevők más beépülő moduloktól függenek. Ha a beépülő modulokat külön-külön is felveszi, feltétlenül ellenőrizze ezeket a függőségeket a dokumentumokban. Vegye figyelembe azt is, hogy minden beépülő modul a jQuery-től függ (ez azt jelenti, hogy a jQuery-t a beépülő modulok fájlok előtt kell tartalmaznia ). Forduljon hozzánkbower.json
, hogy megtudja, mely jQuery verziók támogatottak.
Az összes Bootstrap beépülő modult kizárólag a jelölő API-n keresztül használhatja anélkül, hogy egyetlen sornyi JavaScriptet is írna. Ez a Bootstrap első osztályú API-ja, és a beépülő modul használatakor ez az első szempont.
Ennek ellenére bizonyos helyzetekben kívánatos lehet ezt a funkciót kikapcsolni. Ezért lehetőséget biztosítunk az adatattribútum API letiltására is úgy, hogy megszüntetjük a névterű dokumentum összes eseményét data-api
. Ez így néz ki:
Alternatív megoldásként egy adott beépülő modul megcélzásához egyszerűen adja meg a beépülő modul nevét névtérként a data-api névtér mellett, így:
Ne használjon több beépülő modul adatattribútumait ugyanazon az elemen. Például egy gombnak nem lehet egyszerre eszköztippje és nem válthat módot. Ennek eléréséhez használjon csomagolóelemet.
Úgy gondoljuk, hogy az összes Bootstrap beépülő modult tisztán a JavaScript API-n keresztül használhatja. Minden nyilvános API egyetlen, láncolható metódus, és visszaadja a gyűjteményt.
Minden metódusnak el kell fogadnia egy opcionális opciós objektumot, egy karakterláncot, amely egy adott metódust céloz, vagy semmit (amely alapértelmezett viselkedésű beépülő modult indít):
Minden beépülő modul a nyers konstruktorát is megjeleníti egy Constructor
tulajdonságon: $.fn.popover.Constructor
. Ha egy adott bővítménypéldányt szeretne lekérni, kérje le közvetlenül egy elemből: $('[rel="popover"]').data('popover')
.
A beépülő modul alapértelmezett beállításait módosíthatja a bővítmény Constructor.DEFAULTS
objektumának módosításával:
Néha szükséges a Bootstrap beépülő modulok használata más UI keretrendszerekkel. Ilyen körülmények között időnként előfordulhatnak névtér-ütközések. Ha ez megtörténik, hívhatja azt .noConflict
a beépülő modult, amelynek az értékét vissza szeretné állítani.
A Bootstrap egyéni eseményeket biztosít a legtöbb plugin egyedi műveletéhez. Általában ezek főnévi igenév és múlttag alakban fordulnak elő – ahol az infinitivus (pl. show
) egy esemény elején, múltbeli igenév alakja (pl. shown
) pedig egy cselekvés befejezésekor aktiválódik.
A 3.0.0-s verziótól kezdve minden Bootstrap esemény névtérben van.
Minden infinitiv esemény preventDefault
funkcionalitást biztosít. Ez lehetővé teszi egy művelet végrehajtásának leállítását, mielőtt az elindulna.
VERSION
A Bootstrap jQuery beépülő moduljainak verziója a beépülő modul konstruktorának tulajdonságán keresztül érhető el . Például az eszköztipp beépülő modulhoz:
A Bootstrap beépülő moduljai nem esnek vissza különösen kecsesen, ha a JavaScript le van tiltva. Ha ebben az esetben érdekli a felhasználói élmény, használja <noscript>
a helyzet elmagyarázásához (és a JavaScript újraengedélyezéséhez) a felhasználóknak, és/vagy adja hozzá saját egyéni tartalékait.
A Bootstrap hivatalosan nem támogatja a harmadik fél JavaScript-könyvtárait , mint például a Prototype vagy a jQuery UI. A .noConflict
névteres események ellenére előfordulhatnak kompatibilitási problémák, amelyeket egyedül kell megoldania.
Az egyszerű átmeneti effektusok érdekében transition.js
egyszer szerepeljen a többi JS-fájl mellett. Ha a lefordított (vagy kicsinyített) fájlt használod bootstrap.js
, akkor ezt nem kell belefoglalnod – már ott van.
A Transition.js egy alapvető segédeszköz az transitionEnd
eseményekhez, valamint egy CSS átmeneti emulátor. A többi beépülő modul a CSS átmenet támogatásának ellenőrzésére és a függő átmenetek elkapására használja.
Az átmenetek globálisan letilthatók a következő JavaScript-kódrészlet használatával, amelynek a betöltés után kell megjelennie transition.js
(vagy bootstrap.js
, bootstrap.min.js
az esettől függően):
A modálok egyszerűsített, de rugalmas párbeszédpanelek a minimálisan szükséges funkcionalitással és intelligens alapértelmezésekkel.
Ügyeljen arra, hogy ne nyisson ki egy modált, amíg egy másik látható. Egynél több modális megjelenítéséhez egyéni kód szükséges.
Mindig próbálja a modál HTML-kódját a dokumentum legfelső pozíciójában elhelyezni, hogy elkerülje, hogy más összetevők befolyásolják a modál megjelenését és/vagy működését.
Vannak bizonyos figyelmeztetések a modálisok mobileszközökön történő használatával kapcsolatban. A részletekért tekintse meg a böngésző támogatási dokumentumait .
A HTML5 szemantikája meghatározása miatt a autofocus
HTML attribútumnak nincs hatása a Bootstrap modálisra. Ugyanezen hatás eléréséhez használjon néhány egyéni JavaScriptet:
Renderelt modális fejléccel, törzstel és a láblécben található műveletek halmazával.
Az alábbi gombra kattintva válthat át egy modált JavaScript segítségével. Lecsúszik, és elhalványul az oldal tetejétől.
Ügyeljen arra, hogy a modális címre hivatkozva adja hozzá a role="dialog"
és -t a , és önmagához.aria-labelledby="..."
.modal
role="document"
.modal-dialog
Ezenkívül megadhatja a modális párbeszédpanel leírását a aria-describedby
on .modal
.
A YouTube-videók modálisba ágyazásához további JavaScriptre van szükség, nem a Bootstrapban a lejátszás automatikus leállításához és még sok máshoz. További információért tekintse meg ezt a hasznos Stack Overflow bejegyzést .
A modáloknak két választható mérete van, amelyek módosító osztályokon keresztül érhetők el, amelyeket egy .modal-dialog
.
Az olyan modálisok esetében, amelyek egyszerűen megjelennek, nem pedig elhalványulnak, távolítsa el az .fade
osztályt a modális jelölésből.
A Bootstrap rácsrendszer előnyeinek kihasználásához egy modálison belül csak helyezze .row
be az s -t a .modal-body
rendszerbe, majd használja a normál grid rendszerosztályokat.
Van egy csomó gombja, amelyek mindegyike ugyanazt a módot indítja el, csak kissé eltérő tartalommal? Használja a event.relatedTarget
és HTML - data-*
attribútumokat (esetleg a jQuery segítségével ) a modál tartalmának megváltoztatásához attól függően, hogy melyik gombra kattintott. Tekintse meg a Modal Events dokumentumait a részletekért relatedTarget
,
A modális beépülő modul igény szerint átkapcsolja a rejtett tartalmat adatattribútumok vagy JavaScript segítségével. Ezenkívül hozzáadja .modal-open
az <body>
alapértelmezett görgetési viselkedés felülbírálásához, és létrehoz .modal-backdrop
egy kattintási területet a megjelenített modálok elvetéséhez, ha a modálison kívül kattintanak.
Aktiválja a modált JavaScript írása nélkül. Állítsa data-toggle="modal"
be a vezérlőelemet, például egy gombot, a data-target="#foo"
vagy a gombbal együtt, href="#foo"
hogy egy adott módot célozzon a váltáshoz.
Hívjon egy modált azonosítóval myModal
egyetlen soros JavaScripttel:
Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-
következőhöz: data-backdrop=""
.
Név | típus | alapértelmezett | leírás |
---|---|---|---|
háttér | logikai érték vagy a karakterlánc'static' |
igaz | Modális háttérelemet tartalmaz. Alternatív megoldásként static olyan 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ű megnyomásakor |
előadás | logikai érték | igaz | Megjeleníti a modált inicializáláskor. |
távoli | pálya | hamis | Ez a lehetőség a v3.3.0 óta elavult, és a 4-es verzióban eltávolították. Javasoljuk, hogy ehelyett használjon ügyféloldali sablont vagy adat-összerendelési keretrendszert, vagy maga hívja meg a jQuery.load fájlt . Ha távoli URL-címet ad meg, a tartalom egyszer betöltődik a jQuery |
.modal(options)
Aktiválja a tartalmat modálisként. Elfogad egy opcionális opciót object
.
.modal('toggle')
Manuálisan vált egy módot. Visszatér a hívóhoz, mielőtt a modális ténylegesen megjelenne vagy elrejtve (azaz a shown.bs.modal
vagy hidden.bs.modal
esemény bekövetkezte előtt).
.modal('show')
Manuálisan megnyit egy modált. Visszatér a hívóhoz, mielőtt a modális ténylegesen megjelenne (azaz az shown.bs.modal
esemény bekövetkezte előtt).
.modal('hide')
Manuálisan elrejti a modált. Visszatér a hívóhoz, mielőtt a modális ténylegesen el lett volna rejtve (azaz az hidden.bs.modal
esemény bekövetkezte előtt).
.modal('handleUpdate')
Újra beállítja a modális helyzetét, hogy ellensúlyozza a görgetősávot, ha megjelenne, amitől a modális balra ugrik.
Csak akkor szükséges, ha a modális magassága nyitva van.
A Bootstrap modális osztálya felfed néhány eseményt a modális funkciókhoz való kapcsolódáshoz.
Minden modális esemény magára a modálisra (azaz a <div class="modal">
)-ra kerül.
Esemény típus | Leírás |
---|---|
show.bs.modal | Ez az esemény azonnal aktiválódik a show példánymetódus meghívásakor. Ha kattintás okozza, a kattintott elem relatedTarget az esemény tulajdonságaként elérhető. |
látható.bs.modal | 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-átmenetek befejeződnek). Ha kattintás okozza, a kattintott elem relatedTarget az esemény tulajdonságaként elérhető. |
elrejteni.bs.modal | Ez az esemény azonnal elindul, amikor a hide példánymetódus meghívásra került. |
rejtett.bs.modal | Ez az esemény akkor indul el, amikor a modális elrejtése befejeződött a felhasználó elől (megvárja a CSS-átmenetek befejezését). |
loaded.bs.modal | remote Ez az esemény akkor aktiválódik, amikor a modális az opció használatával tartalmat töltött be . |
Ezzel az egyszerű bővítménnyel szinte bármihez hozzáadhat legördülő menüket, beleértve a navigációs sávot, a lapokat és a tablettákat.
Adatattribútumokon vagy JavaScripten keresztül a legördülő beépülő modul átkapcsolja a rejtett tartalmat (legördülő menük) az .open
osztály átváltásával a szülőlistaelemen.
Mobileszközökön a legördülő menü megnyitása egy .dropdown-backdrop
koppintási területet ad hozzá a legördülő menük bezárásához, amikor a menün kívül koppint, ami a megfelelő iOS-támogatás feltétele. Ez azt jelenti, hogy a nyitott legördülő menüről egy másik legördülő menüre váltáshoz extra koppintás szükséges a mobilon.
Megjegyzés: Az data-toggle="dropdown"
attribútumra támaszkodik a legördülő menük alkalmazásszintű bezárásához, ezért célszerű mindig használni.
Hozzáadás data-toggle="dropdown"
hivatkozáshoz vagy gombhoz a legördülő menü váltásához.
Ha az URL-eket érintetlenül szeretné megőrizni a linkgombokkal, használja az data-target
attribútumot a helyett href="#"
.
A legördülő menük meghívása JavaScripten keresztül:
data-toggle="dropdown"
továbbra is szükségesFüggetlenül attól, hogy JavaScript-en keresztül hívja-e meg a legördülő menüt, vagy inkább a data-api-t használja, data-toggle="dropdown"
mindig jelen kell lennie a legördülő menü trigger elemén.
Egyik sem
$().dropdown('toggle')
Bekapcsolja az adott navigációs sáv vagy lapos navigáció legördülő menüjét.
Minden legördülő esemény a .dropdown-menu
szülőelemnél aktiválódik.
Minden legördülő eseménynek van egy relatedTarget
tulajdonsága, amelynek értéke a kapcsoló horgonyelem.
Esemény típus | Leírás |
---|---|
show.bs.legördülő menü | Ez az esemény azonnal aktiválódik, amikor a show példány metódus meghívódik. |
megjelenített.bs.legördülő menü | Ez az esemény akkor aktiválódik, amikor a legördülő menü láthatóvá vált a felhasználó számára (megvárja a CSS-átmenetek befejezését). |
hide.bs.legördülő menü | Ez az esemény azonnal aktiválódik, amikor a példány elrejtése metódus meghívásra került. |
rejtett.bs.legördülő menü | Ez az esemény akkor aktiválódik, amikor a legördülő menü elrejtése befejeződött a felhasználó elől (megvárja a CSS-átmenetek befejezését). |
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. Görgessen a navigációs sáv alatti területen, és figyelje az aktív osztály változását. A legördülő alelemek is kiemelve lesznek.
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 rövidnadrág, williamsburg kapucnis pulóver, minim qui valószínűleg még nem hallottál róluk és kardigán vagyonkezelői alap culpa biodízel wes anderson aesthetic. Nihil tetovált accusamus, cred irony biodízel keffiyeh artisan ullamco consequat.
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.
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.
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.
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 navigációs sáv hivatkozásainak feloldható azonosítócélokkal kell rendelkezniük. Például egy <a href="#home">home</a>
meg kell felelnie valaminek a DOM-ban, például <div id="home"></div>
.
:visible
cél elemek figyelmen kívül hagyvaA nem :visible
jQuery szerinti célelemek figyelmen kívül maradnak, és a hozzájuk tartozó navigációs elemek soha nem lesznek kiemelve.
A megvalósítási módtól függetlenül a scrollspy használatához szükséges a position: relative;
kémkedni kívánt elem használata. A legtöbb esetben ez a <body>
. Amikor a -tól eltérő elemeket görget <body>
, ügyeljen arra, hogy legyen height
beállítva és overflow-y: scroll;
alkalmazva.
A scrollspy viselkedés egyszerű hozzáadásához a felső sáv navigációjához adja hozzá data-spy="scroll"
azt az elemet, amely után kémkedni szeretne (leggyakrabban ez a <body>
). Ezután adja hozzá az attribútumot bármely Bootstrap összetevő data-target
szülőelemének azonosítójával vagy osztályával ..nav
Miután hozzáadta position: relative;
a CSS-t, hívja meg a scrollspy-t JavaScripten keresztül:
.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:
Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-
következőhöz: data-offset=""
.
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ény típus | Leírás |
---|---|
activate.bs.scrollspy | Ez az esemény akkor indul el, amikor egy új elemet aktivál a scrollspy. |
Adjon hozzá gyors, dinamikus lapfunkciókat a helyi tartalom paneljei közötti váltáshoz, akár legördülő menük segítségével is. A beágyazott lapok nem támogatottak.
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.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Ez a beépülő modul kiterjeszti a füles navigációs összetevőt lapozható területek hozzáadásához.
Lapozható lapok engedélyezése JavaScript segítségével (minden lapot külön kell aktiválni):
Az egyes lapokat többféleképpen is aktiválhatja:
Aktiválhat egy fület 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-tabs
osztályokat a laphoz ul
, akkor a Bootstrap lapstílus érvényesül , míg a nav
és nav-pills
osztályok hozzáadásával a tabletta stílust alkalmazza .
A lapok elhalványulásához adja hozzá .fade
mindegyikhez a .tab-pane
. Az első lappanelnek is .in
láthatóvá kell tennie a kezdeti tartalmat.
$().tab
Aktivál egy tabulátor elemet és tartalomtárolót. A lapon egy data-target
vagy egy tárolócsomópontot kell href
célozni a DOM-ban. A fenti példákban a tabulátorok az attribútumokkal <a>
rendelkező s-ek .data-toggle="tab"
.tab('show')
Kiválasztja az adott lapot, és megjeleníti a hozzá tartozó tartalmat. Minden más korábban kiválasztott lap kijelölése megszűnik, és a hozzá tartozó tartalom elrejtésre kerül. Visszatér a hívóhoz, mielőtt a lappanel ténylegesen megjelenne (azaz az shown.bs.tab
esemény bekövetkezte előtt).
Új lap megjelenítésekor az események a következő sorrendben aktiválódnak:
hide.bs.tab
(az aktuális aktív lapon)show.bs.tab
(a megjelenítendő lapon)hidden.bs.tab
(az előző aktív lapon ugyanaz, mint az hide.bs.tab
eseménynél)shown.bs.tab
(az újonnan aktív, most megjelenő lapon ugyanaz, mint az show.bs.tab
eseménynél)Ha még nem volt aktív lap, akkor a hide.bs.tab
és hidden.bs.tab
események nem aktiválódnak.
Esemény típus | Leírás |
---|---|
show.bs.tab | 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.relatedTarget az aktív lapot, illetve az előző aktív lapot (ha elérhető) célozza meg. |
show.bs.tab | Ez az esemény lapmegjelenítéskor aktiválódik, miután egy lap megjelenik. Használja a event.target és event.relatedTarget az aktív lapot, illetve az előző aktív lapot (ha elérhető) célozza meg. |
hide.bs.tab | Ez az esemény akkor aktiválódik, amikor új lapot kell megjeleníteni (és így az előző aktív lapot el kell rejteni). Használja a event.target és event.relatedTarget az aktuális aktív lapot, illetve a hamarosan aktívvá váló új lapot. |
rejtett.bs.tab | Ez az esemény egy új lap megjelenítése után aktiválódik (és így az előző aktív lap el van rejtve). Használja a event.target és event.relatedTarget az előző aktív lapot, illetve az új aktív lapot. |
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.
A nulla hosszúságú címekkel rendelkező eszköztippek soha nem jelennek meg.
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.
Négy lehetőség áll rendelkezésre: felül, jobb, alsó és balra igazítva.
Teljesítmény okokból a Tooltip és a Popover data-apis engedélyezett, vagyis Önnek kell inicializálnia őket .
data-toggle
Az oldalon lévő összes eszköztipp inicializálásának egyik módja az lenne, ha attribútumuk alapján választaná ki őket :
Az eszköztipp beépülő modul igény szerint hoz létre tartalmat és jelöléseket, és alapértelmezés szerint az eszköztippeket a triggerelem után helyezi el.
Az elemleírás aktiválása JavaScripten keresztül:
Az eszköztipphez szükséges jelölés csak egy data
attribútum, és title
azon a HTML-elemen, amelyen elemleírást szeretne kapni. Az eszköztippek generált jelölése meglehetősen egyszerű, bár megköveteli a pozíciót (alapértelmezés top
szerint a bővítmény állítja be).
Néha olyan elemleírást szeretne hozzáadni egy hiperhivatkozáshoz, amely több sort burkol. Az eszköztipp beépülő modul alapértelmezett viselkedése az, hogy vízszintesen és függőlegesen középre állítja. Ennek elkerülése érdekében adjon hozzá white-space: nowrap;
a horgonyokhoz.
Ha eszköztippeket használ a vagy a -n belüli elemeken .btn-group
, .input-group
vagy a táblázathoz kapcsolódó elemeken ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), meg kell adnia a lehetőséget container: 'body'
(lásd alább), hogy elkerülje a nem kívánt mellékhatásokat (például az elem szélesedését és/ vagy elveszíti lekerekített sarkait az eszköztipp aktiválásakor).
A billentyűzettel navigáló felhasználók és különösen a kisegítő technológiák felhasználói csak a billentyűzetre fókuszálható elemekhez, például hivatkozásokhoz, űrlapvezérlőkhöz vagy tetszőleges tabindex="0"
attribútumokkal rendelkező elemekhez adhatnak eszköztippeket.
Ha elemleírást szeretne hozzáadni egy disabled
vagy .disabled
elemhez, helyezze az elemet a elembe, <div>
és alkalmazza az elemleírást arra <div>
.
Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-
következőhöz: data-animation=""
.
Név | típus | Alapértelmezett | Leírás |
---|---|---|---|
élénkség | logikai érték | igaz | Alkalmazzon CSS áttűnést az eszköztippre |
tartály | húr | hamis | hamis | Hozzáfűzi az elemleírást egy adott elemhez. Példa: |
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ő: |
html | logikai érték | hamis | Illessze be a HTML-kódot az eszköztippbe. Ha hamis, akkor a jQuery text metódusát fogja használni a tartalom beszúrására a DOM-ba. Használjon szöveget, ha aggódik az XSS-támadások miatt. |
elhelyezés | húr | funkció | 'felül' | Az eszköztipp elhelyezése - felső | alsó | balra | jobbra | auto. Amikor egy függvényt használunk az elhelyezés meghatározására, akkor az első argumentumként az eszköztipp DOM-csomópontja, a második argumentuma pedig a kiváltó elem DOM-csomópontja kerül meghívásra. A |
választó | húr | hamis | Ha rendelkezésre áll választó, az eszköztipp objektumok delegálásra kerülnek a megadott célokra. A gyakorlatban ezt arra használják, hogy a dinamikus HTML-tartalomhoz eszköztippeket adjon hozzá. Lásd ezt és egy tájékoztató példát . |
sablon | húr | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Az elemleírás létrehozásakor használandó alap HTML. Az eszköztippeket a
A legkülső burkolóelemnek az |
cím | húr | funkció | '' | Alapértelmezett címérték, ha Ha adott egy függvény, akkor a program úgy hívja meg, hogy a |
ravaszt | húr | "lebegő fókusz" | Az eszköztipp aktiválása – kattintson a | lebeg | fókusz | kézikönyv. Több triggert is átadhat; szóközzel válassza el őket. manual nem kombinálható semmilyen más triggerrel. |
nézetablak | húr | tárgy | funkció | { választó: 'test', padding: 0 } | Az elemleírást az elem határain belül tartja. Példa: Ha egy függvény adott, akkor az egyetlen argumentumként a DOM node kiváltó elemmel kerül meghívásra. A |
Az egyes eszköztippek beállításai adatattribútumok használatával is megadhatók, a fentebb leírtak szerint.
$().tooltip(options)
Eszköztipp-kezelőt csatol egy elemgyűjteményhez.
.tooltip('show')
Megjeleníti egy elem elemleírását. Visszatér a hívóhoz, mielőtt az eszköztipp ténylegesen megjelenne (azaz az shown.bs.tooltip
esemény bekövetkezte előtt). Ez az eszköztipp "kézi" aktiválásának tekinthető. A nulla hosszúságú címekkel rendelkező eszköztippek soha nem jelennek meg.
.tooltip('hide')
Elrejti az elem elemleírását. Visszatér a hívóhoz, mielőtt az eszköztipp ténylegesen el lett volna rejtve (azaz az hidden.bs.tooltip
esemény bekövetkezte előtt). Ez az eszköztipp "kézi" aktiválásának tekinthető.
.tooltip('toggle')
Bekapcsolja az elem elemleírását. Visszatér a hívóhoz, mielőtt az eszköztipp ténylegesen megjelent vagy elrejtett volna (azaz a shown.bs.tooltip
vagy hidden.bs.tooltip
esemény bekövetkezte előtt). Ez az eszköztipp "kézi" aktiválásának tekinthető.
.tooltip('destroy')
Elrejti és megsemmisíti egy elem elemleírását. A delegálást használó eszköztippek (amelyek a selector
beállítással jönnek létre ) nem semmisíthetők meg egyenként a leszármazott triggerelemeken.
Esemény típus | Leírás |
---|---|
show.bs.tooltip | Ez az esemény azonnal aktiválódik a show példánymetódus meghívásakor. |
látható.bs.eszközleírás | Ez az esemény akkor aktiválódik, amikor az eszköztipp láthatóvá vált a felhasználó számára (megvárja, amíg a CSS-átmenetek befejeződnek). |
elrejteni.bs.eszköztipp | Ez az esemény azonnal elindul, amikor a hide példánymetódus meghívásra került. |
rejtett.bs.eszközleírás | Ez az esemény akkor aktiválódik, amikor az eszköztipp el lett rejtve a felhasználó elől (megvárja a CSS-átmenetek befejezését). |
beszúrva.bs.eszközleírás | Ez az esemény az show.bs.tooltip esemény után indul el, amikor az eszköztipp-sablont hozzáadták a DOM-hoz. |
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.
A nulla hosszúságú felugró ablakok soha nem jelennek meg.
A felbukkanáshoz az eszköztipp bővítménynek szerepelnie kell a Bootstrap verziójában.
Teljesítmény okokból a Tooltip és a Popover data-apis engedélyezett, vagyis Önnek kell inicializálnia őket .
data-toggle
Az oldal összes felugró ablakának inicializálásának egyik módja az lenne, ha attribútumuk alapján választaná ki őket :
.btn-group
Ha felugró ablakokat használ az a vagy an belüli elemeken .input-group
, vagy a táblázathoz kapcsolódó elemeken ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), meg kell adnia a lehetőséget container: 'body'
(lásd alább), hogy elkerülje a nem kívánt mellékhatásokat (például az elem szélesedését és/ vagy elveszíti lekerekített sarkait, amikor a popover aktiválódik).
Ha felugró ablakot szeretne hozzáadni egy disabled
vagy .disabled
elemhez, helyezze az elemet a elembe, <div>
és alkalmazza a popovert arra <div>
.
Néha szeretne felugró ablakot hozzáadni egy több sort burkoló hivatkozáshoz. A popover beépülő modul alapértelmezett viselkedése az, hogy vízszintesen és függőlegesen középre helyezi. Ennek elkerülése érdekében adjon hozzá white-space: nowrap;
a horgonyokhoz.
Négy lehetőség áll rendelkezésre: felül, jobb, alsó és balra igazítva.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Az focus
eseményindító segítségével elvetheti a felugró ablakokat a felhasználó következő kattintásakor.
A megfelelő, több böngésző és platform közötti viselkedés érdekében a címkét kell használnia <a>
, nem a <button>
címkét, és meg kell adnia a role="button"
és tabindex
attribútumokat is.
Előugró ablakok engedélyezése JavaScripten keresztül:
Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-
következőhöz: data-animation=""
.
Név | típus | Alapértelmezett | Leírás |
---|---|---|---|
élénkség | logikai érték | igaz | Alkalmazzon CSS-eltolási átmenetet az előugró ablakra |
tartály | húr | hamis | hamis | Egy adott elemhez fűzi az előugró ablakot. Példa: |
tartalom | húr | funkció | '' | Alapértelmezett tartalomérték, ha Ha adott egy függvény, akkor az úgy lesz meghívva, hogy a |
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ő: |
html | logikai érték | hamis | Szúrjon be HTML-t a felugró ablakba. Ha hamis, akkor a jQuery text metódusát fogja használni a tartalom beszúrására a DOM-ba. Használjon szöveget, ha aggódik az XSS-támadások miatt. |
elhelyezés | húr | funkció | 'jobb' | Hogyan helyezzük el a felugró ablakot - top | alsó | balra | jobbra | auto. Amikor egy függvényt használunk az elhelyezés meghatározására, akkor az első argumentumként a popover DOM-csomópontot, másodikként pedig a DOM-csomópont kiváltó elemet hívja meg. A |
választó | húr | hamis | Ha rendelkezésre áll választó, a felugró objektumok delegálódnak a megadott célokra. A gyakorlatban ezt arra használják, hogy a dinamikus HTML-tartalomhoz felugró ablakokat adjanak hozzá. Lásd ezt és egy tájékoztató példát . |
sablon | húr | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
A popover létrehozásakor használandó alap HTML. A popovert A popovert
A legkülső burkolóelemnek az |
cím | húr | funkció | '' | Alapértelmezett címérték, ha Ha adott egy függvény, akkor az úgy lesz meghívva, hogy a |
ravaszt | húr | 'kattint' | Hogyan történik a popover aktiválása - kattintson a | lebeg | fókusz | kézikönyv. Több triggert is átadhat; szóközzel válassza el őket. manual nem kombinálható semmilyen más triggerrel. |
nézetablak | húr | tárgy | funkció | { választó: 'test', padding: 0 } | Az előugró ablakot az elem határain belül tartja. Példa: Ha egy függvény adott, akkor az egyetlen argumentumként a DOM node kiváltó elemmel kerül meghívásra. A |
Az egyes felugró ablakok beállításai az adatattribútumok használatával is megadhatók, a fentiek szerint.
$().popover(options)
Inicializálja az elemgyűjtemény popovereit.
.popover('show')
Felfedi egy elem felbukkanását. Visszatér a hívóhoz, mielőtt a popover ténylegesen megjelenne (azaz az shown.bs.popover
esemény bekövetkezte előtt). Ez a popover "kézi" kiváltásának tekinthető. A nulla hosszúságú felugró ablakok soha nem jelennek meg.
.popover('hide')
Elrejti egy elem felbukkanását. Visszatér a hívóhoz, mielőtt a popover ténylegesen el lett volna rejtve (azaz az hidden.bs.popover
esemény bekövetkezte előtt). Ez a popover "kézi" kiváltásának tekinthető.
.popover('toggle')
Bekapcsolja az elem felbukkanását. Visszatér a hívóhoz, mielőtt a popover ténylegesen megjelenne vagy elrejtésre kerülne (azaz a shown.bs.popover
vagy hidden.bs.popover
esemény bekövetkezése előtt). Ez a popover "kézi" kiváltásának tekinthető.
.popover('destroy')
Elrejti és megsemmisíti egy elem felbukkanását. A delegálást használó felugró ablakok (amelyek a selector
beállítással jönnek létre ) nem semmisíthetők meg egyenként a leszármazott triggerelemeken.
Esemény típus | Leírás |
---|---|
show.bs.popover | Ez az esemény azonnal aktiválódik a show példánymetódus meghívásakor. |
mutatott.bs.popover | Ez az esemény akkor indul el, amikor a popover láthatóvá vált a felhasználó számára (megvárja, amíg a CSS-átmenetek befejeződnek). |
elrejteni.bs.popover | Ez az esemény azonnal elindul, amikor a hide példánymetódus meghívásra került. |
rejtett.bs.popover | Ez az esemény akkor indul el, amikor a popover elrejtése befejeződött a felhasználó elől (megvárja a CSS-átmenetek befejezését). |
beszúrva.bs.popover | Ez az esemény az show.bs.popover esemény után indul el, amikor a popover sablont hozzáadták a DOM-hoz. |
Adja hozzá az elvetés funkciót az összes figyelmeztető üzenethez ezzel a bővítménnyel.
A .close
gomb használatakor annak az első gyermeknek kell lennie, .alert-dismissible
és nem kerülhet szöveges tartalom elé a jelölésben.
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.
Csak adja hozzá data-dismiss="alert"
a bezárás gombot, hogy automatikusan riasztási bezárási funkciót adjon. A riasztás bezárása eltávolítja a DOM-ból.
Ha azt szeretné, hogy a riasztások bezáráskor animációt használjanak, győződjön meg arról, hogy a .fade
és .in
osztályok már vonatkoznak rájuk.
$().alert()
data-dismiss="alert"
Figyelmeztetést tesz az attribútummal rendelkező leszármazott elemek kattintási eseményeire . (Nem szükséges a data-api automatikus inicializálása esetén.)
$().alert('close')
Bezár egy riasztást a DOM-ból való eltávolításával. Ha a .fade
és .in
osztályok jelen vannak az elemen, a riasztás elhalványul, mielőtt eltávolítaná.
A Bootstrap riasztási beépülő modulja felfed néhány eseményt a riasztási funkciókhoz való csatlakozáshoz.
Esemény típus | Leírás |
---|---|
close.bs.alert | Ez az esemény azonnal aktiválódik a close példánymetódus meghívásakor. |
zárt.bs.figyelmeztetés | Ez az esemény akkor indul el, amikor a riasztást lezárták (megvárja a CSS-átmenetek befejezését). |
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.
A Firefox az oldalbetöltések során továbbra is fenntartja az űrlapvezérlési állapotokat (letiltottság és ellenőrzöttség) . Ennek megoldása a autocomplete="off"
. Lásd a Mozilla #654072-es hibáját .
Hozzáadás data-loading-text="Loading..."
a gomb betöltési állapotának használatához.
Ez a funkció a v3.3.5 óta elavult, és a 4-es verzióban eltávolították.
A bemutató kedvéért a és -t használjuk data-loading-text
, $().button('loading')
de nem ez az egyetlen állapot, amelyet használhat. Erről bővebben lentebb a $().button(string)
dokumentációban olvashat .
Hozzáadás data-toggle="button"
az egyetlen gombon történő váltás aktiválásához.
.active
ésaria-pressed="true"
Az előre váltott gombok esetén hozzá kell adnia az .active
osztályt és az aria-pressed="true"
attribútumot a button
saját magadhoz.
Adjon data-toggle="buttons"
hozzá egy .btn-group
jelölőnégyzetet vagy rádióbemeneteket a megfelelő stílusok közötti váltáshoz.
.active
Az előre kiválasztott opciók esetén az .active
osztályt saját magának kell hozzáadnia a bemenethez label
.
Ha egy jelölőnégyzet gomb bejelölt állapota frissítésre kerül anélkül, hogy click
eseményt aktiválna a gombon (pl . a bemenet tulajdonságának <input type="reset">
beállításán keresztül vagy via checked
), akkor saját magának kell átkapcsolnia az .active
osztályt a bemeneten label
.
$().button('toggle')
Bekapcsolja a push állapotot. Azt a látszatot kölcsönzi a gombnak, mintha aktiválva lett volna.
$().button('reset')
Visszaállítja a gomb állapotát – a szöveget eredeti szövegre cseréli. Ez a módszer aszinkron, és a visszaállítás tényleges befejezése előtt tér vissza.
$().button(string)
Lecseréli a szöveget bármely adatban meghatározott szövegállapotra.
Rugalmas bővítmény, amely maroknyi osztályt használ az egyszerű váltási viselkedés érdekében.
Az összecsukáshoz az átmenetek beépülő modulnak szerepelnie kell a Bootstrap verziójában.
Kattintson az alábbi gombokra egy másik elem megjelenítéséhez és elrejtéséhez osztálymódosításokon keresztül:
.collapse
tartalmat rejt.collapsing
átmenetek során alkalmazzák.collapse.in
tartalmat mutatHasználhat hivatkozást az href
attribútumhoz, vagy gombot az data-target
attribútumhoz. Mindkét esetben data-toggle="collapse"
kötelező.
Az alapértelmezett összecsukási viselkedés kiterjesztése harmonika létrehozásához a panel összetevővel.
Lehetőség van az .panel-body
s-t .list-group
s-re cserélni.
Feltétlenül adja hozzá aria-expanded
a vezérlőelemet. Ez az attribútum kifejezetten meghatározza az összecsukható elem aktuális állapotát a képernyőolvasók és hasonló kisegítő technológiák számára. Ha az összecsukható elem alapértelmezés szerint be van zárva, akkor értékének aria-expanded="false"
. Ha az összecsukható elemet alapértelmezés szerint nyitottnak állította be az in
osztály használatával, aria-expanded="true"
akkor inkább a vezérlőn állítsa be. A beépülő modul automatikusan átkapcsolja ezt az attribútumot attól függően, hogy az összecsukható elemet megnyitották-e vagy sem.
Ezenkívül, ha a vezérlőelem egyetlen összecsukható elemet céloz meg – azaz az data-target
attribútum egy id
szelektorra mutat –, hozzáadhat egy további aria-controls
attribútumot a vezérlőelemhez, amely tartalmazza id
az összecsukható elemet. A modern képernyőolvasók és a hasonló kisegítő technológiák ezt az attribútumot használják fel, hogy további parancsikonokat biztosítsanak a felhasználóknak, amelyekkel közvetlenül az összecsukható elemhez navigálhatnak.
A collapse plugin néhány osztályt használ a nehéz emelés kezelésére:
.collapse
elrejti a tartalmat.collapse.in
mutatja a tartalmat.collapsing
hozzáadódik az átmenet megkezdésekor, és eltávolítja, amikor befejeződikEzek az osztályok itt találhatók component-animations.less
.
Csak adja hozzá az elemhez data-toggle="collapse"
és az data-target
a-t, hogy automatikusan hozzárendelje az összecsukható elem vezérlését. Az data-target
attribútum elfogad egy CSS-választót az összecsukás alkalmazásához. Feltétlenül adja hozzá az osztályt collapse
az összecsukható elemhez. Ha azt szeretné, hogy alapértelmezetten megnyíljon, adja hozzá a további osztályt in
.
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.
Manuális engedélyezés a következőkkel:
Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-
következőhöz: data-parent=""
.
Név | típus | alapértelmezett | leírás |
---|---|---|---|
szülő | választó | hamis | Ha van választó, 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 - ez panel osztályfüggő) |
kapcsolót | logikai érték | igaz | Bekapcsolja az összecsukható elemet híváskor |
.collapse(options)
A tartalmat összecsukható elemként aktiválja. Elfogad egy opcionális opciót object
.
.collapse('toggle')
Az összecsukható elemet megjelenített vagy rejtett állapotba kapcsolja. Visszatér a hívóhoz, mielőtt az összecsukható elem ténylegesen megjelenne vagy elrejtődne (azaz mielőtt a shown.bs.collapse
vagy hidden.bs.collapse
esemény bekövetkezne).
.collapse('show')
Összecsukható elemet jelenít meg. Visszatér a hívóhoz, mielőtt az összecsukható elem ténylegesen megjelenne (azaz az shown.bs.collapse
esemény bekövetkezte előtt).
.collapse('hide')
Elrejti az összecsukható elemet. Visszatér a hívóhoz, mielőtt az összecsukható elem ténylegesen el lett volna rejtve (azaz az hidden.bs.collapse
esemény bekövetkezte előtt).
A Bootstrap összecsukási osztálya felfed néhány eseményt az összecsukási funkcióhoz való kapcsolódáshoz.
Esemény típus | Leírás |
---|---|
show.bs.collapse | Ez az esemény azonnal aktiválódik a show példánymetódus meghívásakor. |
látható.bs.összeomlás | Ez az esemény akkor aktiválódik, amikor egy összecsukott elem láthatóvá lett a felhasználó számára (megvárja a CSS-átmenetek befejezését). |
hide.bs.collapse | Ez az esemény azonnal aktiválódik, amikor a hide metódus meghívásra került. |
rejtett.bs.összeomlás | Ez az esemény akkor aktiválódik, amikor egy összecsukott elemet elrejtettek a felhasználó elől (megvárja a CSS-átmenetek befejezését). |
Diavetítés-összetevő az elemek közötti kerékpározáshoz, például egy körhinta. A beágyazott körhinta nem támogatott.
A körhinta összetevő általában nem felel meg a kisegítő lehetőségek szabványainak. Ha meg kell felelnie az előírásoknak, kérjük, fontolja meg a tartalom megjelenítésének egyéb lehetőségeit.
A Bootstrap kizárólag a CSS3-at használja animációihoz, de az Internet Explorer 8 és 9 nem támogatja a szükséges CSS-tulajdonságokat. Így ezeknek a böngészőknek a használatakor nincsenek diaátmenet-animációk. Szándékosan úgy döntöttünk, hogy nem használunk jQuery-alapú tartalékokat az átmenetekhez.
Az .active
osztályt hozzá kell adni az egyik diához. Ellenkező esetben a körhinta nem lesz látható.
A .glyphicon .glyphicon-chevron-left
és .glyphicon .glyphicon-chevron-right
osztályok nem feltétlenül szükségesek a vezérlőelemekhez. A Bootstrap egyszerű unicode alternatívákat kínál .icon-prev
..icon-next
Egyszerűen adhat feliratokat diákjaihoz a .carousel-caption
tetszőleges elemen belül .item
. Helyezzen el szinte bármilyen opcionális HTML-t, és a rendszer automatikusan igazítja és formázza.
A körhinta vezérlőinek megfelelő működéséhez id
a legkülső tartályon (a ) kell használni . .carousel
Ha több körhintat ad hozzá, vagy ha módosít egy körhintat id
, ne felejtse el frissíteni a megfelelő vezérlőket.
Használjon adatattribútumokat a körhinta helyzetének egyszerű szabályozásához. data-slide
elfogadja a prev
vagy kulcsszavakat next
, amely megváltoztatja a dia helyzetét az aktuális pozícióhoz képest. Alternatív megoldásként használja data-slide-to
a nyers diaindexet a körhintahoz data-slide-to="2"
, amely eltolja a dia pozícióját egy adott indexre, kezdve a -val 0
.
Az data-ride="carousel"
attribútum a körhinta animációsként való megjelölésére szolgál az oldal betöltésével kezdődően. Nem használható ugyanazon körhinta (redundáns és szükségtelen) explicit JavaScript inicializálásával együtt.
Körhinta kézi hívása a következőkkel:
Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-
következőhöz: data-interval=""
.
Név | típus | alapértelmezett | leírás |
---|---|---|---|
intervallum | szám | 5000 | Az a késleltetési idő, amely eltelik egy tétel automatikus ciklusba állítása között. Ha hamis, a körhinta nem forog automatikusan. |
szünet | húr | nulla | "lebeg" | Ha ez a beállítás "hover" , szünetelteti a körhinta forgását, mouseenter és bekapcsolva folytatja a körhinta forgását mouseleave . Ha értékre van állítva null , az egérrel a körhinta fölé mozgatva nem szünetelteti azt. |
betakar | logikai érték | igaz | Függetlenül attól, hogy a körhinta folyamatosan forog-e, vagy keményen kell-e megállnia. |
billentyűzet | logikai érték | igaz | A körhinta reagáljon-e a billentyűzet eseményeire. |
.carousel(options)
Inicializálja a körhinta egy opcionális opcióval object
, és elkezdi az elemek közötti kerékpározást.
.carousel('cycle')
Balról jobbra körbejárja a körhinta elemeit.
.carousel('pause')
Megakadályozza, hogy a körhinta az elemek között mozogjon.
.carousel(number)
A körhinta egy adott kerethez kapcsolja (0 alapú, hasonlóan egy tömbhöz).
.carousel('prev')
Az előző elemre vált.
.carousel('next')
Ugrás a következő elemre.
A Bootstrap körhinta osztálya két eseményt tesz közzé a körhinta funkcióihoz való kapcsolódáshoz.
Mindkét esemény a következő további tulajdonságokkal rendelkezik:
direction
: A körhinta csúszási iránya ( "left"
vagy "right"
).relatedTarget
: Az aktív elemként a helyére csúsztatott DOM-elem.Minden körhinta esemény magára a körhintara (azaz a <div class="carousel">
) indul.
Esemény típus | Leírás |
---|---|
slide.bs.carousel | Ez az esemény azonnal aktiválódik, amikor a slide példánymetódus meghívásra kerül. |
csúsztatott.bs.körhinta | Ez az esemény akkor aktiválódik, amikor a körhinta befejezte a diaátmenetet. |
Az affix beépülő modul position: fixed;
be- és kikapcsol, emulálja a -val talált effektust position: sticky;
. A jobb oldali alnavigáció az affix plugin élő bemutatója.
Használja az affix beépülő modult adatattribútumokon keresztül vagy manuálisan a saját JavaScript használatával. Mindkét esetben meg kell adnia a CSS-t a csatolt tartalom elhelyezéséhez és szélességéhez.
Megjegyzés: A Safari renderelési hibája miatt ne használja az affix beépülő modult olyan elemen, amely viszonylag elhelyezett elemben található, például egy húzott vagy tolt oszlopban .
Az affix plugin három osztály között vált, amelyek mindegyike egy adott állapotot képvisel: .affix
, .affix-top
, és .affix-bottom
. A stílusokat – az position: fixed;
on kivételével – .affix
saját magának kell megadnia ezekhez az osztályokhoz (a beépülő modultól függetlenül), hogy kezelje a tényleges pozíciókat.
Az affix beépülő modul a következőképpen működik:
.affix-top
, jelezve, hogy az elem a legfelső pozícióban van. Ezen a ponton nincs szükség CSS pozicionálásra..affix
lecseréli .affix-top
és beállítja position: fixed;
(a Bootstrap CSS-je biztosítja)..affix
lépnie .affix-bottom
. Mivel az eltolások nem kötelezőek, az egyik beállításához be kell állítani a megfelelő CSS-t. Ebben az esetben adjon hozzá, position: absolute;
amikor szükséges. A beépülő modul a data attribútumot vagy a JavaScript beállítást használja annak meghatározására, hogy honnan helyezze el az elemet.Kövesse a fenti lépéseket a CSS beállításához az alábbi használati lehetőségek bármelyikéhez.
A toldalékolási viselkedés egyszerű hozzáadásához bármely elemhez egyszerűen adja hozzá data-spy="affix"
azt az elemet, amely után kémkedni szeretne. Használja az eltolásokat annak meghatározására, hogy mikor kell átkapcsolni egy elem rögzítését.
Hívja meg az affix plugint JavaScripten keresztül:
Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-
következőhöz: data-offset-top="200"
.
Név | típus | alapértelmezett | leírás |
---|---|---|---|
beszámítás | szám | funkció | tárgy | 10 | A képernyőtől eltolni kívánt képpontok a görgetés helyzetének kiszámításakor. Ha egyetlen számot ad meg, az eltolás felül és alul is érvényesül. Egyedi alsó és felső eltolás biztosításához csak adjon meg egy objektumot offset: { top: 10 } vagy offset: { top: 10, bottom: 5 } . Használjon függvényt, ha dinamikusan kell kiszámítani egy eltolást. |
cél | választó | csomópont | jQuery elem | a window tárgyat |
Megadja a toldalék célelemét. |
.affix(options)
A tartalmat csatolt tartalomként aktiválja. Elfogad egy opcionális opciót object
.
.affix('checkPosition')
Újraszámítja a toldalék állapotát a vonatkozó elemek méretei, helyzete és görgetési pozíciója alapján. A .affix
, .affix-top
, és .affix-bottom
osztályok az új állapotnak megfelelően kerülnek hozzáadásra vagy eltávolításra a hozzáfűzött tartalomhoz. Ezt a módszert minden alkalommal meg kell hívni, amikor a csatolt tartalom vagy a célelem mérete megváltozik, hogy biztosítsa a csatolt tartalom helyes elhelyezését.
A Bootstrap affix beépülő modulja felfed néhány eseményt az affix funkcióhoz való csatlakozáshoz.
Esemény típus | Leírás |
---|---|
affix.bs.affix | Ez az esemény közvetlenül az elem rögzítése előtt aktiválódik. |
toldott.bs.affix | Ez az esemény az elem rögzítése után indul el. |
affix-top.bs.affix | Ez az esemény közvetlenül azelőtt aktiválódik, hogy az elem tetejére került volna. |
affixed-top.bs.affix | Ez az esemény az elem tetejére való rögzítése után indul el. |
affix-bottom.bs.affix | Ez az esemény közvetlenül azelőtt aktiválódik, hogy az elem alulra lett volna ragasztva. |
affixed-bottom.bs.affix | Ez az esemény az elem alulra ragasztása után indul el. |