jQuery mobile icon count badges / bubbles

Question

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.

Answer 1

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.

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;}

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.