Icona badge con numero di bolle (come iOS) in Jquery Mobile

Question

Ho un'intestazione con poche icone, voglio mostrare un numero di bolle dinamicamente in un'icona come l'icona del badge con il conteggio delle notifiche. Come possiamo fare in jquery mobile? Ho cercato in jquery mobile per contare le bolle ma è attualmente disponibile con listview, ma voglio mostrare il conteggio in un'angolo in alto a destra dell'icona come il conteggio delle notifiche di iOS. Trova l'URL di riferimento sotto per l'icona del badge che deve essere implementato in jquery mobile, url: http://en.wikipedia.org/wiki/Apple_Push_Notification_Service

Answer 1

Questo potrebbe essere fatto con i CSS.

HTML

<div class="icon"> 
    <span class="count">12</span> 
</div> 

CSS

.icon { 
    width: 50px; 
    Height: 50px; 
    background: url(/images/icon.png) 
} 

.icon .count { 
    background:#ff0000; 
    position: absolute; 
    top: -8px; 
    Right: -8px; 
    min-width:14px; 
    height: 14px; 
    color:#ffffff; 
    border-radius: 50%; 
    padding: 2px; 
    text-align: center; 
    font-size: 12px; 
} 

Ora tutto ciò che dovete fare è capire quando per inserire il numero nella "bolla"

EDIT: "icona" mancava il punto di classe.