jQuery mobilna ikona liczba znaczków/bąbelki

Question

Jak dodać licznik bańki lub znaczek na górze ikony (ikona danych) w jQuery mobile. Czy istnieje lepszy sposób na dodanie go jako widżetu zamiast manipulowania przy użyciu CSS? Liczę, że licznik będzie aktualizowany dynamicznie z serwera.

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;} 

Wklej kod HTML obok tagu obrazu. "Możesz ustawić margines górny & margines po lewej stronie w zależności od wielkości ikony.Myślę, że to może działać". Dzięki.

Answer 2

Oto moja wersja ikonę karty identyfikacyjnej, łatwo podkręcania przez CSS (zakłada border-radius wsparcia):

.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; 
} 

To domyślnie ukryte (display: none) i powinny być pokazane/ukryte i licznik aktualizowany programowo jako potrzebne. Oto prosty przykład jak to robię w jQuery, YMMV:

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

Zrobiłem to dla użycia z jQuery Telefony NavBar która oparta jest na liście nieuporządkowanej. Oto przykład znaczników jednej zakładce tym blaszka span ja dodatkiem, który używa wyżej style:

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

Należy zauważyć, że odznaka ma absolutną pozycjonowane tak, musi znajdować się w pojemniku, który jest position: relative. Stworzyłem prostą klasę, aby dodać do elementu zawierającego w tym przypadku rodzica li jak widać powyżej:

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

Oto jak to wygląda:

A oto fiddle, lekko zmodyfikowany do pracy jako statyczny przykład.