Lezione #id-jqmobile-2013-0003#

JQuery Mobile fornisce effetti di transizione applicabili all’apertura di nuove pagine o all’invio da un form di dati.

Vediamo il seguente codice:

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/jquery.mobile-1.3.2.min.js"></script>
	
	<style type="text/css"> 
	table { width:100%; border-spacing: 0; }
	th { text-align:left; }
	th h3 { margin:.6em 0 .6em .5em; }
	th, td { vertical-align:top; border-top:1px solid #eee; padding: 1px 3px; background-color:#fcfcfc; }
	td .ui-btn { margin:.4em 0 .5em 0; }
	td .ui-btn-inner { padding: .4em 15px; }
	</style>
	
</head>
<body>

<table margin="0">
    <tbody><tr>
        <th><h3>fade</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="fade" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>pop</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="pop" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="pop" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>flip</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flip" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="flip" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>turn</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="turn" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="turn" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>flow</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flow" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="flow" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>slidefade</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidefade" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="slidefade" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>slide</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slide" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="slide" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>slideup</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slideup" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="slideup" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>slidedown</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="slidedown" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>none</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="none" data-inline="true">page</a></td>
    </tr>
</tbody></table>


</body>

</body>
</html>

Vedi il codice in azione! >

Prendiamo in considerazione la riga:

data-transition="slide"

Al tag HTML – href – possiamo assegnare un attributo per le transizioni con il valore:
data-transition=”fade” -> dissolvenza
data-transition=”pop” -> comparsa
data-transition=”flip” -> capovolgi
data-transition=”turn” -> svolta pagina
data-transition=”flow” -> la finestra si rimpicciolisce ed esce
data-transition=”slidefade” -> diapositiva + dissolvenza
data-transition=”slide” -> diapositiva da destra a sinistra
data-transition=”slideup” -> diapositiva verso l’alto
data-transition=”slidedown” -> diapositiva verso il basso
data-transition=”none” -> nessuna transizione

Attenzione! Per vedere tutte le transizioni il browser in uso deve supportare le trasformazioni 3D altrimenti ogni tipo transizione sarà rappresentata con la dissolvenza “fade”.

Il mio sito ufficiale >