Spin Button custom text box value increases or decreases based on jQuery_jquery

Sometimes when designing a form, you need to implement a value auto-increment or auto-decrement function for the text box. For example, the default is 1. Click the up button to increase the specified step value, and click the down button to decrease the specified step value. Use the jQuery plug-in jQuery Spin Button only requires a few lines of code to implement this function. The effect is as shown below

Instructions for use
1. You need to use the jQuery library file and jQuery Spin ButtonLibrary file (current version 1.1.1)

Material preparation
Up and down button pictures, the default path is:/img/spin/, the up and down button pictures are named: spin-button.png, Custom modifications can be made

Example code
1, including the file part

Copy code The code is as follows:

2. HTML part (custom text box)

Copy code The code is as follows:

Three , the javascript part (called by jQuery plug-in jQuery Spin Butt)

Copy code The code is as follows:

< ;script type="text/javascript">
$(document).ready(function(){
$('#number').spin();
});
< ;/script>

As you can see from the above, it is very simple to use the jQuery plug-in jQuery Spin Button to customize the text box value to increase or decrease. You only need to set the button image and the initial value of the value. Implement the function of self-increasing or decrementing the value of the custom text box.

Four, user-defined configuration
imageBasePath: '/img/spin/', button image path
spinBtnImage: 'spin-button.png', image button image name
spinUpImage: 'spin-up.png', the image name of the upward increment button
spinDownImage: 'spin-down.png', the image name of the downward decrement button
interval: 1, step value
max: null , maximum value
min: null, minimum value
timeInterval: 500, click time interval
timeBlink: 200 click blink time

1, custom step value is 10 (the code is the same as above javascript part)
$('#number').spin({interval:10});

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

3, Custom button image path
$('#number').spin({imageBasePath: '/images/'});

The jQuery plug-in jQuery Spin Button custom configuration is very convenient for customizing the personalized text box value auto-increment and decrement function, and it is also very simple to use. In general, the custom text box value auto-increment or decrement is used The jQuery plug-in jQuery Spin Button can be easily completed with one line of code.
View the demo: http://demo.jb51.net/js/jquery-spin/index.html