Brainleaf
Web Resources

JQuery Mobile

Nel precedente articolo "JQuery Mobile - Gruppi di Bottoni (una prima struttura di WebApp)" abbiamo trattato l'implementazione dei gruppi di bottoni per creare dei menu. Ora vedremo come rendere più gradevole il passaggio da una pagina all'altra inserendovi degli effetti di transizione. Come avremo modo di vedere nel dettaglio gli effetti di transizione offerti da JQuery Mobile sono molti e non c'è che da scegliere quale, a seconda del nostro gusto, più ci aggrada. Nel corso di questo tutorial avremo modi di usarle praticamente tutte, così da vederle in azione una per una.


Approfittiamo di questa occasione per creare allo stesso tempo il menu principale della nostra app al quale inseriremo per ogni voce un diverso effetto di transizione tra le pagine.

Per inserire una page transition si dovrà quindi aggiungere al link (sia esso bottone o meno) l'attributo data-transition="nome dell'effetto di transizione"

Gli effetti di transizione utilizzabili sono:
fade pop flip turn flow slidefade slide slideup slidedown

Quindi nel caso in cui volessimo inserire una transizione di tipo FADE il codice da usare sarà: data-transition="fade"
Qualora volessimo invece usare l'effetto di transizione slideup useremmo: data-transition="slideup"

Il team di JQuery Mobile ci mette però in guardia sull'uso degli effetti di transizione tra le pagine in quanto sembrano essere supportati solo dai browser di ultimissima generazione e ovviamente non tutti, soprattutto in quanto a volte richiedono il supporto del 3D. L'unico modo è testare.
Vediamo quindi come inserirli in pratica nel menu della nostra app. Ecco il codice:

	<div data-role="controlgroup">
		<a href="#pagina1" data-role="button" data-icon="home" data-transition="fade">Home</a>
		<a href="#pagina3" data-role="button" data-icon="arrow-r" data-transition="pop">Portfolio</a>
		<a href="#pagina4" data-role="button" data-icon="arrow-r" data-transition="flip">Booking</a>
		<a href="#pagina5" data-role="button" data-icon="arrow-r" data-transition="turn">Contacts</a>
		<a href="/map.html" data-role="button" data-icon="arrow-r" data-transition="slideup">Find Us</a>
		</div>

Il codice appena mostrato si riferisce solo al controlgroup relativo al menu e dovrà essere inserito nel content della seconda pagina, al fineche compaia nel corpo di questa. Così facendo avremo inserito un primo contenuto nelle pagine della nostra app. Al fine di rendere il prodotto più omogeneo (per quanto sia possibile utilizzando effetti di transizioni tra le pagine sempre diversi) e per provare ogni possibilità ho anche aggiunto delle transizioni ai bottoni in header e footer.
Ecco il codice completo della pagina:

<!DOCTYPE html> 
<!-- JQueryMobile TUTORIAL by BRAINLEAF.EU -->
<!-- Released under GPL License - You can use this code as you want -->
<!-- (c) 2012 by BRAINLEAF Communication -->
	<head> 
	<title>TheHatter</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="pagina1">

	<!-- APRO L'HEADER DELLA PRIMA PAGINA -->
	<div data-role="header">
		<a href="#pagina1" data-icon="home" data-iconpos="notext" data-transition="flow">Home</a>
		<h1>TheHatter</h1>
		<a href="#pagina2" data-icon="grid" data-transition="slidefade">Menu</a>
	</div>
	<!-- CHIUDO HEADER -->

	<!-- APRO IL CONTENT DELLA PRIMA PAGINA -->
	<div data-role="content">
	</div>
	<!-- CHIUDO CONTENT -->
	
	<!-- APRO IL FOOTER DELLA PRIMA PAGINA -->
	<div data-role="footer" data-position="fixed" style="text-align:center;">
		<div data-role="controlgroup" data-type="horizontal">
		<a href="#pagina1" data-role="button" data-rel="back" data-icon="back" data-transition="slide">Back</a>
		<a href="#pagina5"  data-role="button"  data-icon="star" data-transition="slidedown">Contact</a>	
		<a href="/map.html" data-role="button" data-icon="arrow-r" data-transition="slideup">Find Us</a>	
		</div>
	</div>
	<!-- CHIUDO FOOTER -->
	
</div>
<!-- CHIUDO LA PRIMA PAGINA -->

<!-- ############################################################################################ -->

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

	<!-- APRO L'HEADER DELLA SECONDA PAGINA -->
	<div data-role="header">
		<a href="#pagina1" data-icon="home" data-iconpos="notext" data-transition="flow">Home</a>
		<h1>TheHatter</h1>
		<a href="#pagina2" data-icon="grid" data-transition="slidefade">Menu</a>
	</div>
	<!-- CHIUDO HEADER -->

	<!-- APRO IL CONTENT DELLA SECONDA PAGINA -->
	<div data-role="content">
		<div data-role="controlgroup">
		<a href="#pagina1" data-role="button" data-icon="home" data-transition="fade">Home</a>
		<a href="#pagina3" data-role="button" data-icon="arrow-r" data-transition="pop">Portfolio</a>
		<a href="#pagina4" data-role="button" data-icon="arrow-r" data-transition="flip">Booking</a>
		<a href="#pagina5" data-role="button" data-icon="arrow-r" data-transition="turn">Contacts</a>
		<a href="/map.html" data-role="button" data-icon="arrow-r" data-transition="slideup">Find Us</a>
		</div>
	</div>
	<!-- CHIUDO CONTENT -->
	
	<!-- APRO IL FOOTER DELLA SECONDA PAGINA -->
	<div data-role="footer" data-position="fixed" style="text-align:center;">
		<div data-role="controlgroup" data-type="horizontal">
		<a href="#pagina1" data-role="button" data-rel="back" data-icon="back" data-transition="slide">Back</a>
		<a href="#pagina5"  data-role="button"  data-icon="star" data-transition="slidedown">Contact</a>	
		<a href="/map.html" data-role="button" data-icon="arrow-r" data-transition="slideup">Find Us</a>	
		</div>
	</div>
	<!-- CHIUDO FOOTER -->
	
</div>
<!-- CHIUDO LA SECONDA PAGINA -->

<!-- ############################################################################################ -->

<!-- APRO LA TERZA PAGINA -->
<div data-role="page" id="pagina3">

	<!-- APRO L'HEADER DELLA TERZA PAGINA -->
	<div data-role="header">
		<a href="#pagina1" data-icon="home" data-iconpos="notext" data-transition="flow">Home</a>
		<h1>TheHatter</h1>
		<a href="#pagina2" data-icon="grid" data-transition="slidefade">Menu</a>
	</div>
	<!-- CHIUDO HEADER -->

	<!-- APRO IL CONTENT DELLA TERZA PAGINA -->
	<div data-role="content">
	</div>
	<!-- CHIUDO CONTENT -->
	
	<!-- APRO IL FOOTER DELLA TERZA PAGINA -->
	<div data-role="footer" data-position="fixed" style="text-align:center;">
		<div data-role="controlgroup" data-type="horizontal">
		<a href="#pagina1" data-role="button" data-rel="back" data-icon="back" data-transition="slide">Back</a>
		<a href="#pagina5"  data-role="button"  data-icon="star" data-transition="slidedown">Contact</a>	
		<a href="/map.html" data-role="button" data-icon="arrow-r" data-transition="slideup">Find Us</a>	
		</div>
	</div>
	<!-- CHIUDO FOOTER -->
	
</div>
<!-- CHIUDO LA TERZA PAGINA -->

<!-- ############################################################################################ -->

<!-- APRO LA QUARTA PAGINA -->
<div data-role="page" id="pagina4">

	<!-- APRO L'HEADER DELLA QUARTA PAGINA -->
	<div data-role="header">
		<a href="#pagina1" data-icon="home" data-iconpos="notext" data-transition="flow">Home</a>
		<h1>TheHatter</h1>
		<a href="#pagina2" data-icon="grid" data-transition="slidefade">Menu</a>
	</div>
	<!-- CHIUDO HEADER -->

	<!-- APRO IL CONTENT DELLA QUARTA PAGINA -->
	<div data-role="content">
	</div>
	<!-- CHIUDO CONTENT -->
	
	<!-- APRO IL FOOTER DELLA QUARTA PAGINA -->
	<div data-role="footer" data-position="fixed" style="text-align:center;">
		<div data-role="controlgroup" data-type="horizontal">
		<a href="#pagina1" data-role="button" data-rel="back" data-icon="back" data-transition="slide">Back</a>
		<a href="#pagina5"  data-role="button"  data-icon="star" data-transition="slidedown">Contact</a>	
		<a href="/map.html" data-role="button" data-icon="arrow-r" data-transition="slideup">Find Us</a>	
		</div>
	</div>
	<!-- CHIUDO FOOTER -->
	
</div>
<!-- CHIUDO LA QUARTA PAGINA -->

<!-- ############################################################################################ -->

<!-- APRO LA QUINTA PAGINA -->
<div data-role="page" id="pagina5">

	<!-- APRO L'HEADER DELLA QUINTA PAGINA -->
	<div data-role="header">
		<a href="#pagina1" data-icon="home" data-iconpos="notext" data-transition="flow">Home</a>
		<h1>TheHatter</h1>
		<a href="#pagina2" data-icon="grid" data-transition="slidefade">Menu</a>
	</div>
	<!-- CHIUDO HEADER -->

	<!-- APRO IL CONTENT DELLA QUINTA PAGINA -->
	<div data-role="content">
	</div>
	<!-- CHIUDO CONTENT -->
	
	<!-- APRO IL FOOTER DELLA QUINTA PAGINA -->
	<div data-role="footer" data-position="fixed" style="text-align:center;">
		<div data-role="controlgroup" data-type="horizontal">
		<a href="#pagina1" data-role="button" data-rel="back" data-icon="back" data-transition="slide">Back</a>
		<a href="#pagina5"  data-role="button"  data-icon="star" data-transition="slidedown">Contact</a>	
		<a href="/map.html" data-role="button" data-icon="arrow-r" data-transition="slideup">Find Us</a>	
		</div>
	</div>
	<!-- CHIUDO FOOTER -->
	
</div>
<!-- CHIUDO LA QUINTA PAGINA -->

</body>
</html>

LIVE DEMO DEL CODICE

Come avrete notato (fin dall'articolo precedente) tra le voci di menu ce n'è una che punta ad un file di nome map.html che ancora non abbiamo creato. A questi link aggiungeremo, nel prossimo articolo, un attributo in grado di richiamare le pagine come finestre di dialogo. Solo a quel punto creeremo il file, con i suoi contenuti, nel quale inseriremo una mappa di Google.

LIVE DEMO DEL CODICE

Joomla SEF URLs by Artio