jquery plug-in spinner using methods and considerations

jquery Digital Add-Subtract plugin

About Plus and minus the number like the Beijing-east to submit the order is now 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 implement the left and right add and subtract numbers, the invocation method is very simple, please see demo example 1.

<input type= "text" class= "spinner"/> Invocation is also very simple, first load the jquery library file and jquery.spinner.js, and then use the following code:

$ ('. Spinner '). Spinner (); Bootstrap style, right add and subtract bootstrap fire for a long time, based on 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 enter numbers manually.

<div class= "Input-group spinner" data-trigger= "spinner" id= "Spinner" > <input type= "text" class= "Form-control "Value=" 1 "data-max=" data-min= "1" data-step= "1" > <div class= "Input-group-addon" > <a href= "JAV" Ascript:; "class=" spin-up "data-spin=" Up "><i class=" icon-sort-up "></i></a> <a href=" JAVASC " Ript:; "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. See demo Example 2

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

jquery UI style, on the right plus the jquery UI also provides a digital subtraction plug-in, you can set the minimum, maximum, incremental decrement (step value), you can manually enter a number. See demo Example 3

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

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

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

and matters needing attention

In the beginning, I don't want to write this blog, I have to do a function recently. Is the need to use the plug-in function to spinner. The following figure

Spinner Plug-in effect diagram

Look at the effect of the picture, in fact, you should know what I want to do function. is a simple, in the next single volume there click, on the key or the next key, based on the price of the goods to sum up the calculation.

Just so simple, I am very conscious to write a blog? Certainly not such a reason, you baidu keyword: Jquery-spinner plug-ins. After the search, you'll probably be furious.

An article was reprinted n times, these I also forget, you are to do a spinner a taste of the instructions, need to send a post on it? The internet is already more information, you have made a lot of information rubbish, you are not a bit irresponsible?

So I choose to look at the source code to understand how this plugin is used.

B.fn.spinner.defaults = {
Value:1,//Initial value
Min:1,//min value
max:999,//MAX value
Step:1,//increment per step
Hold:true,//Hold (show no understanding)
Speed: "Medium",//Speed
Disabled:false//Whether you can modify
};

The above is the default value in this source code, this is the parameter, and then there is the function of the operation

A.prototype = {
Anything code
Change:function () {
JavaScript code, when the value is adapted, gets its value
},
Stopspin:function () {
JavaScript code
},
Startspin:function (d) {
JavaScript code
},
Iterator:function (d) {
JavaScript code
},
Value:function (d) {
JavaScript code
},
Disable:function () {
JavaScript code
}
};
The above is the entire built-in function of the plugin, you can get it when you use Firebug to agree to a node.

You may find on the Internet that the way to get the values in spinner is

Spinner.spinner ("value")

This only gets his initial value, and every time the change data is revised, this method of getting the value is unsuccessful.

In terms of the source code,

$ (function () {

$ ('. Add_num '). Ace_spinner (
{
value:0,
min:0,
MAX:200,
Step:1,
Btn_up_class: ' Btn-info ',
Btn_down_class: ' Btn-info ',
}
. On (' Change ', function () {

var num = $ (this). Val (); Get the revised number in the selection box
} );

});
Have the ability to see the source code of Plug-ins, do not go too much Baidu, too waste of time and feelings.