Brainleaf
Web Resources

Jquery Mobile

Siamo arrivati al punto di iniziare a creare qualcosa di più corposo rispetto ad una pagina bianca. Abbiamo già visto come  più pagine nello stesso file e come inserirvi un Header e Footer bloccati alle estremità della pagina al fine di dare al nostro prodotto l’aspetto di una app nativa.
Oggi vedremo anche come inserire, sempre all’interno di questi due elementi immancabili, alcuni bottoni cliccabili.

Questa occasione ci servirà da spunto per introdurre appunto il concetto di link e bottone, cose che in Jquery Mobile possono essere sfruttate in modo abbastanza performante.


Passiamo subito al lato pratico, aprendo il nostro ultimo file creato, quello con due pagine all’interno delle quali una con il footer bloccato e l’altra invece no.
La prima modifica che faremo sarà quella di inserire ai lati dell’header della pagina due bottoni, il primo (posizionato a sinistra dell’header) che avrà la funzione “back”, ovvero quella di rispedirci alla pagina precedente; il secondo (posizionato a destra dell’header) invece sarà un semplice bottone che ci guiderà verso la home (ovvero la nostra prima pagina). Inseriremo questi due pulsanti in entrambi gli header delle due pagine.

Vediamo come fare, ecco un po' di codice:

<!-- APRO L'HEADER DELLA PRIMA PAGINA -->
<div data-role="header">
   <a href="#home" data-rel="back">Back</a>
   <h1>My App</h1>
   <a href="#home">Home</a>
</div>
<!-- CHIUDO HEADER -->

N.B.: La modifica appena presentata deve essere ripetuta in entrambi gli header che abbiamo nel file.

VEDI ESEMPIO LIVE DELLA PAGINA

Come è possibile vedere dal codice, inserendo un semplice link nell’header o nel footer della pagina, questo viene automaticamente trasformato in un bottone con tanto di sfondo e bordi stondati. Vedremo nei prossimi articoli il perché di questo comportamento. La seconda cosa da notare è la funzione data-rel="back" che istruisce il browser al fine di farlo tornare alla pagina precedente. Come noterete, nel bottone, oltre alla funzione back, ho anche inserito un link comune che rimanda ad una pagina specifica. Questo è necessario in quanto soltanto i browser più avanzati interpretano correttamente la funzione data-rel="back", così ho inserito un link che possa funzionare da sostituto.

Per questo articolo è tutto, nei prossimi approfondiremo il discorso su link, bottoni, icone e menu, iniziando a creare una pagina di navigazione per la nostra web app.

Di seguito troverete il codice di tutta la 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">
	<a href="#home" data-rel="back">Back</a>
		<h1>My App</h1>
	<a href="#home">Home</a>
	</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<br>
		In questa pagina il footer è bloccato con la proprietà "fixed"</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" data-position="fixed">
		<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">
	<a href="/index.html" data-rel="back">Back</a>
	<h1>My App</h1>
	<a href="#home">Home</a>
	</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<br>
		In questa pagina il footer non è "fixed"</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>
Joomla SEF URLs by Artio