Skip to content

pstrinkle/jquery-levelup

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

75 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

jquery-levelup

Simple +1/-1 Animation similar to point accumulation in a video game.

on npm

Latest release npm

Plans

See issues.

Usage

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/libs/jquery-levelup/jquery.levelup.min.js"></script>

<span>counter <span style="font-weight: bold;" id='the_cnt'>0</span></span>

<script>
    var $tc = $('#the_cnt');
    $tc.levelup({'start' : 0});

    $('#incrementBtn').on('click', function(event) {
        $tc.levelup('increment', 1);
        $(this).blur();
    });
    $('#decrementBtn').on('click', function(event) {
        $tc.levelup('decrement', 1);
        $(this).blur();
    });
</script>

Options

You should specify options like in usage example above.

Name Type Default Description
start integer 0 Start value for span.
incrementer/decrementer.bold boolean true Whether the incrementer
incrementer/decrementer.color CSS color string null Change the incrementer
incrementer/decrementer.class string null Add a class to the incrementer
showThousands boolean false Whether to use a thousands separate everywhere
thousandSep string "," The thousand separator to use

| Methods | Params | | ---- | ---- | ---- | | increment | integer by which to increment | | decrement | absolute value of integer by which to decrement (always positive) | | reset | | | get | | Returns the current value after all pending animations are completed.

License

Apache License 2.0