Jquery Mobile中带有Bubble Count(如iOS)的徽章图标

Question

我有一个带有少量图标的标题,我想在带有通知计数的徽章图标等图标中动态显示气泡计数.我们怎样才能在jquery mobile中做到？我在jquery mobile中搜索了气泡计数,但它目前可用listview,但我想在iOS通知计数的右上角显示计数.找到需要在jquery mobile中实现的徽章图标的以下参考URL,网址:http://en.wikipedia.org/wiki/Apple_Push_Notification_Service

Answer 1

这可以用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;
}

现在你所要做的就是找出何时将数字插入"气泡"

编辑:"icon"类点缺失.