jQuery 移动图标计数徽章/气泡答案

【问题标题】：jQuery mobile icon count badges / bubblesjQuery 移动图标计数徽章/气泡
【发布时间】：2012-08-01 11:11:02
【问题描述】：

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

【问题讨论】：

【解决方案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;
}

它是这样的：

这是一个fiddle，稍作修改以用作静态示例。

【讨论】：

更清洁和简单的解决方案，这应该是答案。请注意，在引导程序中使用类名 badge 会产生一些影响。请记住这一点。
@CesarBielich 好点——我更新了我的示例以避免冲突。谢谢！

【解决方案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 粘贴到您的图片标签旁边。 “您可以根据图标大小调整上边距和左边距。我认为它可能有效”。谢谢。

【讨论】：