SpinControl

This is a demonstration of cmSpinControl - a jQuery plugin to extend a (numeric) input field to a full spin control component.

Features
Setup
Options
Methods
Events
Themes

jQuery plugin: Plugin with options, modern method call and chainability. Easily applied on text input field.
Options: Minimum value, maximum value, default value, step width and button labels.
Setters: Set value and options after construction.
Destroyable: Can be destroyed (and constructed again).
Acceleration: Gets faster while pressing button after 10 and 50 steps.
Themes: Easy styling. Several themes are available.

Here is the default setup.
A simple text input field like this:

<input type="text" name="test" class="spin-control"/>

can be extended to a numeric spin control input field by calling the plugin (after loading and document ready) like this:

$('input.spin-control').cmSpinControl();

No further options were given on construction. So you can increase and decrease by 1 without limits.
And this is the result:

Options

max: Maximum integer value. Example: 100
min: Minimum integer value. Example: -100
step: ...
labelUp: Label of increment button. Default: +(+). Example: »(»).
labelDown: Label of decrement button. Default: −(−). Example: «(«).

Demo

On construction the following options are given:

max: 400
min: -400
step: 10

$('input.spin-control').cmSpinControl({max: 400, min: -400, step: 10});

Methods

Following the jQuery plugin authoring rules you can call the following methods:

setValue(value)

Sets input element value.
Example:

$('input.spin-control').cmSpinControl('setValue',20);

setOption(key,value)

Sets an option value by its key.
Examples:

$('input.spin-control').cmSpinControl('setOption','max','30');

$('input.spin-control').cmSpinControl('setOption','min','-99');

$('input.spin-control').cmSpinControl('setOption','step','.1');

Demo

So the default value should be 20 and you can increase to atmost 30.

Events

Within the options the some event handling callback function can be defined.
These functions can also be applied after construction using setOption.

change(event,data)

Defined as option on construction:

$('input.spin-control').cmSpinControl({change: function(event,data){
	var name = data.target.attr('name');
	var value = data.value;
	alert('Value of spin control "' + name + '" changed to ' + value);
});

Set after construction using setOption:

$('input.spin-control').cmSpinControl('setOption','change',function(event,data){
	var name = data.target.attr('name');
	var value = data.value;
	alert('Value of spin control "' + name + '" changed to ' + value);
});

In both cases the bound event key will be namespaced (change.cmSpincontrol).

You can also bind a common change event closure. You may need to extract spin control data.

$('input.spin-control').bind('change',function(event){
	var name = $(this).attr('name');
	var value = $(this).val();
	alert('Value of spin control "' + name + '" changed to ' + value);
	var data = $(this).data('cmSpinControl');
	...
});

If you set both handlers, the handler set by options will be called first.
You may need to stop event propagation there if external bound handlers must not be triggered.

Theme 1

Theme 2

This is a larger theme with more common button positions.

Theme 3

The buttons are now arranged left and right inside the input field. Labels are changed on construction.

Theme 4

This time the buttons are arranged like above but all parts are combined to one larger controller.