JQuery Mobile
A jQuery Mobile egy érintésalapú webes keretrendszer (más néven mobil keretrendszer), amelyet a jQuery csapata, a jQuery alkotói fejlesztettek ki . A fejlesztés a böngészők közötti kompatibilitásra összpontosít, az okostelefonok és táblagépek irányába tévedve. A jQuery Mobile kompatibilis más mobil keretrendszerekkel, mint például a PhoneGap , Worklight és másokkal.
Alappélda
A jQuery Mobile használatának első lépése a JavaScript- és CSS-fájlok beépítése. Meg kell adnia a jQuery-t, a jQuery Mobile JavaScript-et és a jQuery Mobile CSS-t. Ezt kétféleképpen teheti meg: töltse le az összes szükséges fájlt és csatlakoztassa őket helyileg, vagy használja az online könyvtári kapcsolatot.
A példa törzsében különböző adatszerepekkel rendelkező diveket láthat. Ezen paraméterek alapján a jQuery Mobile létrehozza az oldalt. A data-role az elem szerepét jelzi a képernyőn - lehet oldal (data-role="page"), gomb (data-role="button"), lista (data-role="listview" ), stb. Egy oldal (data-role="page") három div elemet tartalmazhat fejléc (data-role="header"), lábléc (data-role="footer") és tartalom (data-role=) "tartalom"). Az elem szerepe határozza meg, hogyan jelenik meg a képernyőn.
Egy weboldal tetszőleges számú div elemet tartalmazhat data-role="page" karakterlánccal, de ebben az esetben a webalkalmazás indulásakor az elsőként inicializált oldal jelenik meg. Az oldalak közötti navigáláshoz használjon hivatkozásokat a href="#id" karakterlánccal, ahol az id annak az oldalnak az egyedi azonosítója, amelyre navigálni szeretne
Az adattéma attribútum határozza meg az elem és leszármazottai interfész stílusát, a jQuery Mobile öt stílust tartalmaz, amelyek számozása a, b, c, d, e.
A data-add-back-btn attribútum létrehoz egy Vissza gombot , amellyel az előző képernyőre léphet
<!DOCTYPE html>
< html >
< head >
< title > Oldal címe
</ title >
< meta name = "viewport" content = "width=device-width, original-scale=1" >
< link href = "http: //code.jquery.com/mobile/latest/jquery.mobile.min.css" rel = "stylesheet" type = "text/css" />
< script type = "text/javascript" src = "http:// code.jquery.com/jquery.min.js" ></ script >
< script type = "text/javascript" src = "http://code.jquery.com/mobile/latest/jquery.mobile.min.js " ></ script >
</ head >
< body >
< div data-role = "page" id = "main" data-theme = "a" >
< div data-role = "fejléc" >
< h1 > Oldal címe
</ h1 >
</ div >
< div data-role = "content" >
< p > Oldal tartalma
</ p >
< a href = "#second" > Második oldal
</ a >
</ div >
< div data-role = "lábléc" >
< h4 > Oldalláb
</ h4 >
</ div >
</ div >
< div data-role = "oldal" id = "második" data-add-back-btn = "true" data-theme = "b" >
< div data-role = "fejléc" id = "fejléc" >
< h1 > jQuery Mobile példa
</ h1 >
</ div >
< div data-role = "content" >
< p > Többoldalas példa
</ p >
</ div >
< div data-role = "lábléc" >
< h4 > Copyright( c)
</ h4 >
</ div >
</ div >
</ body >
</ html >
Eseménypélda
< script type = "text/javascript" >
$ ( '#header' ). live ( 'tap' , function ( esemény ){
alert ( 'Megérintetted a második oldal címét' );
});
< /script>
Mobil böngésző támogatás
| Felület
|
Változat
|
natívan
|
telefon rés
|
Opera Mobil
|
Opera Mini
|
fennec
|
Ózon
|
Háló eleje
|
| 0.9
|
8,5, 8,65
|
9.5
|
tíz
|
4.0
|
5.0
|
1.0
|
1,1*
|
0.9
|
4.0
|
| iOS
|
v2.2.1
|
B
|
|
|
|
|
|
|
|
|
|
|
| v3.1.3, v3.2
|
|
|
|
|
|
|
|
|
|
|
|
| v4.0
|
|
|
|
|
|
|
|
|
|
|
|
| Symbian S60
|
v3.1, v3.2
|
C
|
|
C
|
|
B
|
C
|
B
|
|
|
C
|
C
|
| v5.0
|
|
|
C
|
|
|
C
|
|
|
|
|
|
| Symbian UIQ
|
v3.0, v3.1
|
|
|
8.65 -től
|
|
|
|
|
|
|
C
|
|
| v3.2
|
|
|
|
C
|
|
|
|
|
|
C
|
|
| Symbian platform
|
v.3.0
|
|
|
|
|
|
|
|
|
|
|
|
| BlackBerry OS
|
v4.5
|
C
|
|
|
|
|
C
|
C
|
|
|
|
|
| v4.6, v4.7
|
C
|
C
|
|
|
|
C
|
B
|
|
|
|
|
| v5.0
|
B
|
|
|
|
|
C
|
|
|
|
|
|
| v6.0
|
|
|
|
|
|
|
|
|
|
|
|
| Android
|
v1.5, v1.6
|
|
|
|
|
|
|
|
|
|
|
|
| v2.1
|
|
|
|
|
|
|
|
|
|
|
|
| v2.2
|
|
|
|
|
|
|
C*
|
|
|
|
| Windows Mobile
|
v6.1
|
C
|
|
C
|
C
|
C
|
B
|
C
|
B
|
|
|
C
|
| v6.5.1
|
C
|
|
C
|
C
|
|
|
C
|
|
|
|
|
| v7.0
|
|
|
|
|
|
C
|
|
|
|
|
|
| webOS
|
1.4.1
|
|
|
|
|
|
|
|
|
|
|
|
| bada
|
1.0
|
|
|
|
|
|
|
|
|
|
|
|
| Maemo
|
5.0
|
B
|
|
|
|
B
|
|
|
C
|
B*
|
|
|
| MeeGo
|
1,1*
|
|
|
|
|
|
|
|
|
|
|
|
Kulcsok:
- V – Teljes funkcionalitás – a böngésző támogatja a jQuery Mobile összes funkcióját
- B – Közepes funkcionalitás – a böngésző nem támogatja a jQuery Mobile egyes funkcióit (például az animációt)
- C – Alapfunkciók – a böngésző támogatja az alapvető funkciókat
- * - Új böngésző, még nem adták ki, de alfa/béta tesztelés alatt áll.
(Forrás: jQuery Mobile webhely)
Verzióelőzmények
Lásd még
Jegyzetek
Linkek