Listas con botones de acción en jQuery Mobile

19/May/2012 Desarrollo Móvil , , , , , , , , , , , , , , , , , , , , , , 1 Comentario

Cuando creamos una lista con jQuery Mobile, normalmente su uso será el de tener un conjunto de enlaces sobre los que podremos ejecutar la acción de navegar. Pero puede darse el caso que necesitemos que cada uno de los items de la lista tenga más de un comportamiento. Es decir que, además de poder navegar mediante los items, podamos añadir botones para ejecutar una segunda acción sobre el elemento.

Lo primero que haremos será crear una lista básica tal y como vimos en Listas de Elementos con jQuery Mobile.

  1. <ul data-role="listview" data-inset="true" data-filter="true">
  2. <li><a href="#">Espartaco</a></li>
  3. <li><a href="#">La Naranja Mecánica</a></li>
  4. <li><a href="#">El Padrino</a></li>
  5. <li><a href="#">Sin Perdón</a></li>
  6. <li><a href="#">Dos Hombres y Un Destino</a></li>
  7. <li><a href="#">El Golpe</a></li>
  8. <li><a href="#">La Guerra de las Galaxias</a></li>
  9. <li><a href="#">Casablanca</a></li>
  10. <li><a href="#">Spy Game</a></li>
  11. <li><a href="#">Pulp Fiction</a></li>
  12. </ul>

Ahora, para insertar el botón de acción en cada uno de los items lo que tenemos que hacer es insertar un nuevo enlace anexo al contenido de cada uno de los elementos LI.

  1. <li><a href="#">La Naranja Mecánica</a><a href="#">Favorita</a></li>

En este enlace podremos elegir el tipo de botón mediante el atributo data-icon. Los valores que podemos poner al botón son:

  • Flecha a izquierda, arrow-l
  • Flecha a derecha, arrow-r
  • Flecha hacia arriba, arrow-u
  • Flecha hacía abajo, arrow-d
  • Borrar, delete
  • Más, plus
  • Menos, minus
  • Check, check
  • Motor (o engine), gear
  • Actualizar, refresh
  • Reenviar, forward
  • Volver, back
  • Grid, grid
  • Estrella, star
  • Alerta, alert
  • Info, info
  • Home, home
  • Buscar, search

De esta manera, para poner una estrella como botón de acción escribiremos:

  1. <li><a href="#">La Naranja Mecánica</a><a href="#" data-icon="star">Favorita</a></li>

Otra cosa que podemos personalizar del botón es el tema del botón. Es decir, el juego de colores con los que se representará. Cada botón puede tener su propio tema. Para poner un tema u otro utilizamos el atributo data-theme. Y los valores a asignar son 'a', 'b' o 'c'.

  1. <li><a href="#">El Padrino</a><a href="#" data-icon="star" data-theme="c">Favorita</a></li>

El código final de jQuery Mobile para crear listas con botones de acción quedaría de la siguiente forma:

  1. <ul data-role="listview" data-inset="true" data-filter="true">
  2. <li><a href="#">Espartaco</a><a href="#" data-icon="star">Favorita</a></li>
  3. <li><a href="#">La Naranja Mecánica</a><a href="#" data-icon="star">Favorita</a></li>
  4. <li><a href="#">El Padrino</a><a href="#" data-icon="star" data-theme="c">Favorita</a></li>
  5. <li><a href="#">Sin Perdón</a><a href="#" data-icon="star">Favorita</a></li>
  6. <li><a href="#">Dos Hombres y Un Destino</a><a href="#" data-icon="star">Favorita</a></li>
  7. <li><a href="#">El Golpe</a><a href="#" data-icon="star">Favorita</a></li>
  8. <li><a href="#">La Guerra de las Galaxias</a><a href="#" data-icon="star">Favorita</a></li>
  9. <li><a href="#">Casablanca</a><a href="#" data-icon="star">Favorita</a></li>
  10. <li><a href="#">Spy Game</a><a href="#" data-icon="star">Favorita</a></li>
  11. <li><a href="#">Pulp Fiction</a><a href="#" data-icon="star">Favorita</a></li>
  12. </ul>

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

Un comentario en “Listas con botones de acción en jQuery Mobile”

Víctor Cuervo

Rene Garcia

Y si queremos 2 botones de acción??? por ejemplo a veces en las listas necesitas un editar y un eliminar… Yo intente poner 2 enlaces y el otro me lo manda a volar 🙁 seria de mucha ayuda agregaras como hacer esto jeeje

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*