jQuery mobile icon count badges / bubbles
Here's my version of a badge icon, easily tweakable by CSS (it assumes border-radius
support):
.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:
$('#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 span
I added that uses the above styles:
<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 li
as seen above:
.ui-badge-container {
position: relative;
}
Here's what it looks like:
And here's a fiddle, slightly modified to work as a static example.
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;}
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.