jQuery mobile icon count rozetleri/kabarcıklar

Question

jQuery mobile öğesindeki simgenin (veri simgesi) üstüne nasıl bir sayı balonu veya rozet eklenir? CSS ile manipüle etmek yerine onu widget olarak eklemenin daha iyi bir yolu var mı? Sayımın sunucudan dinamik olarak güncellenmesini bekliyorum.

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

görüntü etiketin yanındaki HTML'yi yapıştırın. "Simge büyüklüğüne göre kenar boşluğu & kenar boşluğunu ayarlayabilirsiniz. Bunun işe yarayacağını düşünüyorum". Teşekkürler.

Answer 2

İşte (o border-radius destek varsayar), CSS ile kolayca tweakable bir rozet simgesinin benim sürümü:

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

Varsayılan (display: none) ile gizlenen ve gizli/gösterilmesi gereken ve sayım programlı olarak güncellenen gerekli.

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

Bir sırasız listeye dayanan bir jQuery Mobile Navbar'ı ile kullanım için yaptım: İşte YMMV, jQuery bunu yapıyorum nasıl basit bir örnek. rozet konumlandırılmış mutlak olduğuna

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

Not, bu nedenle position: relative bir kap içinde olmalıdır: Burada, yukarıda stil kullanan ilave rozet span de dahil olmak üzere, tek bir sekme için belirteç bir örnek verilmiştir. Bir fiddle var burada

Ve hafifçe:

İşte

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

gibi görünüyor: Yukarıda görüldüğü gibi bu durumda içeren elemana ebeveyni li eklemek için basit bir sınıf yarattı Statik bir örnek olarak çalışmak için değiştirildi.