This may work for you. You actually create the function in the config
options you pass to the control. I changed the reference in the setup
and in the adjustValue functions as well. This isn't tested but
hopefully should work.
var myOptions = {
min: 0,
// Set lower limit.
max: 100,
// Set upper limit.
step: 1,
// Set increment size.
spinClass: mySpinBtnClass, // CSS
class to style the spinbutton.
(Class also specifies url of the up/down button image.)
upClass: mySpinUpClass, // CSS
class for style when mouse over
up button.
downClass: mySpinDnClass, // CSS
class for style when mouse over
down button.
callback: function() { // put your code
here }
}
$.fn.SpinButton = function(cfg){
return this.each(function(){
// Apply specified options or defaults:
// (Ought to refactor this some day to use $.extend()
instead)
this.spinCfg = {
//min: cfg && cfg.min ? Number(cfg.min) :
null,
//max: cfg && cfg.max ? Number(cfg.max) :
null,
min: cfg && !isNaN(parseFloat(cfg.min)) ?
Number(cfg.min) :
null, // Fixes bug with min:0
max: cfg && !isNaN(parseFloat(cfg.max)) ?
Number(cfg.max) : null,
step: cfg && cfg.step ? Number(cfg.step) : 1,
page: cfg && cfg.page ? Number(cfg.page) : 10,
upClass: cfg && cfg.upClass ? cfg.upClass :
'up',
downClass: cfg && cfg.downClass ?
cfg.downClass : 'down',
reset: cfg && cfg.reset ? cfg.reset :
this.value,
delay: cfg && cfg.delay ? Number(cfg.delay) :
500,
interval: cfg && cfg.interval ?
Number(cfg.interval) : 100,
_btn_width: 20,
_btn_height: 12,
_direction: null,
_delay: null,
_repeat: null,
callback: cfg && cfg.callback ? cfg.callback :
null /* fixed here*/
};
this.adjustValue = function(i){
var v = (isNaN(this.value) ?
this.spinCfg.reset :
Number(this.value)) + Number(i);
if (this.spinCfg.min !== null) v = Math.max(v,
this.spinCfg.min);
if (this.spinCfg.max !== null) v = Math.min(v,
this.spinCfg.max);
if ($.isFunction(this.spinCfg.callback))
this.spinCfg.callback(); /* fixed here */
this.value = v;
};
On May 2, 11:04 am, Chris Hall <[EMAIL PROTECTED]> wrote:
> Hello everyone.
>
> I am trying to modify the SpinButton code (from
> herehttp://www.softwareunity.com/sandbox/jqueryspinbtn/) to include a
> callback when the value is changed.
>
> I'm very new to callback functions and have tried searching the web
> for how to add them but so far have had no luck.
>
> My desired goal is to be able to pass a function or not and if the
> function is included have it executed when the spinner button is
> clicked.
>
> Here is what I have tried (along with the original code):
>
> $.fn.SpinButton = function(cfg){
> return this.each(function(){
>
> // Apply specified options or defaults:
> // (Ought to refactor this some day to use $.extend() instead)
> this.spinCfg = {
> //min: cfg && cfg.min ? Number(cfg.min) : null,
> //max: cfg && cfg.max ? Number(cfg.max) : null,
> min: cfg && !isNaN(parseFloat(cfg.min)) ?
> Number(cfg.min) :
> null, // Fixes bug with min:0
> max: cfg && !isNaN(parseFloat(cfg.max)) ?
> Number(cfg.max) : null,
> step: cfg && cfg.step ? Number(cfg.step) : 1,
> page: cfg && cfg.page ? Number(cfg.page) : 10,
> upClass: cfg && cfg.upClass ? cfg.upClass : 'up',
> downClass: cfg && cfg.downClass ? cfg.downClass :
> 'down',
> reset: cfg && cfg.reset ? cfg.reset : this.value,
> delay: cfg && cfg.delay ? Number(cfg.delay) : 500,
> interval: cfg && cfg.interval ? Number(cfg.interval)
> : 100,
> _btn_width: 20,
> _btn_height: 12,
> _direction: null,
> _delay: null,
> _repeat: null,
> callback: function(){} /* I added this*/
> };
> this.adjustValue = function(i){
> var v = (isNaN(this.value) ? this.spinCfg.reset :
> Number(this.value)) + Number(i);
> if (this.spinCfg.min !== null) v = Math.max(v,
> this.spinCfg.min);
> if (this.spinCfg.max !== null) v = Math.min(v,
> this.spinCfg.max);
> callback(); /* I added this)
> this.value = v;
> };
>
> when trying to run this I get callback is not defined.
>
> Any help is greatly appreciated!!!
