Brainleaf
Web Resources

JQuery Mobile

Nel precedente articolo articolo abbiamo trattato l’uso dei tag data-role=”button” e data-role=”icon” che JQuery Mobile ci mette a disposizione. In questo articolo vedremo invece come creare dei gruppi di bottoni che possono rivelarsi estremanete utili ed efficaci per creare dei menu. Fino ad ora abbiamo visto come inserire bottoni nell’header e nel footer della pagina o come inserire dei link all’interno del contenuto della pagina.

Questi sistemi sono utili per poterci fornire un immediato supporto per la navigazione, ma durante lo sviluppo di una web app adatta a dispositivi mobili di piccole dimensioni, come per esempio quelli degli smartphone, non è possibile inserire dei menu con un elevato numero di link nella stessa pagina dove inseriamo dei contenuti e pensare che questi siano intuitivamente raggiungibili, come avviene in schermi di grandi dimensioni. è per questo che personalmente consiglio l’implementazione di una pagina apposita per il menu principale di navigazione. In questo articolo inizieremo quindi a strutturare una web app vera e propria partendo proprio dalla creazione di un menu di navigazione.

La web app che stiamo per scrivere è la simulazione di un piccolo sito web adatto a dispositivi mobili di piccole dimensioni.
Il sito sarà composto da cinque pagine, tutte inserite nello stesso file, che serviranno da vetrina per un’ipotetica agenzia di organizzazione eventi.
Il nome che daremo al file unico che conterrà tutto il sito sarà, per ovvie ragioni, il classico “index.html”
Quindi aprite il vostro blocco note e salvate un nuovo file con il nome index.php
A questo punto inseriamo una classica apertura html con un altrettanto classico head che conterrà i link a JQuery Mobile.

<!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>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> 

Continuiamo poi con la stesura delle cinque pagine che comporranno il sito che stiamo sviluppando. Per il momento ci limiteremo a definire le pagine e ad inserirci all’interno di ognuna i tre elementi base: header, content e footer.
Ecco il codice per la struttura del sito in cinque pagine

<!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> 
<!-- APRO LA PRIMA PAGINA -->
<div data-role="page" id="pagina1">

	<!-- APRO L'HEADER DELLA PRIMA PAGINA -->
	<div data-role="header">
	</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">
	</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">
	</div>
	<!-- CHIUDO HEADER -->

	<!-- APRO IL CONTENT DELLA SECONDA PAGINA -->
	<div data-role="content">
	</div>
	<!-- CHIUDO CONTENT -->
	
	<!-- APRO IL FOOTER DELLA SECONDA PAGINA -->
	<div data-role="footer">
	</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">
	</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">
	</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">
	</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">
	</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">
	</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">
	</div>
	<!-- CHIUDO FOOTER -->
	
</div>
<!-- CHIUDO LA QUARTA PAGINA -->

</body>
</html>

 

A questo punto è necessario spiegare come intendo strutturare il sito al fine di poter creare il menu oggetto di questo articolo. Il sito sarà dunque strutturato in questo modo:

  • Pagina 1: Home Page con un saluto introduttivo
  • Pagina 2: Menu Generale
  • Pagina 3: Portfolio
  • Pagina 4: Booking
  • Pagina 5: Contatti
  • Pagina Extra (file indipendente che richiameremo come finestra di dialogo): Mappa

Le pagine da 1 a 5 conterranno tutte un header ed un footer in posizione fissa all'interno dei quali inseriremo alcuni link. Nell'header di ogni pagina inseriremo due link uno a sinistra del titolo che riporterà alla home (Pagina 1) e il secondo, a destra del titolo, ci porterà alla pagina di menu (Pagina 2).
Nel footer inseriremo invece un gruppo di tre bottoni: il primo avrà la funzione di back, ovvero che ci riporterà alla pagina precedentemente visitata; il secondo sarà un link per i contatti (Pagina 5);  l'ultimo richiamerà invece la mappa (Pagina Extra).
Vediamo quindi come realizzare i due elementi header e footer prestando molta attenzione alla creazione dei GRUPPI DI BOTTONI che sono l'oggetto principale di questo articolo

Header e Footer delle pagine - mettiamo all'opera un primo Gruppo di Bottoni

Come abbiamo visto nell'articolo relativo all'inserimento dei link nell'header e nel footer, per creare un bottone all'interno di queste barre non è necessario utilizzare il tag data-role="button" in quanto JQuery Mobile interpreterà qualsiasi link come fosse un bottone.
Per quanto riguarda l'header della pagina ricordiamo che in questa barra è possibile inserire solo due link in linea con il titolo. Per ora quindi ci limiteremo ad inserirvi soltanto il titolo e i due link alle pagine indicate poco sopra.

Di seguito il codice per inserire i link in header
(questa parte di codice va ripetuta all'interno dell'header di ogni pagina) 

<a href="#pagina1" data-icon="home" data-iconpos="notext">Home</a>
<h1>TheHatter</h1>
<a href="#pagina2" data-icon="grid">Menu</a>

Bottone formato dalla sola Icona

Come avete potuto notare dal codice, nel link di rimando alla home page sia stato inserito l’attributo data-iconpos="notext" che ha come risultato quello di nascondere il testo del bottone, mantenendone visibile soltanto l’icona.

Il Footer

Passando al footer delle pagine, come già detto, in questa parte della pagina andremo ad inserire un primo gruppo di bottoni. Questa possibilità che ci offre JQuery Mobile ci permette di raggruppare alcuni bottoni creando un corpo grafico unico, molto spesso preferibile al semplice affiancamento di bottoni singoli.

Gruppi di Bottoni (sintassi d'uso)

Per creare un gruppo di bottoni sara sufficiente creare un div con specificato l'attributo data-role="controlgroup"  all'interno del quale inseriremo quanti link vogliamo, ovviamente con specificato il loro data-role="button".
I gruppi di bottoni sono per default verticali, ovverao allineano i bottoni uno sopra l'altro, come in una lista, ma è possibile anche far sì che si allineino uno a fianco dell'altro. Questo risultato è possibile ottenerlo aggiungendo l'attributo data-type="horizontal" al div principale del gruppo.
Le sintassi per un gruppo di bottoni verticale e orizzontale sono le seguenti:

<!-- GRUPPO DI BOTTONI VERTICALE -->
<div data-role="controlgroup">
<a href="#" data-role="button" data-icon="star">Button1</a>
<a href="#" data-role="button" data-icon="star">Button2</a>	
<a href="#" data-role="button" data-icon="star">Button3</a>	
</div>

<!-- GRUPPO DI BOTTONI ORIZZONTALE -->
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-icon="star">Button1</a>
<a href="#" data-role="button" data-icon="star">Button2</a>	
<a href="#" data-role="button" data-icon="star">Button3</a>	
</div>

Applicando quanto appena detto a proposito dei gruppi di bottoni, vediamo ora come utilizzarli all'interno del footer che stiamo inserendo nelle pagine della app.
(Come ricordato per l'header, anche questo codice deve essere ripetuto all'interno di ogni footer)

<div data-role="controlgroup" data-type="horizontal">
	<a href="#pagina1" data-role="button" data-rel="back" data-icon="back" >Back</a>
	<a href="#pagina5"  data-role="button"  data-icon="star" >Contact</a>	
	<a href="/map.html" data-role="button" data-icon="arrow-r" >Find Us</a>	
</div>

Come avete visto in questo caso, anche se ci troviamo nel footer è stato necessario inserire l’attributo data-role=”button” al fine di far interpretare il link come bottone, cosa che altrimenti non sarebbe accaduta. Ricordate di copiare il codice del footer in ogni pagina.

Eccoci arrivati finalmente alla fine di questo articolo, ora non resta che dedicarci ai contenuti delle pagine. Nel prossimo articolo ci occuperemo della realizzazione della pagina di menu, utilizzando per i link gli effetti di transizione che JQuery Mobile mette a disposizione.
 Vi lascio il codice completo della pagina e un link per vederla dal vivo in azione.

<!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">Home</a>
		<h1>TheHatter</h1>
		<a href="#pagina2" data-icon="grid">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" >Back</a>
		<a href="#pagina5"  data-role="button"  data-icon="star" >Contact</a>	
		<a href="/map.html" data-role="button" data-icon="arrow-r" >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">Home</a>
		<h1>TheHatter</h1>
		<a href="#pagina2" data-icon="grid">Menu</a>
	</div>
	<!-- CHIUDO HEADER -->

	<!-- APRO IL CONTENT DELLA SECONDA PAGINA -->
	<div data-role="content">
	</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" >Back</a>
		<a href="#pagina5"  data-role="button"  data-icon="star" >Contact</a>	
		<a href="/map.html" data-role="button" data-icon="arrow-r" >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">Home</a>
		<h1>TheHatter</h1>
		<a href="#pagina2" data-icon="grid">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" >Back</a>
		<a href="#pagina5"  data-role="button"  data-icon="star" >Contact</a>	
		<a href="/map.html" data-role="button" data-icon="arrow-r" >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">Home</a>
		<h1>TheHatter</h1>
		<a href="#pagina2" data-icon="grid">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" >Back</a>
		<a href="#pagina5"  data-role="button"  data-icon="star" >Contact</a>	
		<a href="/map.html" data-role="button" data-icon="arrow-r" >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">Home</a>
		<h1>TheHatter</h1>
		<a href="#pagina2" data-icon="grid">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" >Back</a>
		<a href="#pagina5"  data-role="button"  data-icon="star" >Contact</a>	
		<a href="/map.html" data-role="button" data-icon="arrow-r" >Find Us</a>	
		</div>
	</div>
	<!-- CHIUDO FOOTER -->
	
</div>
<!-- CHIUDO LA QUINTA PAGINA -->

</body>
</html>

DEMO DELLA PAGINA

Joomla SEF URLs by Artio