付费节点推荐
免费节点
节点使用教程
jquery.spinner.js是一个依赖于JQuery的JS插件。可以很方便的实现购物车数量的加减，也支持使用键盘上的上下键来改变购物车的数量。jquery.spinner.js已经处理了非数值的处理和负数的异常情况，还预定了像月份、时间、货币等特定的格式，这些都是用HTML5的data属性实现的，使用起来非常的方便。
1、引入jquery.spinner.js
|
1
|
<script src="./static/js/jquery.spinner.min.js" ></script>
|
2、基本的HTML代码
|
1
2 3 4 5 |
<div data-trigger="spinner" id="spinner">
<a href="javascript:;" data-spin="down">-</a> <input type="text" value="1" data-rule="quantity" data-max='100'> <a href="javascript:;" data-spin="up">+</a> </div> |
就这样，jquery.spinner.js已经可以正常工作了，购物车数量加减的功能就完成了。jquery.spinner.js的优秀还不止于此，他可以让你很方便的自定义数值，提供三个选项和一些data属性。
jquery.spinner.js的用法和参数
$(“#spinner”)
.spinner(‘delay’, 200) //spinner延迟触发的时间，微秒。
.spinner(‘changed’, function(e, newVal, oldVal){
//spinner被改变的回调函数
})
.spinner(‘changing’, function(e, newVal, oldVal){
//spinner正在改变的回调函数
});
min：最小的值
max：最大的值
step：步数，也就是每次改变的值。
precision：小数点后保留几位。
jquery.spinner.js预定义数值规则：
currency: {min: 0.00, max: null, step: 0.01, precision: 2},
quantity: {min: 1, max: 999, step: 1, precision:0},
percent: {min: 1, max: 100, step: 1, precision:0},
month: {min: 1, max: 12, step: 1, precision:0},
day: {min: 1, max: 31, step: 1, precision:0},
hour: {min: 0, max: 23, step: 1, precision:0},
minute: {min: 1, max: 59, step: 1, precision:0},
second: {min: 1, max: 59, step: 1, precision:0}
未经允许不得转载：Bcoder资源网 » JS购物车数量加减插件spinner.js
评论前必须登录！
登陆 注册