jQuery插件jQuery Spin Button自定义文本框数值自增或自减
/** *jquery.spin-button *(c) 2008 Semooh (http://semooh.jp/) * *Dual licensed under the MIT (MIT-LICENSE.txt) *and GPL (GPL-LICENSE.txt) licenses. * **/(function($){$.fn.extend({ spin: function(opt){ return this.each(function(){ opt = $.extend({ imageBasePath: 'img/spin/', 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: 'bottom', padding: 0, margin: 0}); txt.after(btn); txt.css({marginRight:0, 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);<script type="text/javascript" src="http://www.biuuu.com/demo/jquery.js"></script><script type="text/javascript" src="http://www.biuuu.com/demo/jquery_spin_button/jquery.spin.js"></script><script type="text/javascript">$(document).ready(function(){$('#number').spin();//$('#number').spin({interval:10});//$('#number').spin({max:100,min: -100});//$('#number').spin({imageBasePath: '/images/'});});</script><input type="text" id="number" value="0" />
素材准备
上下按钮图片,默认路径为:/img/spin/,上下按钮图片命名为:spin-button.png,可进行自定义修改
实例代码
一，包含文件部分
1. <script type="text/javascript" src="jquery.js"></script>
2. <script type="text/javascript" src="jquery.spin.js"></script>
二，HTML部分(自定义文本框)
1. <input type="text" id="number" value="0" />
三，javascript部分(jQuery插件jQuery Spin Butt调用)
1. <script type="text/javascript">
2. $(document).ready(function(){
3. $('#number').spin();
4. });
5. </script>
由上可知，使用jQuery插件jQuery Spin Button自定义文本框数值自增或自减非常简单，只需要设置好按钮图片，数值的初始值，就可实现自定义文本框数值自增或自减功能。
四，用户自定义配置
imageBasePath: '/img/spin/',按钮图片路径
spinBtnImage: 'spin-button.png',图片按钮图片名
spinUpImage: 'spin-up.png', 向上自增按钮图片名
spinDownImage: 'spin-down.png', 向下自减按钮图片名
interval: 1,步长值
max: null,最大值
min: null, 最小值
timeInterval: 500,点击时间间隔
timeBlink: 200点击闪烁时间
1，自定义步长值为10(代码同上javascript部分)
$('#number').spin({interval:10});
2，自定义最大值与最小值
$('#number').spin({max:100,min: -100});
3,自定义按钮图片路径
$('#number').spin({imageBasePath: '/images/'});
jQuery插件jQuery Spin Button自定义配置对于定制个性化的文本框数值自增自减功能非常方便，使用也非常简单，总的来说，自定义文本框数值自增或自减使用jQuery插件jQuery Spin Button一行代码轻松搞定。
查看演示：http://www.biuuu.com/demo/jquery_spin_button/jquery_spin.html
页:
[1]