- Create a private scope for $
- Attach plugin to $.fn alias
- Add implicit iteration
- Enable chaining
- Add default options
- Add custom options
- global custom options
<div id="counter1">
</div>
<div id="counter2">
</div>
<script>
(function($) {
$.fn.count = function(customOptions){
var options = $.extend({},$.fn.count.defaultOptions, customOptions);
return this.each(function(){
var $this = $(this);
$this.text(options.startCount);
var myInterval = window.setInterval(function(){
var currentCount = parseFloat($this.text());
var newCount = currentCount+1;
$this.text(newCount+'');
}, 1000);
});
};
$.fn.count.defaultOptions = {
startCount:'100'
};
})(jQuery);
jQuery.fn.count.defaultOptions.startCount = '300';
jQuery('#counter1').count();
jQuery('#counter2').count({startCount:'500'});
</script>