|
Come si può evincere dal nome jQuery Mobile è un framewrok basato su jQuery indirizzato al mobile.
Molto semplice da usare, ha già a disposizione alcuni temi che comunque possiamo modificare.
Le pagine sono scritte in semplice HTML.
Per cominciare scaricate jQuery e la relativa libreria mobile.
La pagina base è questa:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Anatomy of a Page</title>
<link rel="stylesheet" href="/site/<a href="view-source:http:/code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">jquery.mobile-1.0.min.css</a>" />
<script src="/site/<a href="view-source:http:/code.jquery.com/jquery-1.6.4.js">/jquery-1.7.1.js</a>"></script>
<script src="/site/<a href="view-source:http:/code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js">jquery.mobile-1.0.min.js</a>"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
</body>
</html>
Questa è una struttura base; come vedete quello che cambia rispetto a una pagina classica sono gli attirbuti specifi dei vari div.
Il data-role page è obbligatorio; gli altri no in quanto se non vi servono header e footer potete anche ometterli.
Una cosa bella è che una semplice pagina può contenere più pagine navigabili.
Qua un esempio di multi-pagina:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Anatomy of a Page</title>
<link rel="stylesheet" href="/site/<a href="view-source:http:/code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">jquery.mobile-1.0.min.css</a>" />
<script src="/site/<a href="view-source:http:/code.jquery.com/jquery-1.6.4.js">/jquery-1.7.1.js</a>"></script>
<script src="/site/<a href="view-source:http:/code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js">jquery.mobile-1.0.min.js</a>"></script>
</head>
<body>
<!-- FIRST PAGE -->
<div data-role="page" id="first">
<div data-role="header"><h1>Prma pagina</h1></div>
<div data-role="content">Questa è la prima pagina - <a href="#second">Vai alla seconda</a></div>
<div data-role="footer">Footer</div>
<!-- SECOND PAGE -->
<div data-role="page" id="second">
<div data-role="header"><h1>Seconda pagina</h1></div>
<div data-role="content">Questa è la seconda pagina - <a href="#first">Vai alla prima</a></div>
<div data-role="footer">Footer</div>
</div>
</body>
</html>
Come vedete nei div principali ho aggiunto un id; saranno gli id chiamati dai link.
Questa è la base, ma ovviamente il framework non si ferma qua.
Qui potete trovare molti esempi da poter utilizzare.
C'è praticamente tutto.
Page Title
|
