Plugins

The plugins site is currently in development.

We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.

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.

Downloads

Version Downloads Date Links
1.1.1 Notes


4.333335
Your rating: None Average: 4.3 (6 votes)