javascript jQuery 移动图标计数徽章/气泡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11757990/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery mobile icon count badges / bubbles
提问by ManKum
How to add a count bubble or badge on top of a icon (data-icon) in jQuery mobile. Is there a better way to add it as widget rather than manipulating with CSS ? I expect the count to be updated dynamically from the server.
如何在 jQuery mobile 中的图标（数据图标）顶部添加计数气泡或徽章。有没有更好的方法将它添加为小部件而不是使用 CSS 进行操作？我希望从服务器动态更新计数。
采纳答案by Raja O
HTML :
HTML :
<span class="ui-li-count ui-btn-corner-all countBubl">12</span>
CSS :
CSS :
.countBubl {float:left;margin-top:-42px;margin-left:35px;background:#ed1d24;color:#fff;padding:2px;}
Paste the HTML next to your image tag. "You can adjust the margin-top & margin-left based on the icon size.I think it may work". Thanks.
将 HTML 粘贴到图像标记旁边。“您可以根据图标大小调整 margin-top 和 margin-left。我认为它可能有效”。谢谢。
回答by Brian Moeskau
Here's my version of a badge icon, easily tweakable by CSS (it assumes border-radiussupport):
这是我的徽章图标版本，可通过 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;
}
It's hidden by default (display: none), and should be shown/hidden and the count updated programmatically as needed. Here's a simple example of how I'm doing it in jQuery, ymmv:
默认情况下它是隐藏的 ( display: none)，应该显示/隐藏，并根据需要以编程方式更新计数。这是我如何在 jQuery ymmv 中执行此操作的简单示例：
$('#badge-page1').html(++badgeCount).fadeIn();
I did this for use with a jQuery Mobile NavBar which is based on an unordered list. Here's an example of the markup for one tab, including the badge spanI added that uses the above styles:
我这样做是为了与基于无序列表的 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>
Note that the badge is absolute positioned, so it must be in a container that is position: relative. I created a simple class to add to the containing element, in this case the parent lias seen above:
请注意，徽章是绝对定位的，因此它必须位于position: relative. 我创建了一个简单的类来添加到包含元素中，在这种情况下是父元素，li如上所示：
.ui-badge-container {
position: relative;
}
Here's what it looks like:
这是它的样子：
And here's a fiddle, slightly modified to work as a static example.
这是一个fiddle，稍作修改以用作静态示例。
