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;
}
JS
/*
*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)