JQuery版数值微调器

2019独角兽企业重金招聘Python工程师标准>>>

原创JQuery版数值微调器，给number输入框加上增减按钮，有小数的保留两位小数。

效果：

JS:

//JQuery版数值微调器，给number输入框加上增减按钮
$.fn.numberSpinner = function (options) {
    var obj = this;
    var btnW = 15;
    function _count(inputObj,operate) {
        var val = parseFloat(inputObj.val());
        var step = inputObj.attr('step')!=undefined ? parseFloat(inputObj.attr('step')) : 1;
        var minV = inputObj.attr('min')!=undefined ? parseFloat(inputObj.attr('min')) : undefined;
        var maxV = inputObj.attr('max')!=undefined ? parseFloat(inputObj.attr('max')) : undefined;
        var d = step%1;
        var result = operate=='+' ? val+step : val-step ;
        if(!!minV && result<minV) result = minV;
        else if(!!maxV && result>maxV) result = maxV;
        return d==0 ? parseInt(result) : round2(result);
    }
    obj.each(function () {
        var _this = $(this);
        var width = _this.width();
        var height = _this.height();
        var btns = $('<div style="width:'+btnW+'px;height:'+height+'px;background-color:#eeeeee;position:absolute;"></div>');
        var upArrow = $('<div class="upArrow" style="height:'+(height/2)+'px"></div>');
        var downArrow = $('<div class="downArrow" style="height:'+(height/2)+'px"></div>');
        _this.after(btns);
        $(btns).css({marginLeft:width-btnW+1,marginTop:-height-1});
        $(btns).append(upArrow).append(downArrow);
        var upArrowTimer,upArrowTimer2,downArrowTimer,downArrowTimer2;
        $(upArrow).click(function () {  _this.val(_count(_this,'+')).change();  }).mousedown(function () {
            upArrowTimer = window.setTimeout(function () {   upArrowTimer2 = window.setInterval(function () {  _this.val(_count(_this,'+')).change();  },100);   },300);
        }).mouseup(function () {
            if(!!upArrowTimer) window.clearTimeout(upArrowTimer);
            if(!!upArrowTimer2) window.clearInterval(upArrowTimer2);
        });
        $(downArrow).click(function () {  _this.val(_count(_this,'-')).change();  }).mousedown(function () {
            downArrowTimer = window.setTimeout(function () {   downArrowTimer2 = window.setInterval(function () {  _this.val(_count(_this,'-')).change();  },100);   },300);
        }).mouseup(function () {
            if(!!downArrowTimer) window.clearTimeout(downArrowTimer);
            if(!!downArrowTimer2) window.clearInterval(downArrowTimer2);
        });
    });
}


//小数四舍五入保留两位，自动补零，返回是字符串类型
function round2(value){
    var value=float2(value);
    var xsd=value.toString().split(".");
    if(xsd.length==1){
        value=value.toString()+".00";
        return value;
    }
    if(xsd.length>1){
        if(xsd[1].length<2){
            value=value.toString()+"0";
        }
        return value;
    }
}

CSS:

.upArrow{background: url('../images/updown.png') center top no-repeat; }
.downArrow{background: url('../images/updown.png') center bottom no-repeat; }
.upArrow:hover,.downArrow:hover{background-color: #d2d2d2;}
.upArrow:active,.downArrow:active{background-color: #888888;background-image:url('../images/updown2.png');}

图片：

 updown.png     updown2.png

使用：

$('form').find('input[type=number]').not('[readonly]').not('disabled').numberSpinner();

 

转载于:https://my.oschina.net/peaksoho/blog/2999584