JQuery-based Spin Button custom text box value auto-increment or auto-Increment

Sometimes you need to implement the value auto-increment or auto-increment function for the text box when designing the form. For example, the default value is 1. Click the up button to add the specified step value, click the down Button to reduce the specified step value. This function can be implemented using jQuery Spin Button, which requires only a few lines of code. The effect is shown in figure

Instructions for use
1. 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 image, the default path is:/img/spin/, up and down button image name: spin-button.png, can be customized Modification

Instance code
1. Contains the file section
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "jquery. js"> </script>
<Script type = "text/javascript" src = "jquery. spin. js"> </script>

2. HTML (custom text box)
Copy codeThe Code is as follows:
<Input type = "text" id = "number" value = "0"/>

Iii. javascript (jQuery Spin Butt call)
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ('# Number'). spin ();
});
</Script>

It can be seen from the above that it is very easy to use the jQuery plug-in jQuery Spin Button to customize the value auto-increment or auto-subtraction of the text box. You only need to set the Button image and the initial value of the value, you can use the custom text box value auto-increment or auto-increment function.

4. Custom Configuration
ImageBasePath: '/img/spin/', button image path
SpinBtnImage: 'spin-button.png ', image button image name
SpinUpImage: 'spin-up.png ', the image name of the auto-increment button
SpinDownImage: 'spin-down.png ', image name of the downward auto-minus button
Interval: 1, step value
Max: null, maximum
Min: null, minimum
TimeInterval: 500, click Interval
TimeBlink: 200 click flashing time

1. The custom step value is 10 (the code is the same as that in javascript)
$ ('# Number'). spin ({interval: 10 });

2. Customize the maximum and minimum values
$ ('# Number'). spin ({max: 100, min:-100 });

3. Customize the button image path
$ ('# Number'). spin ({imageBasePath:'/images /'});

JQuery plug-in jQuery Spin Button custom configuration is very convenient and easy to use for custom text box value auto-increment and auto-subtraction. In general, use jQuery plug-in jQuery Spin Button to easily increase or decrease the value of a custom text box.
View Demo: http://demo.jb51.net/js/jquery-spin/index.html