jquery realizes digital plus minus effect summary _jquery

We are online shopping to submit orders, on the Web page will generally have a select number of controls, asking buyers to choose the number of items to buy goods, developers will make the control can be achieved by clicking on the addition and subtraction fine-tuning operations, of course, can directly enter the number of pieces.

Add and subtract numbers

such as the Beijing-east to submit orders are currently used to add and subtract the effect of the number, the effect is straightforward, simple operation. We use the Jquery.spinner.js plug-in to achieve left and right add and subtract numbers, calling the method is very simple.

Copy Code code as follows:

<input type= "text" class= "spinner"/>

The call is also very simple, first load the jquery library files and jquery.spinner.js, and then use the following code:

Copy Code code as follows:

$ ('. Spinner '). Spinner ();

Bootstrap style, right plus minus

Bootstrap fire for a long time, based on the bootstrap style of various applications are also very many, the following to introduce a bootstrap based on the number of plug-ins, you can set the minimum, maximum, incremental decline (step value), you can manually enter a number.

Copy Code code as follows:

<div class= "Input-group spinner" data-trigger= "spinner" id= "Spinner" >
<input type= "text" class= "Form-control" value= "1" data-max= "ten" data-min= "1" data-step= "1" >
<div class= "Input-group-addon" >
<a href= "javascript:;" class= "spin-up" data-spin= "Up" ><i class= "icon-sort-up" ></i></a>
<a href= "javascript:;" class= "Spin-down" data-spin= "Down" ><i class= "Icon-sort-down" ></i></a >
</div>
</div>

Will bootstrap related CSS and JS files loaded, you can see the page effect directly, if your project based on Bootstrap, then directly can call it.

You can also refer to the project address: Https://github.com/xixilive/jquery-spinner to view the relevant parameter settings.

JQuery UI style, right plus minus

The JQuery UI also provides a digital subtraction plug-in that allows you to manually enter numbers by setting the minimum, maximum, and decreasing increments (step values).

Copy Code code as follows:

<input type= "text" id= "spinner"/>

If your project uses the jquery UI, you can invoke the jquery UI to implement the digital subtraction function.

Copy Code code as follows:

$ ("#spinner"). Spinner ({
Max:10,
min:0,
Step:2
});

Several of the above is my project in the use of jquery to achieve digital subtraction method, sorted out to share for everyone, although the function is relatively simple, but very practical.