jQuery数字加减插件

最新推荐文章于 2022-04-12 08:44:47 发布

wulouzhe

最新推荐文章于 2022-04-12 08:44:47 发布

阅读量1.9k

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/wulouzhe/article/details/42297361

版权

Jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery数字加减插件.

HTML:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>spinner加减</title>
    <link rel="stylesheet" type="text/css" href="css/spinner.css" />
    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.spinner.js"></script>
    <style type="text/css">
        .wrapBox { width: 500px; margin: 20px auto;}
    </style>

</head>
<body>
    <div class="wrapBox">
        <div class="spinner">
            <button class="decrease">-</button>
            <input type="text" class="spinnerTxt" />
            <button class="increase">+</button>
            <div class="cb"></div>
        </div>
    </div>
    <script type="text/javascript">
        $('.spinner').spinner();
    </script>
</body>
</html>

CSS

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
    margin:0;
    padding:0;
    border:0;
    font:inherit;
    font-size:100%;
    vertical-align:baseline
}
.cb { width: 0; height: 0; line-height: 0; overflow: hidden;}
.spinner { height: 26px;}
button{
    width:24px;
    height: 24px;
    text-align: center;
    color:#e5312a;
    font:22px Arial bold;
    padding:0;
    outline:none;
}
.spinner .decrease {
    cursor: pointer;
    background: #FFF;
    border:1px solid #e6e6e6;
    float: left;
}
.spinner .increase {
    cursor: pointer;
    background: #FFF;
    border:1px solid #e6e6e6;
    float: left;
}

.spinnerTxt {
    height:20px;
    width:28px;
    overflow:hidden;
    border: 1px solid #e6e6e6;
    text-align: center;
    color:#FFFFFF;
    background:#F60;
    *zoom:1;
    -webkit-box-shadow:0 3px 3px -4px #aaa;
    -moz-box-shadow:0 3px 3px -4px #aaa;
    box-shadow:0 3px 3px -4px #aaa;
    float: left;
}
.spinnerTxt.passive,.spinnerTxt.invalid {
    background: #e5312a;
}

/*
*spinner插件 默认是1 最小是0
*
*/
;(function($){
    $.fn.spinner = function(opts){
        return this.each(function(){
            var defaults = {value:1,min:0};
            var options = $.extend(defaults,opts);
            var keycodes = {up:38,down:40};
            var objSpinner = $(this);
            var textField = objSpinner.find('.spinnerTxt').addClass('value').attr('maxlength','2').val(options.value).bind('keyup paste change',function(e){
                var field = $(this);
                if(e.keyCode == keycodes.up){
                    changeValue(1);
                }else if(e.keyCode == keycodes.down){
                    changeValue(-1);
                }else if(getValue(field) != objSpinner.data('lastValidValue')){
                    validateAndTrigger(field);
                }
            });
            var increaseButton = objSpinner.find('.increase').click(function(){
                changeValue(1);
            });
            var decreaseButton = objSpinner.find('.decrease').click(function(){
                changeValue(-1);
            });
            validate(textField);
            objSpinner.data('lastValidateValue',options.value);

            function validateAndTrigger(field){
                clearTimeout(objSpinner.data('timeout'));
                validate(field);
                //var value = validate(field);
                //如果是有效数字
                //if (!isInvalid(value)) {
                    //这里没搞懂
                    //textField.trigger('update', [field, value])
                //}

            }
            function validate(field){
                var value = getValue();
                if(value <= options.min){
                    decreaseButton.attr('disabled','disabled').css({cursor:'auto',background:'#e6e6e6'});
                }else{
                    decreaseButton.removeAttr('disabled').css({cursor:'pointer',background:'#FFF'});
                    field.toggleClass('invalid',isInvalid(value)).toggleClass('passive',value === 0);
                }
                //如果不是有效的值
                if(isInvalid(value)){
                    var timeout = setTimeout(function(){
                        textField.val(objSpinner.data('lastValidValue'));
                        validate(field)
                    },500);
                    objSpinner.data('timeout',timeout);
                }else{
                    objSpinner.data('lastValidValue',value);
                }
                return value;
            }
            function changeValue(delta){
                textField.val(getValue() + delta);
                validateAndTrigger(textField);

            }

            /*只要大于0的整数就会返回false
            * 只要小于0的整数就会返回true
            * 只要是字符串就会返回true
            */

            function isInvalid(value){
                return isNaN(+value) || value < options.min;
            }

            /*
            *  function getValue(field) {
            *    field = field || textField;
            *    var value = field.val() || 0；
            *    return parseInt(value, 10);
            *  }
            */
            function getValue(field){
                field = field || textField;
                return parseInt(field.val() || 0, 10);
            }

        })
    }
})(jQuery)