jQuery Mobile Archives - Page 2 of 2 - Appunti e tutorial su front-end web technology

jQuery Mobile: navigazione con swipe

Dec 052012

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.

jQuery Mobile: form ajax+php

jQuery Mobile No Responses »

Dec 022012

una seconda possibilità di gestire i form in jQuery Mobile è adottare delle soluzioni one page basandosi su ajax.

Per fare questo proveremo una pagina di lgoin con ritorno al form se la login fallisce oppure visualizzazione di un’altra pagina se la login va a buon fine.

Partiamo con le classiche intestazioni:


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

In seguito creiamo la pagina di login con uno span dove eventualmente inserire il messaggio di errore:


<div data-role=”page” id=”login”>
<div data-role=”header”>
<h1>My Title</h1>
</div>
<span id=”error”></span>
<form id=”login_user” data-ajax=”false”>
<label>Email:</label>
<input type=”text” id=”email” name=”email”>
<label>Password:</label>
<input type=”text” id=”pwd” name=”pwd”>
<button type=”submit”>Submit</button>
</form>
</div>
</div>

Successivamente predisponiamo una semplicissima seconda pagina per il post login:


<div data-role=”page” id=”loginok”>
<div data-role=”header”>
<h1>My Title</h1>
</div>>
<div data-role=”content”>
<span id=”test”></span>
</div>
</div>

Passiamo alla sostanza, cioè al document.ready intercettiamo il submit del form e blocchiamo il comportamento di default:


$(document).ready(function(e) {
$(‘#login_user’).on(‘submit’, function (e) {
e.preventDefault();

In seconda battuta pre paro una variabile per il mio form e procedo con il post dei dati sulla form.php:


var $this = $(this);
$.post(
‘form.php’,
$this.serialize(),

I dati inseriti saranno passati con il metodo serialize().

La form.php è sostanzialmente “finta” ovvero è basata su un if anche se nella realtà verificherà le credenziali nel database.


<?php
$email=$_POST['email'];
$pwd=$_POST['pwd'];
if($email==’pippo@tin.it’ && $pwd==’pippo’){echo ‘ok’;}
else{echo ‘ko’;}
?>

Quindi se lo user è pippo@tin.it e la pwd pippo la login andrà a buon fine risponderà ok, viceversa la pagina risponderà ko

Andiamo a gestire la risposta:


function (str){
if(str==’ok’){
$(‘#test’).html(str);
$.mobile.changePage(‘#loginok’)
}
else{
$(‘#error’).html(‘Errore login’);
$.mobile.changePage(‘#login’)
}

Se la risposta è ok, l’utente visualizzerà la pagina in loginok, altrimenti inseriremo un messaggio nello span con id=error

e ritorneremo sulla logi.

L’esempio

jQuery Mobile usa uno schema ajax per la gestione dei form, anche se il risultato finale può sembrare meno trasparente di quello che possiamo immaginare.
Partiamo con la costruzione della nostra pagina base, ci servirà un tema, jQuery e appunto jQuery Mobile:


<head>
<title>My Page</title>
<meta charset=”UTF-8″>
<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>
</head>

Poi costruiamo la classica pagina jqm riempiendo il content con un form per il login:


<div data-role=”page” id=”login”>
<div data-role=”header”>
<h1>My Title</h1>
</div><!– /header –>
<div data-role=”content”>
<span id=”error”></span>
<form id=”login_user” action=”form2.php” method=”post”>
<label>Email:</label>
<input type=”text” id=”email” name=”email”>
<label>Password:</label>
<input type=”text” id=”pwd” name=”pwd”>
<button type=”submit”>Submit</button>
</form>
</div><!– /content –>
</div><!– /page –>

Come di consueto il form viene spedito alla pagina indicata nella action con il metodo specificato,

jqm però invierà questa richiesta con l’oggetto XmlHttpRequest come si può osservare monitorando la apgina con firebug.

A questo punto possiamo supporre che la nostra pagina form2.php verifichi le credenziali e se la login non va a buon fine rimandi alla pagina di partenza, viceversa mostri il nuovo html.

Il controllo


<?php
$email=$_POST['email'];
$pwd=$_POST['pwd'];
if($email!=’pippo@tin.it’ || $pwd!=’pippo’){header(‘location: jqm_form2.html’);exit();}
?>

E la pagina html:


<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta charset=”UTF-8″>
<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>
<script>
</script>
</head>
<body>
<div data-role=”page” id=”loginok”>
<div data-role=”header”>
<h1>My Title</h1>
</div><!– /header –>
<div data-role=”content”>
<span id=”test”>ok</span>
</div><!– /content –>
</div><!– /page –>
</body>
</html>

L’esempio

Newer Entries