Aprende a brindar soporte táctil para jQuery UI fácilmente.

Cómo utilizar las funciones de jQuery UI en dispositivos móviles (táctiles) con jQuery UI Touch Punch

jQuery UI es sin duda una de las primeras bibliotecas en las que todos los desarrolladores piensan y confían para implementar fácilmente funciones de interacción con el usuario, como el cambio de tamaño dinámico de elementos, elementos que se pueden arrastrar, ordenables y desplegables.

Sin embargo, aunque hay más ventajas que desventajas, una de las debilidades más conocidas del marco es que no ofrece soporte para dispositivos táctiles móviles. Para alguien que espera tal comportamiento como predeterminado porque jQuery es ampliamente conocido, probablemente se sentirá decepcionado después de implementar jQuery UI en todo el proyecto y después de descubrir que su aplicación no funciona bien en dispositivos móviles. Afortunadamente, hay personas que pensaron en este problema y decidieron trabajar en una solución. Estamos hablando del proyecto jQuery UI Touch Punch, funciona mediante el uso de eventos simulados para asignar eventos táctiles a sus análogos de eventos de mouse. Simplemente incluya el script en su página y sus eventos táctiles se convertirán en sus eventos de mouse correspondientes a los cuales jQuery UI responderá como se esperaba.

En este artículo, te mostraremos cómo agregar soporte táctil para múltiples componentes de jQuery UI fácilmente agregando solo una biblioteca adicional.

1. Incluye jQuery UI Touch Punch

Para agregar soporte táctil, solo necesitará una copia del jQuery UI Touch Punch distribuible. Puede obtener una copia del script descargando el desarrollo o la versión minificada del repositorio en Github. Luego inclúyalo después de la fuente de jQuery UI y eso es todo:

<!-- 1. jQuery UI -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>

<!-- 2. Incluir touch punch -->
<script src="jquery.ui.touch-punch.min.js"></script>

Después de incluir el archivo, el soporte táctil se agregará automáticamente a jQuery UI. Para obtener más información sobre esta biblioteca, visite el repositorio oficial en Github o el sitio web oficial aquí . La biblioteca tiene doble licencia bajo las licencias MIT o GPL Versión 2 y, por lo tanto, es de uso, modificación y / o distribución de libre uso, pero si incluye Touch Punch en otros paquetes de software o complementos, incluya una atribución al software original y un enlace. al sitio web de Touch Punch.

2. Usando el complemento

Como se mencionó, solo incluir el complemento hará que tu código de interfaz de usuario de jQuery habitual funcione en dispositivos táctiles. Entre las capacidades táctiles admitidas, puede encontrar cambiables de tamaño, desplegables, deslizadores, acordeones, seleccionables, etc.

Que te diviertas ❤️!


Ingeniero de Software Senior en EPAM Anywhere. Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores