Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Finestre di Dialogo e Transizioni

Come ottenere effetti di trasizione personalizzati tra le pagine e far apparire dialog box in stile con l'applicazione
Come ottenere effetti di trasizione personalizzati tra le pagine e far apparire dialog box in stile con l'applicazione
Link copiato negli appunti

I template di pagina che abbiamo visto nelle scorse lezioni possono risultare adatti per buona parte dei contenuti del sito, ma in alcuni casi è necessario spostare l'attenzione dell'utentesu un contenuto specifico.

A questo scopo si possono realizzare delle dialog box da sovrapporre alle pagine del sito:

<a href="dove-siamo.html" data-rel="dialog">Dove siamo</a>

Come dall'esempio precedente, ogni pagina collegata ad un attributo data-rel="dialog" verrà aperta in una finestra di dialogo.

Per mantenere l'uniformità dell'interfaccia, è necessario applicare alle finestre di dialogo lo stesso markup delle pagine generiche, ma non è necessario importare CSS e file JavaScript della libreria, in quanto sarà caricato solo il contenuto del tag body:

<!DOCTYPE html>
<html>
	<head>
	<title></title>
</head>
<body>
	<div data-role="page"> 
		<div data-role="header">
			<h1><!-- titolo finestra di dialogo -->	</h1> 
		</div> 
		<div data-role="content">
			 <!-- contenuto finestra di dialogo -->
			 <a href="#" data-rel="back">Chiudi</a>
		</div>
	</div>
</body>
</html>

Per default jQuery Mobile inserisce un tasto per chiudere la finestra di dialogo nell'angolo in alto a sinistra dell'header, tuttavia è possibile realizzare questo controllo includendo un semplice link con data-rel="back", nello stesso modo in cui realizzeremmo un link back per la navigazione classica. Ecco l'esempio live.

Transizioni fra le pagine

Come avrete già notato, la transizione fra una pagina e l'altra del sito avviene con un'animazione di scorrimento da destra verso sinistra.

Questa animazione sfrutta le transizioni e le trasformazioni CSS3, risultando molto fluida e performante nei dispositivi più avanzati (ad esempio su Android e iOS), ma escludendo così tutti gli altri. In realtà le scarse risorse dei dispositivi mobile renderebbero troppo scattosa un'animazione via JavaScript compromettendo l'esperienza utente.

Transizioni personalizzate

Oltre alla transizione predefinita è possibile definire transizioni specifiche fra una pagina e l'altra e per l'apertura delle finestre di dialogo in modo da diversificare, ad esempio, il passaggio fra le sezioni del sito e le pagine di una stessa sezione.

Le transizioni disponibili sono slide (di defaut), slideup, slidedown, pop, fade e flip. Di queste, l'ultima non viene renderizzata correttamente in molti dispositivi Android che non supportano le trasformazioni CSS 3D ed è perciò consigliabile il suo utilizzo per applicazioni che supportino esclusivamente dispositivi iOS.

Sulla documentazione ufficiale del progetto sono disponibili delle dimostrazioni delle transizioni supportate. Ecco come potremmo applicarle per i link nella pagina About della nostra applicazione:

<!-- ... -->
<div data-role="page" id="about">
	<div data-role="header">
		<a href="index.html" data-rel="back">back</a>
		<h1>About</h1>
	</div><!-- /header -->
	<div data-role="content">
		<p>Benvenuti in Music Manager.</p>
		<p>...</p>
		<p>
			<!-- diversifico la transizione fra pagine interne -->
			<a href="#mission" data-transition="slideup">Mission >></a>
		</p>
		<p>
			<a href="index.html">Homepage</a>
		</p>
	</div><!-- /content -->
	<div data-role="footer">
		<h4>Credits: Marco Solazzi e <a href="http://www.html.it" target="_blank">HTML.it</a></h4>
	</div><!-- /footer -->
</div><!-- /page -->
<!-- ... -->

Se vogliamo ottenere un effetto riavvolgimento è anche possibile invertire l'andamento della transizione aggiungendo data-direction="reverse" al link in questione.

Questa caratteristica è già presente di default in tutti i pulsanti con data-rel="back" per migliorare il feedback visivo durante la navigazione del sito.

Ecco come risulta la nostra applicazione una volta personalizzate le transizioni.


Ti consigliamo anche