-->

viernes, 3 de mayo de 2019

40.- Burbujas de conteo (JQuery Mobile)

   Las burbujas de recuento se utilizan para mostrar números asociados con elementos de lista, como mensajes en un buzón.
   Para agregar burbujas de conteo, use un elemento en línea, como <span>, con la clase "ui-li-count" y agregue un número.


Ejemplo

<ul data-role="listview">
  <li><a href="#">Inbox<span class="ui-li-count">25</span></a></li>
  <li><a href="#">Sent<span class="ui-li-count">432</span></a></li>
  <li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
</ul>

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>
<body>
 <div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
   <h2>Mi contador de correo</h2>
   <ul data-role="listview" data-inset="true">
    <li><a href="#">Inbox<span class="ui-li-count">25</span></a></li>
    <li><a href="#">Sent<span class="ui-li-count">432</span></a></li>
    <li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
   </ul>
  </div>
 </div>
</body>
</html>
Resultado:

Nota: Para mostrar el número correcto en una burbuja de conteo, debe actualizarse mediante programación.


No hay comentarios:

Publicar un comentario