jquery-spinner

主题

  基于jQuery实现的组件,支持最大值,最小值,起始值,步进值,异常处理,事件通知。

详情

使用自定义配置


配置文件如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var options = {
maxValue: 10, //设置所能到达的最大值,默认为 999
minValue: -5, //设置所能到达的最小值,默认为 -999
step: 2.131, //步进长度,默认为 1
inputWidth: 100, //根据最大值设置输入框的宽度,防止内容超出,默认为25
start: -2, //起始值,默认为 1
plusClick: function(element, val) {//点击plus按钮触发事件
console.log("plus button click: " + val);
},
minusClick: function(element, val) {//点击minus按钮触发事件
console.log("minus button click: " + val);
},
exceptionFun: function(exception) {//值超出设置的范围时触发事件,等于1说明超出上范围,等于-1说明超出下范围
console.log("exception: " + exception);
},
valueChanged: function(element, val) {//值变更时触发事件
console.log("value changed: " + val);
}
};
$(".wan-spinner").WanSpinner(options);

HTML文件如下:

1
2
3
4
5
<div class="wan-spinner wan-spinner-1">
<a href="javascript:void(0)" class="minus">-</a>
<input type="text" value="1">
<a href="javascript:void(0)" class="plus">+</a>
</div>


使用默认配置


HTML文件如下:
1
2
3
4
5
<div class="wan-spinner wan-spinner-2">
<a href="javascript:void(0)" class="minus">-</a>
<input type="text" value="1">
<a href="javascript:void(0)" class="plus">+</a>
</div>