基于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 相关文章推荐
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
javaScript知识点总结(必看篇)
Jun 10 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 Javascript
Angular2数据绑定详解
Apr 18 Javascript
js实现鼠标移动到图片产生遮罩效果
Oct 21 Javascript
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
vue使用nprogress实现进度条
Dec 09 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中通过smtp发邮件的类,测试通过
2007/01/22 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
javascript 进度条 实现代码
2009/07/30 Javascript
ExtJS 入门
2010/10/29 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
python实现的阳历转阴历(农历)算法
2014/04/25 Python
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
Python中返回字典键的值的values()方法使用
2015/05/22 Python
Python可变参数用法实例分析
2017/04/02 Python
Python中表示字符串的三种方法
2017/09/06 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
python 基于TCP协议的套接字编程详解
2019/06/29 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
python实现代码统计器
2019/09/19 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
外国语学院毕业生自荐信
2013/10/28 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
世界读书日的活动方案
2014/08/20 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
Pandas-DataFrame知识点汇总
2022/03/16 Python
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android