When we submit an order for online shopping, there is usually a quantity selection control on the webpage, which requires the buyer to select the number of items to purchase. The developer will make this control so that fine-tuning operations such as addition and subtraction can be performed by clicking. Of course, you can also directly enter the number of pieces. This article will introduce several common methods of using spinner digital spinners to implement digital addition and subtraction functions.
Add and subtract numbers left and right
For example, JD.com currently uses the effect of adding and subtracting numbers to the left and right when submitting orders. This effect is straightforward and easy to operate. We use the jquery.spinner.js plug-in to add and subtract numbers left and right. The calling method is very simple. Please see Demonstration Example 1.
The call is also very simple. First load the jquery library file and jquery.spinner.js, and then use the following code:
Bootstrap style, plus and minus on the right side
Bootstrap has been popular for a long time, and there are many kinds of applications based on bootstrap style. Let me introduce to you a digital addition and subtraction plug-in based on bootstrap, which can set the minimum value, maximum value, increment and decrement (step value), and Enter the numbers manually.
After loading the bootstrap related css and js files, you can directly see the page effect. If your project is based on bootstrap, you can call it directly. Please see demo example 2
You can also refer to the project address: https://github.com/xixilive/jquery-spinner to view relevant parameter settings.
jQuery ui style, addition and subtraction on the right side
jQuery ui also provides a number addition and subtraction plug-in, which can set the minimum value, maximum value, increment and decrement (step value), and manually enter numbers. Please see demo example 3
If your project uses jquery ui, you can call jquery ui to implement the function of adding and subtracting numbers.
The above is all the content described in this article. I hope you will like it and it will help you master jQuery.