Brainleaf
Web Resources

Jquery Mobile

Dopo il primo articolo, dove abbiamo creato una prima pagina in JQuery Mobile, è il momento di sfruttare una caratteristica molto importante di questo framework, ovvero la possibilità di creare più pagine nello stesso file.
Durante la creazione del primo file, abbiamo incontrato il tag div data-role="page" all'interno del quale sono stati inseriti tutti i contenuti della pagina. Per poter quindi dare vita ad un numero maggiore di pagine non si dovrà far altro che ripetere questo tag per ogni nuova pagina che si intende creare.

C'è però un piccolo caveat al quale dover prestare attenzione ed è quello di dover necessariamente associare al tag data-role="page" un id specifico che lo differenzi dagli altri che verranno utilizzati nello stesso file per creare nuove pagine.

Nello specifico di questo tutorial inseriremo soltanto due pagine nello stesso file. Apriamo quindi il file che abbiamo precedentemente creato, ovvero hello-world.html e andiamo a modificarlo nel tag data-role=”page” come segue:

div data-role="page" id="home"

La modifica appena operata ci permette di dar vita ad una pagina indipendente alla quale adesso ne faremo seguire un’altra che allacceremo poi con un link alla prima.
Osservate il codice seguente:

<!DOCTYPE html> 
<!-- JQueryMobile TUTORIAL by BRAINLEAF.EU -->
<!-- You can use this code as you want -->
<html> 
	<head> 
	<title>My Page</title>
	<!-- CON LE SEGUENTI RIGHE RICHIAMO JQUERYMOBILE NELLA PAGINA -->
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head> 
<body> 

<!-- APRO LA PRIMA PAGINA -->
<div data-role="page" id="home">

	<!-- APRO L'HEADER DELLA PRIMA PAGINA -->
	<div data-role="header">
		<h1>My App</h1>
	</div>
	<!-- CHIUDO HEADER -->

	<!-- APRO IL CONTENT DELLA PRIMA PAGINA -->
	<div data-role="content">
		<h2>JQuery Mobile Tutorial</h2>
		<p>Questa &egrave; la <strong>HomePage</strong> del tutorial JQuery Mobile by BRAINLEAF Communication</p>
		<p>Vai alla pagina numero#2</p>
	</div>
	<!-- CHIUDO CONTENT -->
	
	<!-- APRO IL FOOTER DELLA PRIMA PAGINA -->
	<div data-role="footer">
		<h2>Footer</h2>
	</div>
	<!-- CHIUDO FOOTER -->
	
</div>
<!-- CHIUDO LA PAGINA -->

<!-- APRO LA SECONDA PAGINA -->
<div data-role="page" id="page-2">

	<!-- APRO L'HEADER DELLA SECONDA PAGINA -->
	<div data-role="header">
		<h1>My App</h1>
	</div>
	<!-- CHIUDO HEADER -->

	<!-- APRO IL CONTENT DELLA SECONDA PAGINA -->
	<div data-role="content">
		<h2>JQuery Mobile Tutorial</h2>
		<p>Questa &egrave; la <strong>Seconda Pagina</strong> del tutorial JQuery Mobile by BRAINLEAF Communication</p>
		<p>Torna alla HomePage</p>
	</div>
	<!-- CHIUDO CONTENT -->
	
	<!-- APRO IL FOOTER DELLA SECONDA PAGINA -->
	<div data-role="footer">
		<h2>Footer</h2>
	</div>
	<!-- CHIUDO FOOTER -->
	
</div>
<!-- CHIUDO LA PAGINA -->

</body>
</html>

 ANTEPRIMA PAGINA

Come potete intuire, nel file è stata inserita una nuova porzione di codice che definisce una seconda pagina. Nel file abbiamo ora due pagine. Se infatti salvate il file con il nome index.html e lo visualizzate con un browser vi accorgerete che però soltanto la prima pagina è visibile e ciò accade proprio perché JQuery Mobile prevede appunto questa funzione che ci permette di annidare le pagine una dietro l’altra in un unico file.

Vediamo ora come collegarle per permettere all’utente di navigare da una pagina all’altra.
La sintassi per creare un link è la stessa usata da HTML, ma qualora si tratti di un link tra pagine nello stesso file, l’url di destinazione da inserire sarà formato soltanto dall’id che abbiamo associato al tag data-role=”page” preceduto da un cancelletto.
Quindi a href=”#id-della-pagina-da-collegare”

Ecco come dovremo modificare il codice della nostra pagina:

 

<!DOCTYPE html> 
<!-- JQueryMobile TUTORIAL by BRAINLEAF.EU -->
<!-- You can use this code as you want -->
<html> 
	<head> 
	<title>My Page</title>
	<!-- CON LE SEGUENTI RIGHE RICHIAMO JQUERYMOBILE NELLA PAGINA -->
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head> 
<body> 

<!-- APRO LA PRIMA PAGINA -->
<div data-role="page" id="home">

	<!-- APRO L'HEADER DELLA PRIMA PAGINA -->
	<div data-role="header">
		<h1>My App</h1>
	</div>
	<!-- CHIUDO HEADER -->

	<!-- APRO IL CONTENT DELLA PRIMA PAGINA -->
	<div data-role="content">
		<h2>JQuery Mobile Tutorial</h2>
		<p>Questa &egrave; la <strong>HomePage</strong> del tutorial JQuery Mobile by BRAINLEAF Communication</p>
		<p><a href="#page-2">Vai alla pagina numero#2</a> </p>
	</div>
	<!-- CHIUDO CONTENT -->
	
	<!-- APRO IL FOOTER DELLA PRIMA PAGINA -->
	<div data-role="footer">
		<h2>Footer</h2>
	</div>
	<!-- CHIUDO FOOTER -->
	
</div>
<!-- CHIUDO LA PAGINA -->

<!-- APRO LA SECONDA PAGINA -->
<div data-role="page" id="page-2">

	<!-- APRO L'HEADER DELLA SECONDA PAGINA -->
	<div data-role="header">
		<h1>My App</h1>
	</div>
	<!-- CHIUDO HEADER -->

	<!-- APRO IL CONTENT DELLA SECONDA PAGINA -->
	<div data-role="content">
		<h2>JQuery Mobile Tutorial</h2>
		<p>Questa &egrave; la <strong>Seconda Pagina</strong> del tutorial JQuery Mobile by BRAINLEAF Communication</p>
		<p><a href="#home">Torna alla HomePage</a></p>
	</div>
	<!-- CHIUDO CONTENT -->
	
	<!-- APRO IL FOOTER DELLA SECONDA PAGINA -->
	<div data-role="footer">
		<h2>Footer</h2>
	</div>
	<!-- CHIUDO FOOTER -->
	
</div>
<!-- CHIUDO LA PAGINA -->

</body>
</html>

ANTEPRIMA PAGINA

Come avrete avuto modo di osservare aprendo il file con un browser, il risultato ottenuto è quello di due pagine indipendenti collegate tra loro. Per questo articolo è tutto, nel prossimo vedremo come poter agire su header e footer in modo da dare alla nostra web app l’aspetto di un’applicazione nativa.

Joomla SEF URLs by Artio