There are two main approaches to using this plugin: through data attributes on
DOM nodes, and through JS options explicitly passed to the countTo function.
These two methods can be mixed and matched as well. Data attributes takes
precedence over JS options.
Data Attributes
This approach allows you to define data-* attributes on whatever DOM element
will act as a container for your counter. This is useful when you already know
the values at the time that you are constructing the DOM.
Refer to the Options section below for more info on the various options
available.
JavaScript Options
This approach allows you to pass values to the countTo function. This is
useful when you don't know the values at the time the DOM is being rendered.
<span class="timer"></span>
<script type="text/javascript">
$('.timer').countTo({from: 0, to: 500});
</script>
A more detailed example that demonstrates all possible options being used is as
follows.
<span class="timer"></span>
<script type="text/javascript">
$('.timer').countTo({
from: 50,
to: 2500,
speed: 1000,
refreshInterval: 50,
formatter: function (value, options) {
return value.toFixed(options.decimals);
},
onUpdate: function (value) {
console.debug(this);
},
onComplete: function (value) {
console.debug(this);
}
});
</script>
Refer to the Options section below for more info on the various options
available.
Options:
A complete listing of the options that can be passed to the countTo method is
below.
Option
Data Attribute
Description
from
data-from
The number to start counting from. (default: 0)
to
data-to
The number to stop counting at. (default: 100)
speed
data-speed
The number of milliseconds it should take to finish counting.
(default: 1000)
refreshInterval
data-refresh-interval
The number of milliseconds to wait between refreshing the counter.
(default: 100)
decimals
data-decimals
The number of decimal places to show when using the default
formatter. (default: 0)
formatter (value, options)
A handler that is used to format the current value before rendering to
the DOM. The true current value and options set is passed to the
function, and it is run in the context of the DOM element. It must
return the formatted value. (default:
value.toFixed(options.decimals))
onUpdate (value)
A callback function that is triggered for every iteration that the
counter updates. The currently rendered value is passed to the
function, and it is called in the context of the DOM element.
(default: null)
onComplete (value)
A callback function that is triggered when counting finishes. The
final rendered value is passed to the function, and it is called in the
context of the DOM element. (default: null)
Functions:
This plugin also supports functions, primarily for changing state. Functions are
called by passing the name as a string to the countTo jQuery function, e.g.:
$('#timer').countTo('stop').
start
Resumes the timer if it is stopped.
stop
Stops (pauses) the timer if it is running.
toggle
Starts or stops the timer based upon its current state.
请发表评论