Dentro de la interfaz me enfrenté al problema que lo limitado del espacio en pantalla no me permite incluir demasiados botones, y requería de una manera para eliminar ítemes de una lista en modo inset. Quise copiar un poco la interfaz de webOS (de la difunta Palm) para esto, una interfaz muy similar a la que provee iOS en el iPhone.
La idea:
- Deslizar el dedo desde izquierda a derecha para eliminar un ítem.
- Deben aparecer botones que permitan borrar el ítem o cancelar la operación de borrado.
- Al seleccionar borrar se debe confirmar la eliminación antes de hacerla efectiva.
El código y el ejemplo:
Observaciones:
La variable onswipe marca como activa la acción de eliminación. Si se está eliminando un item, no se podrán eliminar otro.
Una vez que se hacen aparecer los botones para la eliminación es necesario desactivar los eventos tap y click sobre el ítem de la lista, sino va a tomar la acción por defecto y los botones no van a poder capturar el evento de click sobre ellos.
Se ha utilizado la etiqueta "button" en vez de "a" (para enlaces) para evitar que el framework aplique los estilos de lista (en este caso lista tipo inset).
Está probado en Android y en iOS y funciona. Seguramente alguien lo va a poder mejorar.
El código toma bastantes referencias de lo discutido en https://forum.jquery.com/topic/adding-an-iphone-style-swipe-to-delete-button-to-a-listview . Lamentablemente el código original no me funcionó.
No hay comentarios.:
Publicar un comentario