En este artículo, aprenderemos cómo manejar varios eventos táctiles para el diseño de la interfaz de usuario móvil utilizando el complemento jQuery Touch Events, que se basa completamente en JavaScript. Estos son eventos adicionales que se pueden usar con jQuery que también son compatibles con aplicaciones de escritorio y aplicaciones web móviles.
Descargue el archivo precompilado requerido del enlace y guárdelo en su carpeta de trabajo para su implementación.
o
Use el siguiente enlace en la sección principal de su página web HTML
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/1.0.5/jquery.mobile-events.js
”></script>
Ejemplo 1: el siguiente código demuestra el evento de toque simple por parte del usuario que usa el complemento jQuery Touch Event .
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
"http://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script src="jquery.mobile-events.min.js">
</script>
</head>
<body>
<h2>jQuery touch events</h2>
<p id="myeventID">Touch Me!</p>
<p id="response" style="display:none">
User tapped #myeventID
</p>
<script type="text/javascript">
/*S imple tap event */
$('#myeventID').tap(function (e) {
$('#response').show();
})
</script>
</body>
</html>
Producción:
- Antes del evento táctil:
- Después del evento táctil: después del evento «¡Tócame!» se toca una vez, se muestra el siguiente resultado.
Ejemplo 2: El siguiente código demuestra los eventos de un solo toque, así como los eventos de doble toque por parte del usuario usando doble enstringmiento de funciones como se muestra a continuación.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
"http://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script src="jquery.mobile-events.min.js">
</script>
</head>
<body>
<h2>jQuery touch events</h2>
<p id="myeventID">Touch Me!</p>
<p id="response" style="display:none">
User tapped #myeventID</p>
<p id="doubletapMsg" style="display:none">
User double tapped #myeventID!</p>
<script type="text/javascript">
/* Double chaining of functions */
$('#myeventID').tap(function (e) {
console.log('User tapped #myeventID');
$('#response').show();
}).doubletap(function () {
$('#doubletapMsg').show();
})
</script>
</body>
</html>
Salida: Después del mensaje «¡Tócame!» se toca dos veces, se muestra el siguiente resultado.
Ejemplo 3: El siguiente código demuestra los eventos táctiles de inicio y fin de toque cuando el usuario toca los controles HTML.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
"http://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script src="jquery.mobile-events.min.js">
</script>
</head>
<body>
<h2>jQuery tap start and end events</h2>
<p id="myeventID">Touch Me!</p>
<script type="text/javascript">
$("#myeventID").tapstart(function (e, touch) {
console.log('tap started!');
});
$("#myeventID").tapend(function (e, touch) {
console.log('tap end!');
});
</script>
</body>
</html>
Salida: cuando el usuario toca el botón «¡Tócame!» div, se muestra el siguiente resultado.
Ejemplo 4: el siguiente código demuestra el evento de deslizamiento y los eventos finales de deslizamiento cuando el usuario desliza el control HTML.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
"http://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script src="jquery.mobile-events.min.js">
</script>
</head>
<body>
<h2>jQuery swipe events</h2>
<p id="myeventID">Touch Me!</p>
<script type="text/javascript">
$("#myeventID").swipeend(function (e, touch) {
console.log('Swipe event end!');
});
$("#myeventID").swipe(function (e, touch) {
console.log('Swiped by user!');
});
</script>
</body>
</html>
Salida: cuando el usuario desliza el texto en «¡Tócame!» div, se muestra el siguiente resultado.
Hay muchas más funciones de manejo de eventos táctiles junto con umbrales de datos y funciones de utilidad disponibles en el complemento. El desarrollador puede hacer uso de ellos según las necesidades de la aplicación.
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA