基于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 grid取到数据而不显示的解决
Dec 29 Javascript
Javascript的闭包
Dec 31 Javascript
预加载css或javascript的js代码
Apr 23 Javascript
javascript中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 Javascript
js实现轮播图特效
May 28 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数据加密详解
2013/06/18 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
php使用MySQL保存session会话的方法
2015/06/18 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python回调函数用法实例分析
2015/05/09 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
python 使用shutil复制图片的例子
2019/12/13 Python
Django ModelForm操作及验证方式
2020/03/30 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
keras 多任务多loss实例
2020/06/22 Python
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
建筑工程造价专业自荐信
2014/07/08 职场文书
学校四风对照检查材料
2014/08/28 职场文书
党的群众路线调研报告
2014/11/03 职场文书
导游词之塘栖古镇
2019/12/04 职场文书
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技