基于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 相关文章推荐
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
Aug 13 Javascript
JavaScript中this的使用详解
Nov 08 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
详解vuejs几种不同组件(页面)间传值的方式
Jun 01 Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 Javascript
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 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去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
php中引用符号(&amp;)的使用详解
2013/11/13 PHP
预加载css或javascript的js代码
2010/04/23 Javascript
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
JavaScript中的原型prototype完全解析
2016/05/10 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
Python实现的tab文件操作类分享
2014/11/20 Python
详解Python3.1版本带来的核心变化
2015/04/07 Python
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
python解析yaml文件过程详解
2019/08/30 Python
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
小学领导班子对照材料
2014/08/23 职场文书
党员十八大心得体会
2014/09/12 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
民主评议党员个人总结
2015/02/13 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
农村老人去世追悼词
2015/06/23 职场文书
新入职员工工作总结
2015/10/15 职场文书
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python