Brainleaf
Web Resources

Jquery Mobile

Fino ad ora ci siamo limitati a conoscere il modo di impostare una pagina basilare e abbiamo visto come poterne inserire più d'una all'interno dello stesso file. Abbiamo anche già incontrato alcuni elementi propri di Jquerymobile come l'header e il footer delle pagine, ma ci siamo limitati ad usarli in modo estremamente semplice ed elementare. In questo articolo vedremo invece come utilizzarli per ottenere una pagina che assomigli il più possibile a quelle di un'applicazione nativa.


Non che quanto sto per esporvi sia da considerarsi una pratica obbigatoria, ma è seplicemente un modo per esporre una caratteristica di questi due elementi (header e footer) che possiamo utilizzare.
Come ormai sappiamo le barre header e footer vengono richiamate nella pagina rispettivamente con i tag <div data-role="header"> e <div data-role="footer">.
A questi tag possiamo però aggiungere un attributo in grado di fermarne il movimento e dare l'impressione all'utente di avere a che fare con un'applicazione nativa.
Per quanto riguarda l'header possiamo anche tralasciare questa pratica, cosa che invece non faremo per il footer.
L'attributo da utilizzare è data-position="fixed" che va aggiunto al tag che vogliamo "fissare" nella pagina.
Il nostro footer diverrà quindi:
<div data-role="footer" data-position="fixed">

Adesso non dovrete far altro che provare ad utilizzare questa funzione su uno dei vostri file, magari inserendo questa tecnica soltanto in una delle due pagine già create, così da vederne la differenza.

VEDI ESEMPIO PRATICO DI UTILIZZO*

* Nella pagina di esempio allegata, potrete vedere la differenza tra le due diverse soluzioni.
Nella prima pagina potrete vedere in azione un footer fixed, mentre la seconda è stata lasciata con un footer che si alza e si abbassa in base al contenuto della pagina.

Ecco il codice della pagina di esempio:

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


Nel prossimo articolo vedremo come inserire alcuni elementi per la navigazione all'interno dei nostri header e footer, trasformandoli praticamente in due menu.

Joomla SEF URLs by Artio