Module: jQuerySpinButton

SpinButton control

Adds bells and whistles to any ordinary textbox to make it look and feel like a SpinButton Control.

Supplies external:jQuery.fn.SpinButton (and also external:jQuery.loadingStylesheets)

Originally written by George Adamson, Software Unity (george.jquery@softwareunity.com) August 2006.

  • Added min/max options
  • Added step size option
  • Added bigStep (page up/down) option

Modifications made by Mark Gibson, (mgibson@designlinks.net) September 2006:

  • Converted to jQuery plugin
  • Allow limited or unlimited min/max values
  • Allow custom class names, and add class to input element
  • Removed global vars
  • Reset (to original or through config) when invalid value entered
  • Repeat whilst holding mouse button down (with initial pause, like keyboard repeat)
  • Support mouse wheel in Firefox
  • Fix double click in IE
  • Refactored some code and renamed some vars

Modifications by Jeff Schiller, June 2009:

Modifications by Jeff Schiller, July 2009:

  • improve styling for widget in Opera
  • consistent key-repeat handling cross-browser

Modifications by Alexis Deveria, October 2009:

  • provide "stepfunc" callback option to allow custom function to run when changing a value
  • Made adjustValue(0) only run on certain keyup events, not all.

Tested in IE6, Opera9, Firefox 1.5

Version Date Author Notes
v1.0 11 Aug 2006 George Adamson First release
v1.1 Aug 2006 George Adamson Minor enhancements
v1.2 27 Sep 2006 Mark Gibson Major enhancements
v1.3a 28 Sep 2006 George Adamson Minor enhancements
v1.4 18 Jun 2009 Jeff Schiller Added callback function
v1.5 06 Jul 2009 Jeff Schiller Fixes for Opera.
v1.6 13 Oct 2009 Alexis Deveria Added stepfunc function
v1.7 21 Oct 2009 Alexis Deveria Minor fixes.
Fast-repeat for keys and live updating as you type.
v1.8 12 Jan 2010 Benjamin Thomas Fixes for mouseout behavior.
Added smallStep
v1.9 20 May 2018 Brett Zamir Avoid SVGEdit dependency via stateObj config;
convert to ES6 module
Source:
Example
// Create group of settings to initialise spinbutton(s). (Optional)
  const myOptions = {
    min: 0, // Set lower limit.
    max: 100, // Set upper limit.
    step: 1, // Set increment size.
    smallStep: 0.5, // Set shift-click increment size.
    stateObj: {tool_scale: 1}, // Object to allow passing in live-updating scale
    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.
  };

  $(function () {
    // Initialise INPUT element(s) as SpinButtons: (passing options if desired)
    $('#myInputElement').SpinButton(myOptions);
  });

Methods

(static) jQuerySpinButton($) → {external:jQuery}

Parameters:
Name Type Description
$ external:jQuery

The jQuery object to which to add the plug-in
Source:
Returns:
Type
external:jQuery

Type Definitions

SpinButtonConfig

Type:
Properties:
Name Type Description
min Float

Set lower limit
max Float

Set upper limit.
step Float

Set increment size.
stepfunc module:jQuerySpinButton.StepCallback

Custom function to run when changing a value; called with this of object and the value to adjust and returns a float.
callback module:jQuerySpinButton.ValueCallback

Called after value adjusted (with this of object)
smallStep Float

Set shift-click increment size.
stateObj PlainObject

Object to allow passing in live-updating scale

Properties
Name Type Description
tool_scale Float
spinClass string

CSS class to style the spinbutton. (Class also specifies url of the up/down button image.)
upClass string

CSS class for style when mouse over up button.
downClass string

CSS class for style when mouse over down button.
page Float

Value to be adjusted on page up/page down
reset Float

Reset value when invalid value entered
delay Float

Millisecond delay
interval Float

Millisecond interval
Source:

StepCallback(thisArg, i) → {Float}

Parameters:
Name Type Description
thisArg external:jQuery

Value of this
i Float

Value to adjust
Source:
Returns:
Type
Float

ValueCallback(thisArg) → {void}

Parameters:
Name Type Description
thisArg external:jQuery.fn.SpinButton

Spin Button; check its value to see how it was changed.
Source:
Returns:
Type
void