jQuery Mobile ha esteso il supporto di base di jQuery agli eventi del DOM per includere anche i nuovi eventi del mondo mobile, tra cui l'evento tap. Questo evento si innesca quando l'utente sfiora un'area attiva del touch screen del suo dispositivo. Un'altra caratteristica di jQuery Mobile è la possibilità di creare griglie dinamiche con cui impaginare il layout. Vediamo insieme queste due caratteristiche.
La griglia è subito disponibile non appena usiamo questa marcatura:
<div data-role="page" data-theme="b" id="jqm-home">
<div data-role="header">
<h1>Esempio</h1>
</div>
<div data-role="content">
<p>Lorem ipsum dolor sit amet.</p>
<div class="ui-grid-d">
<div class="ui-block-a">
<a data-role="button" id="btn1" data-theme="b">Bottone 1</a>
</div>
<div class="ui-block-b">
<a data-role="button" id="btn2" data-theme="b">Bottone 2</a>
</div>
<div class="ui-block-c">
<a data-role="button" id="btn3" data-theme="b">Bottone 3</a>
</div>
<div class="ui-block-d">
<a data-role="button" id="btn4" data-theme="b">Bottone 4</a>
</div>
<div class="ui-block-e">
<a data-role="button" id="btn5" data-theme="b">Bottone 5</a>
</div>
</div>
<a data-role="button" id="showbtn">Mostra tutti i bottoni</a>
<ul data-role="listview" id="log"></ul>
</div>
</div>
con gli stili CSS forniti dalla libreria:
<head>
<link rel="stylesheet" href="files/jquery.mobile-1.0.min.css" />
</head>
A questo punto possiamo usare il metodo bind() per intercettare l'evento tap su ciascun bottone. Tuttavia, per consentire anche agli utenti di normali computer di usufruire della versione mobile del nostro sito, useremo anche l'evento click. Infatti non è raro che alcune categorie di utenti usino la versione mobile di un sito anche sul loro computer (per esempio quegli utenti con problemi visivi o altre disabilità).
Ecco i nostri test, che intercettano l'evento usato e lo inviano all'elemento di log:
$(function(){
$('.ui-grid-d a').bind('tap click', function(e){
$(this).hide();
$('#log')
.prepend('<li>evento: '+ e.type +' target: '+ e.target.nodeName +'; messaggio: griglia ' +$(this).text()+ ' nascosta</li>')
.listview('refresh');
e.preventDefault();
}).bind('tap click', false);
$('#showbtn').bind('tap click', function(e){
$('.ui-grid-d a').show();
$('#log')
.prepend('<li>evento: '+ e.type +' target: '+ e.target.nodeName +'; messaggio: mostra tutti i bottoni</li>')
.listview('refresh');
}).bind('tap click', false);
});
Potete visionare gli esempi di seguito.