jQuery手機圖標計數徽章/氣泡

Question

如何在jQuery手機中的圖標（數據圖標）頂部添加計數氣泡或徽章。有沒有更好的方式來添加它作爲部件，而不是使用CSS操作？我期望計數從服務器動態更新。

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

粘貼旁邊的圖像標籤的HTML。 「您可以根據圖標大小調整頁邊距&。我認爲它可能有效」。 謝謝。

Answer 2

這裏是我的版本徽章的圖標，通過CSS輕鬆tweakable（它假定border-radius支持）：

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

它在默認情況下（display: none）隱藏起來，應該顯示/隱藏和計數程序的更新需要。下面是我如何做它在jQuery的，因人而異一個簡單的例子：

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

我這樣做是爲了用jQuery Mobile的的NavBar它是基於一個無序列表上使用。這裏的標記示例爲一個標籤，包括徽章span我補充說，使用上述樣式：

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

注意，徽章是絕對定位，所以它必須是一個容器，它position: relative。我創建了一個簡單的類添加到包含元素，在這種情況下，家長li上面看到：

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

這裏是什麼樣子：

而這裏的一個fiddle，略修改爲作爲靜態示例工作。