Sample: sample88. html
<! DOCTYPE html > < html lang =" en "> < body > < div id =" counter1 "></ div > < div id =" counter2 "></ div > < script src =" http:// ajax. googleapis. com / ajax / libs / jquery / 1.7.2 / jquery. min. js "></ script > < script >( function($) {
$. fn. count = function( customOptions) { // Create new option, extend object with defaultOptoins and customOptions. var options = $. extend({}, $. fn. count. defaultOptions, customOptions); return this. each( function() { var $ this = $( this); // Sets the counter start number to the default option value // or to a custom option value if it is passed to the plugin. $ 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); // Passing a custom option overrides default. jQuery('# counter1, # counter2 '). count({ startCount: 500 });
</ script > </ body > </ html >
Overwriting default options without altering original plugin code
Since default options are accessible from outside a plugin, it is possible to reset the default options before invoking the plugin. This can be handy when you want to define your own options without altering the plugin code itself. Doing so can simplify plugin invocations because you can, in a sense, globally set up the plugin to your liking without forking the original plugin code itself.
Sample: sample89. html
<! DOCTYPE html > < html lang =" en "> < body > < div id =" counter1 "></ div > < div id =" counter2 "></ div > < script src =" http:// ajax. googleapis. com / ajax / libs / jquery / 1.7.2 / jquery. min. js "></ script > < script >( function($) {
$. fn. count = function( customOptions) {
89