Spinner

Extend from $.fn.validatebox.defaults. Override defaults with $.fn.spinner.defaults.

The spinner combines a editable text box and two small buttons that let the user choose from a range of values. Similar to the combobox, the spinner allows the user to type in a value but do not has a drop-down list. The spinner is the base component to create other spinner component such as numberspinner, timespinner, etc.

Dependencies

Usage Example

The spinner should be created using javascript. Creating from markup is not allowed.

  1. <input id="ss" value="2">
  1. $('#ss').spinner({
  2. required:true,
  3. increment:10
  4. });

Properties

The properties extend from validatebox, below is the added properties for spinner.

Name Type Description Default
width number The width of this component. auto
height number The height of this component. This property is available since version 1.3.2. 22
value string The initialize value.
min string The minimum allowed value. null
max string The maximum allowed value. null
increment number The increment value when click spinner button. 1
editable boolean Defines if user can type value directly into the field. true
disabled boolean Defines if to disable the field. false
spin function(down) A function called when user click the spinner button. The 'down' parameter indicate if the user click the down button.

Events

Name Parameters Description
onSpinUp none Fires when user click the up spinner button.
onSpinDown none Fires when user click the down spinner button.

Methods

The methods extend from validatebox, below is the added methods for spinner.

Name Parameter Description
options none Return the options object.
destroy none Destroy the spinner component.
resize width Reset the component width. Override the original width by passing the 'width' parameter.

Code example:

$('#ss').spinner('resize');  // resize with original width
$('#ss').spinner('resize', 200);  // resize with new width
enable none Enable the component.
disable none Disable the component.
getValue none Get the component value.
setValue value Set the component value.
clear none Clear the component value.
reset none Reset the component value. This method is available since version 1.3.2.