/**
* jquery.spin.js
* 效果请下载附件查看
**/
(function($){
$.fn.extend({
spin: function(opt){
return this.each(function(){
opt = $.extend({
spinBtnImage: 'spin-button.png',//图片名称
spinUpImage: 'spin-up.png',//点击增加显示的图片
spinDownImage: 'spin-down.png',//点击减少显示的图片
interval: 1,间隔值
max: null, //最大值
min: null, //最小值
timeInterval: 500,选中多少毫秒执行一次
timeBlink: 200
}, opt || {});
var txt = $(this);
var spinBtnImage = opt.imageBasePath+opt.spinBtnImage;
var btnSpin = new Image();
btnSpin.src = spinBtnImage;
var spinUpImage = opt.imageBasePath+opt.spinUpImage;
var btnSpinUp = new Image();
btnSpinUp.src = spinUpImage;
var spinDownImage = opt.imageBasePath+opt.spinDownImage;
var btnSpinDown = new Image();
btnSpinDown.src = spinDownImage;
var btn = $(document.createElement('img'));
btn.attr('src', spinBtnImage);
btn.css({cursor: 'pointer', verticalAlign: '-20%', padding: 0, margin: 0});
txt.after(btn);
txt.css({marginRight:-18, paddingRight:0});
function spin(vector){
var val = txt.val();
if(!isNaN(val)){
val = parseFloat(val) + (vector*opt.interval);
if(opt.min!=null && val<opt.min) val=opt.min;
if(opt.min!=null && val>opt.max) val=opt.max;
if(val != txt.val()){
txt.val(val);
txt.change();
src = (vector > 0 ? spinUpImage : spinDownImage);
btn.attr('src', src);
if(opt.timeBlink<opt.timeInterval)
setTimeout(function(){btn.attr('src', spinBtnImage);}, opt.timeBlink);
}
}
}
btn.mousedown(function(e){
var pos = e.pageY - btn.offset().top;
var vector = (btn.height()/2 > pos ? 1 : -1);
(function(){
spin(vector);
var tk = setTimeout(arguments.callee, opt.timeInterval);
$(document).one('mouseup', function(){
clearTimeout(tk); btn.attr('src', spinBtnImage);
});
})();
return false;
});
});
}
});
})(jQuery);
<html>
<script type="text/javascript" src="jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="jquery.spin.js" ></script>
<center>
<ul >
<li>
<label>打印份数：</label>
<input name="caseCount" id="caseCount" style="width:300px" value="0" readonly/>
<b style="color:red;">*</b>
</li>
</ul>
</center>
<script type="text/javascript">
//加载文本框控制键自增自减
$(document).ready(function(){
//$('#caseCount').spin();
//$('#number').spin({interval:10});
$('#caseCount').spin({max:100,min: 0,imageBasePath: 'img/'});
//$('#number').spin({imageBasePath: '/images/'});
});
</script>
</html>
- 大小: 3.2 KB
分享到：
相关推荐
有时候在设计表单时需要对文本框实现数值自增或自减功能，例如默认为1，点击向上按钮键则增加指定步长值，点击向下按钮键则减少指定步长值，使用jQuery插件jQuery Spin Button只需要几行代码就可实现该功能，效果如...
jQuery Spin Button是一款基于jQuery的插件，用于在文本框中实现数值的自增或自减功能，它为用户提供了方便的交互方式，尤其适用于输入数量、评分等需要增减数值的场景。这款插件通常应用于电子商务网站的商品购买...
有时候在设计表单时需要对文本框实现数值自增或自减功能，例如默认为1，点击向上按钮键则增加指定步长值，点击向下按钮键则减少指定步长值，使用jQuery插件jQuery Spin Button只需要几行代码就可实现该功能，效果如...
<input type="number" id="spinButton" value="0"> ``` **4. jQuery 配置与使用** 接下来，使用jQuery初始化Spin Button插件。在文档加载完成后，找到指定的`<input>`元素并应用插件： ```javascript $(document)...
jQuery Spin button 是一款非常实用的前端插件，它主要用于文本框（input[type="text"]）中的数值自动增减功能。这款插件利用了JavaScript库jQuery的强大功能，为用户提供了一种直观且易于操作的方式，以便在网页...
50多个jQuery插件使用详解： 1 JQuery Pager分页器 2 jQuery Spin Button自定义文本框数值自增或自减 3 FontSizer实现Javascript自定义动态调整网页文字大小 4 Magnify放大镜实现javascript图片放大功能 等等.....
- **jQuery Spin Button Control**: 实现数值增减控制。 - **jQuery Ajax Form Builder**: 快速构建Ajax表单。 - **jQuery Focus Fields**: 自动聚焦到表单中的特定字段。 - **jQuery Time Entry**: 设置时间...
- **jQuery Spin Button Control**: 数字上下调节按钮插件。 - **jQuery Ajax Form Builder**: 基于Ajax的表单构建器。 - **jQuery Focus Fields**: 表单元素聚焦效果。 - **jQuery Time Entry**: 时间输入插件。 #...
### jQueryEasyUI API中文文档概览 #### 一、Base基础 **1.1 Documentation文档** - **特性：** - 提供了基础组件的使用方法及API介绍。 - **事件：** - 无特别指出的基础事件通常遵循jQuery事件绑定机制。 - *...