基于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判断元素是否隐藏的多种方法,本文总结了多种判断方法实例,需要的朋友可以参考下2014-05-05
有时候我们需要动态创建一个div下面是具体的实现代码，大家只要熟悉了jquery的一些基本用法就能轻松的实现。2009-04-04
本篇文章主要介绍了jQuery Ajax前后端使用JSON进行交互示例，实现前端通过jQuery Ajax传输json到后端，后端接收json，对json进行处理，后端返回一个json给前端，有兴趣的可以了解一下。2017-03-03
JQuery中如何传递参数如click(),change()等具体实现
有个需求让两个select中option相互转换,这个作业就是给几个按钮添加click()事件接下来为大家介绍下如何在click(),change()传递参数2013-04-04
用jQuery将JavaScript对象转换为querystring查询字符串的方法
这篇文章主要介绍了用jQuery将JavaScript对象转换为querystring查询字符串的方法，本文给大家分享两种方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
首先我建议大家去看看<JQUERY实战>这本书，稍后我会提供本书的jquery实战PDF版本。能省点银子最好啊。2011-02-02
这篇文章主要介绍了jQuery实现批量判断表单中文本框非空的方法,实例分析了2种实现判定非空的技巧,涉及jQuery页面元素遍历的相关技巧,需要的朋友可以参考下2015-12-12
基于jQuery的$.getScript方法去加载javaScript文档解析
下面小编就为大家带来一篇基于jQuery的$.getScript方法去加载javaScript文档解析。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
jQuery md5加密插件jQuery.md5.js用法示例
这篇文章主要介绍了jQuery md5加密插件jQuery.md5.js用法,结合实例形式简单分析了jQuery md5加密插件jquery.md5.js的简单使用技巧,需要的朋友可以参考下2018-08-08![jQuery 练习[二] jquery 对象选择器(1)](//img.jbzj.com/images/xgimg/bcimg9.png)
根据 id 选择(通过 id 只能选择一个对象), 如: $("#div2") ，jquery 对象选择器是jquery的一个亮点。2010-05-05
![jQuery 练习[二] jquery 对象选择器(1)](http://img.jbzj.com/images/xgimg/bcimg9.png)
最新评论