First link to the stylesheet inside your head element:
<link rel="stylesheet" href="iosbadge.css">
...and then to the Javascript file before your closing </body>
tag:
<script src="iosbadge.min.js"></script>
You need an element that has CSS position
se to relative
(or absolute
):
CSS:
.icon { position: relative; width: 64px; height: 64px; }
HTML:
<div id="icon" class="icon"></div>
Using only Javascript:
var icon = document.getElementById('icon');
var badge = new IOSBadge(icon, { theme: 'ios', size: 22 });
With the Javascript version you are able to use chaining with most of the methods (notice that this is not possible with the jQuery version), e.g.
badge.hide().setContent(1).increaseBy(7).setTheme('green').show();
Using jQuery or Zepto* library:
$("#icon").iosbadge({ theme: 'ios', size: 22 });
* If you use Zepto, you need to build a custom version that has the data module