`
xiangqian0505
  • 浏览: 317092 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

基于jQuery的Spin Button自定义文本框数值自增或自减（测试案例）

spin文本框数值自增或自减 
阅读更多 
/**  
 *  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
顶
14
踩
分享到：
| json对象转换成复杂Bean（包括bean、list<B ...
评论
1 楼 xisuchi 2012-07-23  
此功能作用是什么
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics