基于jQuery的Spin Button自定义文本框数值自增或自减


Posted in Javascript onJuly 17, 2010

有时候在设计表单时需要对文本框实现数值自增或自减功能,例如默认为1,点击向上按钮键则增加指定步长值,点击向下按钮键则减少指定步长值,使用jQuery插件jQuery Spin Button只需要几行代码就可实现该功能,效果如下图
基于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.3water.com/js/jquery-spin/index.html

Javascript 相关文章推荐
ExtJs扩展之GroupPropertyGrid代码
Mar 05 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
Aug 09 Javascript
简单实用的全选反选按钮例子
Oct 18 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
js获取select标签选中值的两种方式
Jan 09 Javascript
用js将内容复制到剪贴板兼容浏览器
Mar 18 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
vue配置请求本地json数据的方法
Apr 11 Javascript
vue打包之后生成一个配置文件修改接口的方法
Dec 09 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 Javascript
JS延迟加载(setTimeout) JS最后加载
Jul 15 #Javascript
JavaScript.Encode手动解码技巧
Jul 14 #Javascript
JavaScript中的一些定位属性[图解]
Jul 14 #Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 #Javascript
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 #Javascript
javascript客户端解决方案 缓存提供程序
Jul 14 #Javascript
IE6图片加载的一个BUG解决方法
Jul 13 #Javascript
You might like
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
php跨服务器访问方法小结
2015/05/12 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
BOM与DOM的区别分析
2010/10/26 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
2017/11/03 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
haskell实现多线程服务器实例代码
2013/11/26 Python
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
python中学习K-Means和图片压缩
2017/11/20 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
python基础梳理(一)(推荐)
2019/04/06 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
事业单位个人应聘自荐信
2013/09/21 职场文书
艺术系应届生的自我评价
2013/10/19 职场文书
个人授权委托书
2014/09/15 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
技术负责人岗位职责
2015/02/10 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
食品安全主题班会
2015/08/13 职场文书
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang