Spin button custom text box based on jquery the value of self-increasing or self-reducing _jquery

Sometimes, when designing a form, you need to implement a value or decrement function for the text box. For example, the default is 1, click the Up button to increase the specified step value, click the Down button to reduce the specified step value, using the jquery plugin jquery Spin button only need a few lines of code to achieve this function, The effect of the following figure

Instructions for use
One, you need to use the jquery library file and the jquery Spin button library file (current version 1.1.1)

Material preparation
Up and down button picture, the default path is:/img/spin/, up and down button picture named: Spin-button.png, can make custom modification

Instance Code
One, including the file section

Copy Code code as follows:

<script type= "Text/javascript" src= "Jquery.js" ></script>
<script type= "Text/javascript" src= "Jquery.spin.js" ></script>

Two, HTML section (Custom text box)

Copy Code code as follows:

<input type= "text" id= "number" value= "0"/>

Three, JavaScript section (jquery plugin jquery Spin butt call)

Copy Code code as follows:

<script type= "Text/javascript" >
$ (document). Ready (function () {
$ (' #number '). Spin ();
});
</script>

From the above, using the jquery plug-in jquery Spin button custom text box value or self-reduction is very simple, only need to set the button picture, the value of the initial values, you can customize the value of the text box or self reduction function.

Four, user-defined configuration
Imagebasepath: '/img/spin/', button picture path
Spinbtnimage: ' spin-button.png ', picture button picture name
Spinupimage: ' Spin-up.png ', up self-add button picture name
Spindownimage: ' Spin-down.png ', down self-subtraction button picture name
Interval:1, Step value
Max:null, max value
Min:null, Minimum value
timeinterval:500, click time interval
TIMEBLINK:200 Click Blink time

1, the custom step value is 10 (code above the JavaScript section)
$ (' #number '). Spin ({interval:10});

2, custom maximum and minimum values
$ (' #number '). Spin ({max:100,min:-100});

3, custom button picture path
$ (' #number '). Spin ({imagebasepath: '/images/'});

jquery Plugin jquery Spin button Custom configuration is very handy for customizing the personalized text box numerical self-subtraction feature, and is very simple to use, in general, custom text box values are either self added or reduced using jquery plug-ins for jquery Spin button one line of code easy to handle.
View Demo: http://demo.jb51.net/js/jquery-spin/index.html