A Modal beépülő modulunk a hagyományos modális js beépülő modul rendkívül karcsú változata, különös gondot fordítva arra, hogy csak azokat a puszta funkciókat tartalmazza, amelyekre itt a Twitteren szükségünk van.

Letöltés

Bootstrap-modal használata

$('#my-modal').modal(options)

Lehetőségek

Név	típus	alapértelmezett	leírás
háttér	logikai érték, karakterlánc	hamis	Modális háttérelemet tartalmaz. Állítsa be a hátteret, "static"ha nem szeretné, hogy a modális bezáruljon, amikor a hátterre kattint.
billentyűzet	logikai érték	hamis	Bezárja a modált az Escape billentyű lenyomásakor
előadás	logikai érték	hamis	Megnyitja a modálist az osztály inicializálásánál

Jelölés

Könnyedén aktiválhatja a modálokat az oldalon anélkül, hogy egyetlen soros javascriptet kellene írnia. Csak adjon meg egy elemnek egy data-controls-modalattribútumot, amely megfelel egy modális elem azonosítójának, és ha rákattint, elindítja a modált. Modális opciók hozzáadásához csak adja meg őket adatattribútumként.

<a class="btn" data-controls-modal="my-modal" data-backdrop="static" >Modal indítása</a>

Megjegyzés Ha azt szeretné, hogy a modál be- és kifelé animálódjon, egyszerűen adjon hozzá egy .fadeosztályt az .modalelemhez (lásd a bemutatót, hogy megtekinthesse ezt működés közben).

Mód

.modal(opciók)

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

$('#my-modal').modal({
  billentyűzet: igaz
})

.modal('toggle')

Manuálisan vált egy módot.

$('#my-modal').modal('toggle')

.modal('show')

Manuálisan megnyit egy modált.

$('#my-modal').modal('show')

.modal('hide')

Manuálisan elrejti a modált.

$('#my-modal').modal('elrejtés')

.modal(true)

Egy elemek modális osztálypéldányt ad vissza.

$('#my-modal').modal(igaz)

Megjegyzés Alternatív megoldásként ez a paranccsal is lekérhető $().data('modal').

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

$('#my-modal').bind('hidden', function () {
  // csinálj valamit ...
})

Demó

Indítsa el a Modalt

Ez a beépülő modul legördülő interakciók hozzáadására szolgál a rendszerindító felső sávjához vagy a füles navigációhoz.

Letöltés

A bootstrap-dropdown.js használata

$('#topbar').dropdown()

Jelölés

Ha gyorsan szeretne legördülő menüt hozzáadni bármely navigációs elemhez, használja az data-dropdownattribútumot. Minden érvényes bootstrap legördülő menü automatikusan aktiválódik.

<ul class="tabs">
  <li class="active"><a href="#">Főoldal</a></li>
  <li class="dropdown" data-dropdown="dropdown" >
    <a href="#" class="dropdown-toggle">Legördülő menü</a>
    <ul class="dropdown-menu">
      <li><a href="#">Másodlagos link</a></li>
      <li><a href="#">Valami más itt</a></li>
      <li class="osztó"></li>
      <li><a href="#">Egy másik link</a></li>
    </ul>
  </li>
</ul>

Megjegyzés Ha a felhasználói felületén több legördülő menü található, fontolja meg az data-dropdownattribútum hozzáadását egy jelentősebb tárolóelemhez, például a .tabsvagy .topbar.

Mód

$().dropdown()

Programozási API egy adott felső sáv vagy lapos navigáció menüinek aktiválásához.

Demó

Ez a beépülő modul a scrollspy (automatikus frissítésű navigációs) interakció hozzáadására szolgál a bootstrap felső sávjához.

Letöltés

A bootstrap-scrollspy.js használata

$('#topbar').scrollSpy()

Jelölés

A scrollspy viselkedés egyszerű hozzáadásához adja hozzá az data-scrollspyattribútumot a .topbar.

<div class="topbar" data-scrollspy="scrollspy" >...</div>

Mód

$().scrollSpy()

Automatikusan aktiválja a navigációs gombokat a felhasználó görgetési pozíciója szerint.

$('body > .topbar').scrollSpy()

Megjegyzés A Topbar horgonycímkéknek 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>.

.scrollSpy('refresh')

A scrollspy gyorsítótárban tárolja a navigációs gombokat és a szakasz koordinátáit a teljesítmény érdekében. Ha frissítenie kell ezt a gyorsítótárat (valószínűleg dinamikus tartalom esetén), hívja ezt a frissítési módszert. Ha a data attribútumot használta a scrollspy meghatározásához, csak hívja a refresh parancsot a törzsben.

$('body').scrollSpy('refresh')

Demó

Nézze meg a felső sáv navigációját ezen az oldalon.

Ez a bővítmény további funkciókat kínál a gombok állapotának kezeléséhez.

Letöltés

A bootstrap-buttons.js használata

$('.tabs').button()

Mód

$().button('toggle')

Bekapcsolja a push állapotot. Olyan megjelenést kölcsönöz a btn-nek, mintha aktiválták volna.

Megjegyzés Az data-toggleattribútum használatával engedélyezheti a gombok automatikus váltását.

<button class="btn" data-toggle="toggle" >...</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.

<button class="btn" data-loading-text="cucc betöltése..." >...</button>

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

<button class="btn" data-complete-text="kész!" >...</button>
<script>
  $('.btn').button('complete')
</scrip>

Demó

Demo betöltése Demó váltása

Ez a beépülő modul gyors, dinamikus lap- és tablettafunkciókat ad hozzá.

Letöltés

A bootstrap-tabs.js használata

$('.tabs').tabs()

Jelölés

Aktiválhat egy lapot vagy tabletta navigációt anélkül, hogy JavaScriptet írna, egyszerűen megadva nekik egy data-tabsvagy data-pillsattribútumot.

<ul class="tabs" data-tabs="tabs" >...</ul>

Mód

$().tabs vagy $().pills

Aktiválja a fül és a tabletta funkcióit egy adott tárolóhoz. A laphivatkozásoknak hivatkozniuk kell a dokumentumban található azonosítókra.

<ul class="tabs">
  <li class="active"><a href="#home">Főoldal</a></li>
  <li><a href="#profile">Profil</a></li>
  <li><a href="#messages">Üzenetek</a></li>
  <li><a href="#settings">Beállítások</a></li>
</ul>

<div class="pill-content">
  <div class="active" id="home">...</div>
  <div id="profile">...</div>
  <div id="üzenetek">...</div>
  <div id="beállítások">...</div>
</div>

<script>
  $(függvény () {
    $('.tabs').tabs()
  })
</script>

Események

Esemény	Leírás
változás	Ez az esemény lapváltáskor aktiválódik. Használja a event.targetés event.relatedTargetaz aktív lapot, illetve az előző aktív lapot.

$('#.tabs').bind('change', function (e) {
  e.target // aktivált lap
  e.relatedTarget // előző lap
})

Demó

• itthon
• Profil
• üzenetek
• Beállítások
• Ledob
  • @zsír
  • @mdo

A Jason Frame által írt kiváló jQuery.tipsy plugin alapján; A twipsy egy frissített verzió, amely nem támaszkodik képekre, css3-at használ az animációkhoz, és adat-attribútumokat a címtároláshoz!

Letöltés

A bootstrap-twipsy.js használata

$('#example').twipsy(options)

Lehetőségek

Név	típus	alapértelmezett	leírás
élő	logikai érték	igaz	alkalmazzon css fade átmenetet az eszköztippre
késleltetésben	szám	0	késleltetés az elemleírás megjelenítése előtt (ms)
delayOut	szám	0	késleltetés az elemleírás elrejtése előtt (ms)
tartalék	húr	''	szöveg, amelyet akkor használ, ha nincs elemleírás címe
elhelyezés	húr	'felett'	hogyan kell elhelyezni az eszköztipet - fent | lent | balra | jobb
html	logikai érték	hamis	lehetővé teszi a html tartalmat az eszközleíráson belül
élő	logikai érték	hamis	esemény delegálást használjon az egyes eseménykezelők helyett
beszámítás	szám	0	az eszköztipp pixeleltolása a célelemtől
cím	karakterlánc, függvény	'cím'	attribútum vagy módszer a címszöveg lekéréséhez
ravaszt	húr	'lebeg'	hogyan aktiválódik az eszköztipp – hover | fókusz | kézikönyv
sablon	húr	[alapértelmezett jelölés]	A twipsy renderelésére használt html sablon.

Megjegyzés Az egyes twipsy példányopciók adatattribútumok használatával is megadhatók.

<a href="#" data-placement="below" rel='twipsy' title='Some title text'>text</a>

Mód

$().twipsy(opciók)

Twipsy kezelőt csatlakoztat egy elemgyűjteményhez.

.twipsy('show')

Felfedi az elemek twipsy.

$('#elem').twipsy('show')

.twipsy('hide')

Elrejti a twipsy elemeket.

$('#elem').twipsy('hide')

.twipsy(true)

Egy elemek twipsy osztálypéldányt ad vissza.

$('#elem').twipsy(true)

Megjegyzés Alternatív megoldásként ez a paranccsal is lekérhető $().data('twipsy').

Demó

A popover beépülő modul egyszerű felületet biztosít felugró ablakok hozzáadásához az alkalmazáshoz. Kibővíti a bootstrap-twipsy.js beépülő modult, ezért ügyeljen arra, hogy ezt a fájlt is megragadja, amikor felbukkan a projektje!

Megjegyzés A bootstrap-twipsy.js fájlt a bootstrap-popover.js előtt kell tartalmaznia .

Letöltés

A bootstrap-popover.js használata

$('#example').popover(options)

Lehetőségek

Név	típus	alapértelmezett	leírás
élő	logikai érték	igaz	alkalmazzon css fade átmenetet az eszköztippre
késleltetésben	szám	0	késleltetés az elemleírás megjelenítése előtt (ms)
delayOut	szám	0	késleltetés az elemleírás elrejtése előtt (ms)
tartalék	húr	''	szöveg, amelyet akkor használ, ha nincs elemleírás címe
elhelyezés	húr	'jobb'	hogyan kell elhelyezni az eszköztipet - fent | lent | balra | jobb
html	logikai érték	hamis	lehetővé teszi a html tartalmat az eszközleíráson belül
élő	logikai érték	hamis	esemény delegálást használjon az egyes eseménykezelők helyett
beszámítás	szám	0	az eszköztipp pixeleltolása a célelemtől
cím	karakterlánc, függvény	'cím'	attribútum vagy módszer a címszöveg lekéréséhez
tartalom	karakterlánc, függvény	"adattartalom"	egy karakterlánc vagy módszer a tartalomszöveg lekérésére. Ha egyiket sem adják meg, a tartalom egy adattartalom attribútumból származik.
ravaszt	húr	'lebeg'	hogyan aktiválódik az eszköztipp – hover | fókusz | kézikönyv
sablon	húr	[alapértelmezett jelölés]	A popover megjelenítéséhez használt html sablon.

Megjegyzés Az egyes felugró példányok beállításai adatattribútumok használatával is megadhatók.

<a data-placement="below" href="#" class="btn vaara" rel="popover">szöveg</a>

Mód

$().popover(options)

Inicializálja az elemgyűjtemény popovereit.

.popover('show')

Felfedi az elemek felbukkanását.

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

.popover('hide')

Elrejti az elemek felbukkanását.

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

Demó

lebeg a popoverhez

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

Letöltés

A bootstrap-alerts.js használata

$(".alert-message").alert()

Jelölés

Csak adjon hozzá egy data-alertattribútumot a figyelmeztető üzenetekhez, hogy automatikusan bezárja őket.

Lehetőségek

Név	típus	alapértelmezett	leírás
választó	húr	'.Bezárás'	Milyen választót célozzon meg a riasztás lezárásához.

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.

$(".alert-message").alert('close')

Demó