jQuery移动图标计数徽章/泡沫

Question

如何在jQuery mobile中的图标(数据图标)上添加计数气泡或徽章.有没有更好的方法将其添加为小部件而不是使用CSS进行操作？我希望从服务器动态更新计数.

Answer 1

这是我的徽章图标版本,可以通过CSS轻松调整(它假定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中做的,ymmv:

$('#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;
}

这是它的样子:

这里有一个小提琴,稍作修改就可以作为一个静态的例子.

Answer 2

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粘贴到图片代码旁边."你可以根据图标大小调整边距顶部和边距左边.我认为它可能有效".谢谢.