arturo campos

front end developer

¿Cómo hacer funcionar jQuery UI en iOS?

| Comentarios

Recientemente me encontré en una situación interesante, necesitaba hacer funcionar una aplicación ya existente en Safari para iPad.

Gracias al seguimiento de buenas prácticas y estándares que frameworks como Twitter Bootstrap nos brindan, no fue necesario realizar cambios en cuanto a CSS se refería, sin embargo, me topé con el inconveniente de que los componentes de UI (en este caso sortable, draggable, droppable) que utilizaban jQuery UI no funcionaban adecuadamente en el iPad, y por supuesto, esto debido a que jQuery UI utiliza eventos de mouse, cuando en el iPad, hablamos de eventos touch.

Debido a esta situación emprendí la tarea de buscar una solución.

En primera instancia, opté por tratar de crear mis propios handlers para los eventos touch. Luego probé con un script (cuyo nombre y ubicación no recuerdo) que de cierto modo “simulaba” los eventos de mouse en el iPad, pero fue un fracaso.

Para mi fortuna, al final encontré una pequeña librería JavaScript que solucionó todos mis problemas. Les estoy hablando de jQuery UI Touch Punch mantenida por David Furfero.

Lo que esta librería hace es que básicamente nos provee un conjunto de proxies para los eventos touch, que simulan los eventos de mouse, los cuales sí son correctamente interpretados por jQuery UI.

Así que simplemente agregué esta librería a mi aplicación y voilà, todo listo.

Les recomiendo le peguen una ojeada a la librería así como al código, siempre se puede aprender algo nuevo e interesante cuando leemos código escrito por otros.

Nota: Estoy seguro de que esto funciona en iOS, pero es muy posible que también funcione en Android!

Comentarios