jQuery Mobile Symbol Anzahl Abzeichen/Blasen

Question

Wie Sie eine Zählblase oder ein Abzeichen über einem Symbol (Datensymbol) in jQuery mobile hinzufügen. Gibt es eine bessere Möglichkeit, es als Widget hinzuzufügen, anstatt mit CSS zu manipulieren? Ich erwarte, dass die Zählung dynamisch vom Server aktualisiert wird.

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

Fügen Sie den HTML neben Ihrem Image-Tag. "Sie können die Marge-top & Marge-links basierend auf der Symbolgröße anpassen.Ich denke, es kann funktionieren". Danke.

Answer 2

Hier ist meine Version eines Abzeichen Symbol, leicht modifizierbar durch CSS (nimmt border-radius Unterstützung):

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

Es standardmäßig versteckt ist (display: none) und sollte programmatisch sichtbar/unsichtbar, und die Zählung aktualisiert werden erforderlich. Hier ist ein einfaches Beispiel dafür, wie ich tue es in jQuery, ymmv:

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

Ich tat dies für die Verwendung mit einem jQuery Mobile NavBar, die auf einer ungeordneten Liste basiert. Hier ist ein Beispiel für die Markup für ein Register, einschließlich der Abzeichen span ich fügte hinzu, dass die oben genannten Arten verwendet:

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

Beachten Sie, dass die Plakette ist absolut positioniert ist, so muss es in einem Behälter, die position: relative ist. Ich habe eine einfache Klasse zu dem Aufnahmeelement, in diesem Fall die Eltern li wie oben gesehen hinzuzufügen:

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

Hier ist, wie es aussieht:

Und hier ist ein fiddle, leicht geändert, um als statisches Beispiel zu arbeiten.