基于jQuery的Spin Button自定义文本框数值自增或自减
更新时间：2010年07月17日 12:02:15 作者：
这个jquery 插件可以让你的文本框增加一个自增或自减的小按钮，方便输入数值的控制。
有时候在设计表单时需要对文本框实现数值自增或自减功能，例如默认为1，点击向上按钮键则增加指定步长值，点击向下按钮键则减少指定步长值，使用jQuery插件jQuery Spin Button只需要几行代码就可实现该功能，效果如下图
使用说明
一，需要使用jQuery库文件和jQuery Spin Button库文件(目前版本1.1.1)
素材准备
上下按钮图片,默认路径为:/img/spin/,上下按钮图片命名为:spin-button.png,可进行自定义修改
实例代码
一，包含文件部分
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.spin.js"></script>
二，HTML部分(自定义文本框)
<input type="text" id="number" value="0" />
三，javascript部分(jQuery插件jQuery Spin Butt调用)
<script type="text/javascript">
$(document).ready(function(){
$('#number').spin();
});
</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://demo.jb51.net/js/jquery-spin/index.html
使用说明
一，需要使用jQuery库文件和jQuery Spin Button库文件(目前版本1.1.1)
素材准备
上下按钮图片,默认路径为:/img/spin/,上下按钮图片命名为:spin-button.png,可进行自定义修改
实例代码
一，包含文件部分
复制代码 代码如下:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.spin.js"></script>
二，HTML部分(自定义文本框)
复制代码 代码如下:
<input type="text" id="number" value="0" />
三，javascript部分(jQuery插件jQuery Spin Butt调用)
复制代码 代码如下:
<script type="text/javascript">
$(document).ready(function(){
$('#number').spin();
});
</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://demo.jb51.net/js/jquery-spin/index.html
相关文章
这篇文章主要为大家详细介绍了jQuery实现简易聊天框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
这篇文章主要介绍了jQuery动画特效,详细叙述了jQuery动画特效的实现方法,非常实用,需要的朋友可以参考下2014-08-08
本文主要讲诉了本人制作一个jquery焦点图切换的简易插件的过程，十分的详细，希望对大家能有所帮助2014-08-08
jQuery提供了强大的选择器让我们获取对象。在这边，我人为地将jQuery选择器分为两大部分：选择对象和筛选条件。选择对象表示要获取什么对象，筛选条件是对获取的对象进行筛选，最终留下符合某些特征的对象2013-08-08
jQuery 工具提示可以让网站上一些小的帮助信息显示更加直观，提升用户的体验。2011-05-05
这篇文章主要介绍了Jquery如何获取指定标签的对象及属性的设置与移除,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了jQuery结合CSS3来制作3D立方体旋转效果，切换图片时呈现3D立体图片画廊特效，需要的朋友可以参考下2015-11-11
用jQuery实现了三种情况下的变灰不可用的效果，当鼠标放到上面点击，右键菜单就会消失，其实解决的办法也很简单，只要在对应的单击事件里重新绑定右键菜单即可，需要的朋友可以参考下2015-09-09
这篇文章主要介绍了jQuery实现类似标签风格的导航菜单效果代码,涉及jquery鼠标事件操作页面元素的遍历与样式动态修改技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要讲述了一个JQuery入门基础，实现的过程效果都很简单，特别适合初学者来学习，感兴趣的小伙伴们可以参考一下2021-11-11
最新评论