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.
