jQuery数字加减插件

来源：互联网发布：淘宝粗纺面料编辑：程序博客网时间：2024/05/07 14:08

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)

0 0