最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jquery插件spinner使用方法与注意事项
时间：2016-03-25 编辑：简简单单 来源：一聚教程网
jQuery数字加减插件
左右加减数字像京东提交订单时目前使用的是左右加减数字的效果，这个效果直接明了，操作简单。我们使用jquery.spinner.js插件实现左右加减数字，调用方法非常简单，请看演示示例1。
调用也非常简单，先载入jquery库文件和jquery.spinner.js，然后使用以下代码：
$('.spinner').spinner(); Bootstrap风格，右侧加减Bootstrap火了很久了，基于bootstrap风格的各类应用也非常多，下面给大家介绍一个基于bootstrap的数字加减插件，可以设置最小值、最大值、递增递减（步长值），可手动输入数字。
将bootstrap相关css和js文件载入后，便可直接看到页面效果，如果你的项目基于bootstrap，那么直接就可以调用它了。请看演示示例2
您还可以参考该项目地址：https://github.com/xixilive/jquery-spinner查看相关参数设置。
jQuery ui风格，右侧加减jQuery ui也提供了数字加减插件，可以设置最小值、最大值、递增递减（步长值），可手动输入数字。请看演示示例3
如果你的项目使用了jquery ui，那就可以调用jquery ui来实现数字加减的功能了。
$("#spinner").spinner({ max:10, min:0, step:2 });
与注意事项
开始，我不是不想写这个博文的，最近要做一个功能。就是需要使用到spinner这个插件功能。如下图
spinner插件效果图
看了效果图，其实，你应该知道我要做啥功能了。就是一个简单的，在下单量那里点击，上键或者下键，根据对于的商品价格进行总结计算。
就这么一个简单的，我好意识要写博客？肯定不是这样原因，你百度一下关键字：jquery-spinner插件。搜索完之后，你估计会愤怒。
一篇文章被转载了N次，这些我也就算了，你就是做一个spinner浅尝辄止的说明，需要一篇接一篇的转发吗？互联网本来就信息多，你们这造了多少信息垃圾，你们就不一点不负责么？
所以我选择看源代码来明白这个插件到底怎么用。
b.fn.spinner.defaults = {
value: 1, //初始值
min: 1, //最小值
max: 999, //最大值
step: 1, //每一步增量
hold: true, //保持（表示没看懂）
speed: "medium", //速度
disabled: false //是否可以修改
};
上面是这个源码的中的默认值，这是是参数，然后还有操作的函数
a.prototype = {
//anything code
change: function() {
//javascript code ，值改编的时候，获取其值
},
stopSpin: function() {
//javascript code
},
startSpin: function(d) {
//javascript code
},
iterator: function(d) {
//javascript code
},
value: function(d) {
//javascript code
},
disable: function() {
//javascript code
}
};
上面是是这个插件的全部的内置函数，你用firebug答应结点的时候时候，也可以获取到。
你可能在网上找到说，获取spinner中的数值的方法是
spinner.spinner("value")
这只能获取他的初始值，每次change数据改版的时候，这种获取值的方法是失败的.
从源代码来看的话
$(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(); //获取选择框里面的改版后数字
} );
});
有能力的多看插件的源代码，不要去过分的百度，太浪费时间和感情了。