Lezione #id-jqmobile-2013-0001#
JQuery Mobile è un framework in JavaScript basato su JQuery.
Vediamo la sintassi di base:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<!-- ################### -->
<!-- Start of first page -->
<!-- ################### -->
<div data-role="page" id="one">
<div data-role="header">
<h1>Page one</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#two">two</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- #################### -->
<!-- Start of second page -->
<!-- #################### -->
<div data-role="page" id="two">
<div data-role="header">
<h1>Page Two</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
<p><a href="#one">Back to page one</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Notiamo dal tag di apertura che si tratta di una pagina HTML5.
Prima di tutto scriviamo:
<meta name="viewport" content="width=device-width, initial-scale=1">
Questa istruzione evita che il browser del nostro dispositivo attivi lo zoom di default.
La larghezza della nostra pagina sarà uguale alla risoluzione del display content=”width=device-width, evitando di dover effettuare lo zoom a mano dei contenuti.
Poi carichiamo i framework e i fogli di stile:
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
Il documento HTML può contenere una o più pagine. Se vi sono più pagine sarà visibile solo la prima in ordine di caricamento, quella più alta nel listato di codice.
Ogni pagina è delimitata da:
<div data-role="page" id="one">
...
</div>
All’interno di ogni pagina definiamo un header, un footer e un content. Non è una struttura obbligatoria, ma consigliata se si vuole che i fogli di stile di default del framework vengano applicati correttamente.
ATTENZIONE: gli id che identificano gli elementi dei form devono essere univoci, non solo all’interno della pagina, ma in tutto il sito. Questo è necessario perchè JQuery Mobile permette di inserire contemporaneamente più pagine all’interno dello stesso DOM. La navigazione AJAX viene gestita in modo differente rispetto ad HTML5 standard.
Vedi il codice in azione! >
Il mio sito ufficiale >
