jQuery Mobile: navigazione con swipe

Una cosa che potrebbe essere interessante è un sistema di navigazione frapagine basato su swipe, levento che siamo abituati a compiere sui nostri dispositivi touch.

Breve nota: si distingue dal tap perché è prolungato, come trascinaento, su almento 30px.

Potermmo usare questo sistemap er scorrere avanti le pagine, oppure indietro a seconda che lo swipe sia verso sinistra o verso destra.

Come prima cosa abbiamo bisogno di 3 padine, sempre all’interno dello stesso file dove avremo la solita intestazione:

<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css” />
<script src=”http://code.jquery.com/jquery-1.8.2.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js”></script>

Le nostre 3 pagine, ovviamente banalissime, ciascuna con il suo id e tutte della classe .pagine

<div data-role=”page” id=”page1″>
<div data-role=”header”>
<h1>Page 1</h1>
</div>
<div data-role=”content”>
<p>Page 1</p>
</div>
</div>
<div data-role=”page” id=”page2″>
<div data-role=”header”>
<h1>Page 2</h1>
</div>
<div data-role=”content”>
<p>Page 2</p>
</div>
</div>
<div data-role=”page” id=”page3″>
<div data-role=”header”>
<h1>Page 3</h1>
</div>
<div data-role=”content”>
<p>Page 3</p>
</div>
</div>

Passiamo alla gestione degli eventi al $(document).ready(function()

prima cosa il bind, usando il metodo on dell’evento:

$(‘.pagine’).on(‘swipeleft’,function(event)

pertanto alla classe .pagine andiamo ad “attaccare” l’evento swipeleft

a questo punto dobbiamo sapere qul è la prossima pagina a partire  da quella corrente:



var nextpage = $(‘.ui-page-active’).next(‘.pagine’).attr(‘id’);

e ne ricaviamo l’id.

Ora possiamo spoastarci:

$.mobile.changePage(‘#’+nextpage, {    transition: “turn”})

aggiungendo anche un piccolo tocco con una transizione per segnalre che lo si può, ovviamente, fare.

Il movimento nell’altro verso è speculare:

$(‘.pagine’).on(‘swiperight’,function(event){
var prevpage = $(‘.ui-page-active’).prev(‘.pagine’).attr(‘id’);
$.mobile.changePage(‘#’+prevpage, {    transition: “turn”})
});

Per testare l’esempio occorre accedere alla pagina con un dispositivo touch.