基于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 相关文章推荐
JavaScript中的Document文档对象
Jan 16 Javascript
定义select的边框颜色
Apr 28 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
js点击更换背景颜色或图片的实例代码
Jun 25 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 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
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
php中使用GD库做验证码
2016/03/31 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
javascript 事件处理程序介绍
2012/06/27 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
Python实现矩阵转置的方法分析
2017/11/24 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
keras的ImageDataGenerator和flow()的用法说明
2020/07/03 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
惠普香港官方商店:HP香港
2019/04/30 全球购物
教育科研先进个人材料
2014/01/26 职场文书
学校感恩教育活动总结
2014/07/07 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
特此通知格式
2015/04/27 职场文书
浅谈如何保证Mysql主从一致
2022/03/13 MySQL