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.
Finestre di dialogo
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.
