JQuery Mobile
jQuery Mobile er en berøringsbaseret webramme (også kendt som mobilramme) udviklet af jQuery-teamet, skaberne af jQuery . Udviklingen er fokuseret på cross-browser kompatibilitet med en bias mod smartphones og tablets. jQuery Mobile er kompatibel med andre mobile rammer såsom PhoneGap , Worklight og andre.
Grundlæggende eksempel
Det første trin i arbejdet med jQuery Mobile er at inkludere JavaScript- og CSS-filer. Du skal inkludere jQuery, jQuery Mobile JavaScript og jQuery Mobile CSS. Dette kan gøres på to måder: download alle de nødvendige filer og tilslut dem lokalt, eller brug online biblioteksforbindelsen.
I eksemplets brødtekst kan du se div'er med forskellige dataroller. Baseret på disse parametre opretter jQuery Mobile siden. data-rolle angiver elementets rolle på skærmen - det kan være en side (data-role="page"), en knap (data-role="button"), en liste (data-role="listview" ), osv. En side (data-role="page") kan indeholde tre div'er med rollerne header (data-role="header"), footer (data-role="footer") og indhold (data-role= "indhold"). Elementets rolle bestemmer, hvordan det vil blive vist på skærmen.
En webside kan indeholde så mange div'er med data-role="page", som du vil, men i dette tilfælde, når webapplikationen starter, vil den side, der blev initialiseret først, blive vist. For at navigere mellem sider, brug links med href="#id", hvor id er det unikke id for den side, du vil navigere til
Data-tema-attributten definerer interface-stilen for elementet og dets efterkommere, jQuery Mobile har fem stilarter indbygget, de er nummereret som a, b, c, d, e.
Data-add-back-btn-attributten opretter en Tilbage -knap for at gå til den forrige skærm
<!DOCTYPE html>
< html >
< head >
< title > Sidetitel
</ 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 > Sidetitel
</ h1 >
</ div >
< div data-rolle = "content" >
< p > Sideindhold
</ p >
< a href = "#second" > Anden side
</ a >
</ div >
< div data-role = "footer" >
< h4 > Sidefod
</ h4 >
</ div >
</ div >
< div data-role = "page" id = "second" data-add-back-btn = "true" data-theme = "b" >
< div data-role = "header" id = "header" >
< h1 > jQuery Mobile eksempel
</ h1 >
</ div >
< div data-role = "content" >
< p > Eksempel på flere sider
</ p >
</ div >
< div data-role = "footer" >
< h4 > Copyright( c)
</ h4 >
</ div >
</ div >
</ body >
</ html >
Hændelseseksempel
< script type = "text/javascript" >
$ ( '#header' ). live ( 'tryk' , funktion ( hændelse ){
advarsel ( 'Du rørte ved titlen på den anden side' );
});
< /script>
Mobil browser support
| Platform
|
Version
|
indfødt
|
telefon hul
|
Opera mobil
|
Opera Mini
|
fennec
|
Ozon
|
Net foran
|
| 0,9
|
8,5, 8,65
|
9.5
|
ti
|
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
|
|
|
Fra
8.65
|
|
|
|
|
|
|
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*
|
|
|
|
|
|
|
|
|
|
|
|
Nøgler:
- A - Fuld funktionalitet - browseren understøtter alle funktionerne i jQuery Mobile
- B - Medium funktionalitet - browseren understøtter ikke nogle jQuery Mobile-funktioner (såsom animation)
- C - Grundlæggende funktionalitet - browseren understøtter grundlæggende funktioner
- * - Ny browser, endnu ikke frigivet, men i alfa/beta-test.
(Kilde: jQuery Mobile-webstedet)
Versionshistorik
Se også
Noter
Links