jQuery icono de móvil contar insignias/burbujas

Question

Cómo agregar una burbuja o insignia de conteo en la parte superior de un ícono (ícono de datos) en jQuery móvil. ¿Hay una mejor manera de agregarlo como widget en lugar de manipularlo con CSS? Espero que el recuento se actualice dinámicamente desde el servidor.

Answer 1

HTML:

<span class="ui-li-count ui-btn-corner-all countBubl">12</span> 

CSS:

.countBubl {float:left;margin-top:-42px;margin-left:35px;background:#ed1d24;color:#fff;padding:2px;} 

pegue el código HTML al lado de su etiqueta de imagen. "Puede ajustar el margen superior & margin-left basado en el tamaño del icono. Creo que puede funcionar". Gracias.

Answer 2

aquí está mi versión de un icono de la insignia, fácilmente modificables mediante CSS (se supone border-radius soporte):

.my-badge { 
    display: none; 
    background: #BA070F; 
    color: #fff; 
    padding: 1px 7px; 
    position: absolute; 
    right: 4px; 
    top: -12px; 
    z-index: 999; 
    border-radius: .8em; 
    border: 2px solid #fff; 
} 

Se oculta por defecto (display: none), y debe ser mostrado/oculto y el recuento actualiza mediante programación como necesario. He aquí un ejemplo sencillo de cómo lo estoy haciendo en jQuery, ymmv:

$('#badge-page1').html(++badgeCount).fadeIn(); 

Hice esto para su uso con una barra de navegación jQuery Mobile que se basa en una lista desordenada. Aquí está un ejemplo de la marcación por una pestaña, que incluye la placa span añadí que utiliza los estilos anteriores:

<li class="ui-badge-container"> 
    <span id="badge-page1" class="my-badge"></span> 
    <a href="#page-tab1" data-role="tab">Tab 1</a> 
</li> 

Tenga en cuenta que la tarjeta de identificación es absoluta posicionado, por lo que debe estar en un contenedor que es position: relative. He creado una clase sencilla de agregar al elemento que contiene, en este caso el padre li como hemos visto anteriormente:

.ui-badge-container { 
    position: relative; 
} 

Esto es lo que parece:

Y aquí hay un fiddle, ligeramente modificado para funcionar como un ejemplo estático.