基于jQuery的旋转按钮自定义文本框自动增加或减少

有时，在设计表单时，需要实现增加或减少文本框数值的功能。例如，默认值为1。单击向上按钮增加指定的步长值，单击向下按钮减少指定的步长值。使用jQuery旋转按钮，您只需要几行代码就可以实现这个功能。效果如下图所示。

使用说明1:上下按钮图片需要使用jQuery库文件和jQuery Spin Button库文件(当前版本1.1.1)准备。默认路径是：/img/spin/，上下按钮图片名为：spin-button.png。示例代码1可以定制和修改。包括文件在内的部分复制代码如下： Script type=' text/JAVAScript ' src=' http : jquery . js '/Script Script type=' text/JAVAScript ' src=' http : jquery . spin . js '/Script ii。HTML部分(自定义文本框)的复制代码如下：输入类型=' text' id=' number '值=' 0'/iii。javascript部分(由jQuery插件jQuery Spin Butt调用)复制如下： Script Type=' text/JavaScript ' $(文档)。ready (function () {$ ('# number '))。spin()；});/script从上面可以看出，使用jQuery Spin Button自定义文本框的数值自动增减非常简单。只需设置按钮图片和数值初始值，即可实现自定义文本框的数值自增或自减功能。用户定义的配置imageBasePath: '/img/spin/'，按钮图片路径spin btnimage 3360 ' spin-button . png '，图片名称spinUpImage: 'spin-up.png '，自增按钮图片名称spin down image : ' spin-down . png '，自减按钮图片名称interval: 1，步长max: null，最大min: null，最小timeInterval: 500自旋({ interval :10 })；2.自定义$ ('# number ')的最大值和最小值。spin ({max:100，min :-100 })；3、自定义按钮图片路径$ ('# number ')。旋转({ imagebasepath : '/images/' })；jQuery插件jQuery Spin Button自定义配置非常方便易用，用于自定义个性化文本框值自动递增和自动递减功能。一般来说，自定义文本框值的自动递增或自动递减可以通过使用一行jQuery spinbutton代码轻松完成。观点：http://demo.jb51.net/js/jquery-spin/index.html.