0
点赞
收藏
分享

微信扫一扫

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


举报

相关推荐

0 条评论