jquery-spinner

作者:frank 发表日期:2015-08-09 19:47:39 更新日期:2016-08-15 20:09:32 分类:猿文色

摘要

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

正文

使用自定义配置

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文件如下:

<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>

DEMO