Listas con contadores en jQuery Mobile

01/Jun/2012 Desarrollo Móvil , , , , , 2 Comentarios

Siguiendo con los ejemplos de listas en jQuery Mobile ahora vamos a ver como podemos añadir un contador a un elemento. Supongo que el ejemplo más visual para explicarlo es el de un buzón de correo electrónico, en el cual, por cada carpeta vemos los elementos no leídos. Algo así:

Como se puede ver en la imagen tenemos una lista de elementos con contadores. Así que vamos a ver como podemos llevar esto a cabo con jQuery Mobile.

Lo primero será crearnos la lista de los elementos con jQuery Mobile:

  1. <ul data-role="listview" data-inset="true" data-filter="true">
  2. <li><a href="#">Inbox</a></li>
  3. <li><a href="#">Sent</a></li>
  4. <li><a href="#">Draft</a></li>
  5. <li><a href="#">Trash</a></li>
  6. <li><a href="#">Spam</a></li>
  7. </ul>

El atributo que utilizamos para crear la lista de elementos en jQuery Mobile es data-role="listview".

Para poder añadir los contadores a los elementos jQuery Mobile no podría faltar a su filosofía de lenguaje de etiquetas y utiliza una clase para poder añadir los contadores. La clase en cuestión es "ui-li-count".

Es por ello que solo tendremos que añadir un elemento span con el valor del contador, el cual referencia mediante un atributo class a dicha clase.

  1. <ul data-role="listview" data-inset="true" data-filter="true">
  2. <li><a href="#">Inbox<span class="ui-li-count">10</span></a></li>
  3. <li><a href="#">Sent<span class="ui-li-count">220</span></a></li>
  4. <li><a href="#">Draft<span class="ui-li-count">2</span></a></li>
  5. <li><a href="#">Trash<span class="ui-li-count">14</span></a></li>
  6. <li><a href="#">Spam<span class="ui-li-count">1220</span></a></li>
  7. </ul>

Y ya tenemos nuestra lista de elementos con contadores en jQuery Mobile.

2 comentarios en “Listas con contadores en jQuery Mobile”

Víctor Cuervo

Antonio

Esta página es igual de inútil que todas las demás que muestran esta clase, copiadas unas de otras.
¿Es que acaso el número de mensajes de la carpeta lo vas a codificar en el fuente de la página? ¿No habrá que rellenarlo o actualizarlo cada vez que se averigüe cuantos mensajes hay?

¿Algo que nos quieras comentar?

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

*

*