如何在 jQuery mobile 中的图标(数据图标)上添加计数气泡或徽章。有没有更好的方法将其添加为小部件而不是使用 CSS 进行操作?我希望从服务器动态更新计数。
问问题
13070 次
2 回答
25
这是我的徽章图标版本,可以通过 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,稍作修改以用作静态示例。
于 2013-06-03T23:13:52.147 回答
6
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 粘贴到您的图像标记旁边。“您可以根据图标大小调整上边距和左边距。我认为它可能有效”。谢谢。
于 2012-10-05T07:05:22.867 回答