JQuery Mobile
jQuery Mobile este un cadru web bazat pe atingere (cunoscut și ca cadru mobil) dezvoltat de echipa jQuery, creatorii jQuery . Dezvoltarea se concentrează pe compatibilitatea între browsere, cu o tendință spre smartphone-uri și tablete. jQuery Mobile este compatibil cu alte cadre mobile, cum ar fi PhoneGap , Worklight și altele.
Exemplu de bază
Primul pas în lucrul cu jQuery Mobile este să includeți fișiere JavaScript și CSS. Trebuie să includeți jQuery, jQuery Mobile JavaScript și jQuery Mobile CSS. Acest lucru se poate face în două moduri: descărcați toate fișierele necesare și conectați-le local sau utilizați conexiunea la bibliotecă online.
În corpul exemplului, puteți vedea div-uri cu diferite roluri de date. Pe baza acestor parametri, jQuery Mobile creează pagina. data-role indică rolul elementului pe ecran - poate fi o pagină (data-role="page"), un buton (data-role="button"), o listă (data-role="listview" ), etc. O pagină (data-role="page") poate conține trei div-uri cu antetul rolurilor (data-role="header"), subsol (data-role="footer") și conținut (data-role= „conținut”). Rolul elementului va determina modul în care va fi afișat pe ecran.
O pagină web poate conține câte div-uri cu data-role="page" doriți, dar în acest caz, când pornește aplicația web, va fi afișată pagina care a fost inițializată prima. Pentru a naviga între pagini, utilizați linkuri cu href="#id", unde id este ID-ul unic al paginii la care doriți să navigați
Atributul data-theme definește stilul de interfață pentru element și descendenții săi, jQuery Mobile are cinci stiluri încorporate, acestea sunt numerotate ca a, b, c, d, e.
Atributul data-add-back-btn creează un buton Înapoi pentru a merge la ecranul anterior
<!DOCTYPE html>
< html >
< head >
< title > Titlul paginii
</ title >
< meta name = "viewport" content = "width=device-width, initial-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 = "header" >
< h1 > Titlul paginii
</ h1 >
</ div >
< div data-role = „conținut” >
< p > Conținutul paginii
</ p >
< a href = "#second" > A doua pagină
</ a >
</ div >
< div data-role = "footer" >
< h4 > Subsolul paginii
</ h4 >
</ div >
</ div >
< div data-role = "page" id = "second" data-add-back-btn = "true" data-theme = "b" >
< div data-role = "header" id = "header" >
< h1 > Exemplu jQuery Mobile
</ h1 >
</ div >
< div data-role = "conținut" >
< p > Exemplu cu mai multe pagini
</ p >
</ div >
< div data-role = "subsol" >
< h4 > Drepturi de autor( c)
</ h4 >
</ div >
</ div >
</ body >
</ html >
Exemplu de eveniment
< script type = "text/javascript" >
$ ( '#header' ). live ( 'tap' , function ( event ){
alert ( 'Ati atins titlul paginii a doua' );
});
< /script>
Suport pentru browser mobil
| Platformă
|
Versiune
|
nativ
|
gol de telefon
|
Opera Mobile
|
Opera mini
|
fennec
|
Ozon
|
Frontul net
|
| 0,9
|
8,5, 8,65
|
9.5
|
zece
|
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
|
|
|
De la
8.65
|
|
|
|
|
|
|
C
|
|
| v3.2
|
|
|
|
C
|
|
|
|
|
|
C
|
|
| Platforma Symbian
|
v.3.0
|
|
|
|
|
|
|
|
|
|
|
|
| Sistemul de operare BlackBerry
|
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*
|
|
|
|
|
|
|
|
|
|
|
|
Chei:
- A - Funcționalitate completă - browserul acceptă toate caracteristicile jQuery Mobile
- B - Funcționalitate medie - browserul nu acceptă unele caracteristici jQuery Mobile (cum ar fi animația)
- C - Funcționalitate de bază - browserul acceptă funcții de bază
- * - Browser nou, nelansat încă, dar în testare alfa/beta.
(Sursa: site-ul jQuery Mobile)
Istoricul versiunilor
Vezi și
Note
Link -uri