Los eventos táctiles también funcionan en computadoras de escritorio: ¡ toca y desliza con el mouse!.
jQuery Mobile Tap
El evento tap se dispara cuando el usuario toca un elemento.
El siguiente ejemplo dice: Cuando un evento de tap se dispara en un elemento <p>; ocultar el elemento <p> actual:
$("p").on("tap",function(){
$(this).hide();
});
$(this).hide();
});
jQuery Mobile Taphold
El evento taphold se activa cuando el usuario toca un elemento y lo mantiene presionado durante un segundo:
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#pageone",function(){
$("p").on("taphold",function(){
$(this).hide();
});
});
</script>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>El tap Event</h1>
</div>
<div data-role="main" class="ui-content">
<p>Si me tocas y mantienes presionado por un segundo, Desaparezco.</p>
<p>Tocame y presioname por un segundo!</p>
<p>a mi tambien!</p>
</div>
<div data-role="footer">
<h1>Pie de pagina</h1>
</div>
</div>
</body>
</html>
Resultado:
Al presionar por un segundo el primer párrafo
jQuery Mobile Swipe
El evento de deslizamiento se activa cuando el usuario mueve un elemento horizontalmente más de 30px:
$("p").on("swipe",function(){
$("span").text("Swipe detected!");
});
$("span").text("Swipe detected!");
});
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#pageone",function(){
$("p").on("swipe",function(){
$("span").text("Swipe detected!. Arrastraste horizontalmente");
});
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>El Swipe Event</h1>
</div>
<div data-role="main" class="ui-content">
<p>Arrastra este texto horizontalmente o arrastra en la caja.</p>
<p style="border:1px solid black;height:200px;width:200px;"></p>
<p><span style="color:red"></span></p>
</div>
<div data-role="footer">
<h1>Pie de pagina</h1>
</div>
</div>
</body>
</html>
Resultado:
Al intentar arrastrar en el cuadro:
jQuery Mobile Swipeleft
El evento swipeleft se activa cuando el usuario desliza sobre un elemento en la dirección izquierda más de 30px:
Ejemplo
$("p").on("swipeleft",function(){
alert("You swiped left!");
});
Swiperight móvil jQuery
El evento Swiperight se activa cuando el usuario arrastra un elemento a la derecha en más de 30px:
Ejemplo
$("p").on("swiperight",function(){
alert("You swiped right!");
});
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#pageone",function(){
$("p").on(
"swipeleft",function(){
alert("Arrastraste a la izquierda!");
});
$("p").on(
"swiperight",function(){
alert("Arrastraste a la derecha!");
});
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>El Evento Swipe izq y derecho</h1>
</div>
<div data-role="main" class="ui-content">
<p>Arrastra este texto horizontalmente o arrastra en la caja.</p>
<p style="border:1px solid black;height:200px;width:200px;"></p>
<p><span style="color:red"></span></p>
</div>
<div data-role="footer">
<h1>Pie de pagina</h1>
</div>
</div>
</body>
</html>
Resultado:
