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' ). modális ( opciók )

Lehetőségek

Név	típus	alapértelmezett	leírás
háttér	logikai érték	hamis	Modális háttérelemet tartalmaz
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 = "true" > 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' ). modális ({
  closeOnEscape : igaz 
})

.modal('toggle')

Manuálisan vált egy módot.

$ ( '#my-modal' ). modális ( 'toggle' )

.modal('show')

Manuálisan megnyit egy modált.

$ ( '#my-modal' ). modális ( 'show' )

.modal('hide')

Manuálisan elrejti a modált.

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

.modal(true)

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

$ ( '#my-modal' ). modális ( 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 boostrap-dropdown.js használata

$ ( '#topbar' ). legördülő menü ()

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 = "aktív" ><a href = "#" > Kezdőlap </a></li>  
  <li class = "dropdown" data-dropdown = "legördülő" >   
    <a href = "#" class = "dropdown-toggle" > Legördülő menü </a>  
    <ul class = "legördülő menü" > 
      <li><a href = "#" > Másodlagos link </a></li> 
      <li><a href = "#" > Itt van még valami </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 boostrap-scrollspy.js használata

$ ( '#topbar' ). legördülő menü ()

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.

$ ( 'test > .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.

$ ( 'test' ). scrollspy ( 'frissítés' )

Demó

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

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

Letöltés

A boostrap-tabs.js használata

$ ( '.tabs' ). lapok ()

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 = "aktív" ><a href = "#home" > Kezdőlap </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 = "profil" > ... </div> 
  <div id = "üzenetek" > ... </div> 
  <div id = "beállítások" > ... </div> 
</ul>
 
<script>
  $ ( függvény () {  
    $ ( '.tabs' ). lapok ()
  })
</script>

Demó

• itthon
• Profil
• üzenetek
• Beállítások

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 ( opciók )

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	húr | funkció	'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

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 ( 'elrejtés' )

.twipsy(true)

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

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

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 boostrap-twipsy.js beépülő modult, ezért ügyeljen arra, hogy ezt a fájlt is megragadja, amikor felbukkan a projektje!

Letöltés

A boostrap-popover.js használata

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

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	húr | funkció	'cím'	attribútum vagy módszer a címszöveg lekéréséhez
tartalom	húr | funkció	"adattartalom"	attribútum vagy módszer a tartalomszöveg lekéréséhez
ravaszt	húr	'lebeg'	hogyan aktiválódik az eszköztipp – hover | fókusz | kézikönyv

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" ). figyelmeztetés ()

Jelölés

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

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" ). figyelmeztetés ( 'bezárás' )

Demó