jQuery Spin Button
Overview
This plugin provides spin-button interface easily on your form.
This interface is very handy to set especially short or middle range numbers.
Usage
Simply call "spin" method.
$(document).ready(function(){
$('#number').spin();
});<input type="text" id="number" value="0" />You can specify the options with first argument.
$('#number').spin({max:100,min:0});Options
imageBasePath
You need to specify your spin-button surface images. When all your spin-related-images are on a same directory(I hope so), you can set your image path onto this parameter.
default value is "/img/spin/".
spinBtnImage/spinUpImage/spinDownImage
The names of spin button images.
default value is "spin-button.png", "spin-up.png" and "spin-down.png". (these files are included in spin-image.tar.gz)
interval
Add/subtract this value from current value, when users click spin button.
default value is 1.
max/min
The maximum/minimum value. Null means unlimited.
default value is null.
timeInterval
While users keep pressing mouse button on the spin-button, the value will be increasing. This value is the time interval of increasing.
default value is 500(milli seconds)
timeBlink
The time interval of blinking the spin button when increasing/decreasing the value.
default value is 200(milli seconds)
btnClass
Specify your own class for button image.
btnCss
Specify your own styles as javascript object for button image.
txtCss
Specify your own styles as javascript object for input field.
lock
Prohibit direct input to text field.
Please don't expect perfect.
decimal
Set decimal character in case you don't want to use '.'.
eg. decimal: ','
beforeChange
Callback before value is changing.
When you return "false", the changing would not happen.
First argument is the new value, and second one is the current value.
changed
Callback after value has changed.
First argument is the value.
buttonUp/buttonDown
Callback when up/down button has clicked.
This function is called whether the value has changed.
Note
If you want to change the values of default option, you can set your own default value onto $.spin object.
eg. $.spin.imageBasePath = '/images/spin/';
Information
This plugin is very handy using with jGlycy.
<input type="text" jg="spin" value="0" />More Documents
Read Japanese document if you need.
Releases
| Official releases | Date | Size | Links | Status | |
|---|---|---|---|---|---|
| 1.1.1 | 2009-Jun-13 | 68.74 KB | Recommended for 1.0.x |  | |