基于jQuery的Spin Button自定義文本框數(shù)值自增或自減

更新時(shí)間：2010年07月17日 12:02:15 作者：

這個(gè)jquery 插件可以讓你的文本框增加一個(gè)自增或自減的小按鈕，方便輸入數(shù)值的控制。

有時(shí)候在設(shè)計(jì)表單時(shí)需要對(duì)文本框?qū)崿F(xiàn)數(shù)值自增或自減功能，例如默認(rèn)為1，點(diǎn)擊向上按鈕鍵則增加指定步長值，點(diǎn)擊向下按鈕鍵則減少指定步長值，使用jQuery插件jQuery Spin Button只需要幾行代碼就可實(shí)現(xiàn)該功能，效果如下圖

使用說明
一，需要使用jQuery庫文件和jQuery Spin Button庫文件(目前版本1.1.1)

素材準(zhǔn)備
上下按鈕圖片,默認(rèn)路徑為:/img/spin/,上下按鈕圖片命名為:spin-button.png,可進(jìn)行自定義修改

實(shí)例代碼
一，包含文件部分

復(fù)制代碼代碼如下:

 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.spin.js"></script> 

二，HTML部分(自定義文本框)

復(fù)制代碼代碼如下:

三，javascript部分(jQuery插件jQuery Spin Butt調(diào)用)

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('#number').spin(); 
}); 
</script> 

由上可知，使用jQuery插件jQuery Spin Button自定義文本框數(shù)值自增或自減非常簡單，只需要設(shè)置好按鈕圖片，數(shù)值的初始值，就可實(shí)現(xiàn)自定義文本框數(shù)值自增或自減功能。

四，用戶自定義配置
imageBasePath: '/img/spin/',按鈕圖片路徑
spinBtnImage: 'spin-button.png',圖片按鈕圖片名
spinUpImage: 'spin-up.png', 向上自增按鈕圖片名
spinDownImage: 'spin-down.png', 向下自減按鈕圖片名
interval: 1,步長值
max: null, 最大值
min: null, 最小值
timeInterval: 500, 點(diǎn)擊時(shí)間間隔
timeBlink: 200 點(diǎn)擊閃爍時(shí)間

1，自定義步長值為10(代碼同上javascript部分)
$('#number').spin({interval:10});

2，自定義最大值與最小值
$('#number').spin({max:100,min: -100});

3,自定義按鈕圖片路徑
$('#number').spin({imageBasePath: '/images/'});

jQuery插件jQuery Spin Button自定義配置對(duì)于定制個(gè)性化的文本框數(shù)值自增自減功能非常方便，使用也非常簡單，總的來說，自定義文本框數(shù)值自增或自減使用jQuery插件jQuery Spin Button一行代碼輕松搞定。
查看演示：http://demo.jb51.net/js/jquery-spin/index.html

您可能感興趣的文章:

相關(guān)文章

jquery判斷元素是否隱藏的多種方法
這篇文章主要介紹了jquery判斷元素是否隱藏的多種方法,本文總結(jié)了多種判斷方法實(shí)例,需要的朋友可以參考下
2014-05-05
jquery創(chuàng)建div 實(shí)現(xiàn)代碼
有時(shí)候我們需要?jiǎng)討B(tài)創(chuàng)建一個(gè)div下面是具體的實(shí)現(xiàn)代碼，大家只要熟悉了jquery的一些基本用法就能輕松的實(shí)現(xiàn)。
2009-04-04
jQuery Ajax前后端使用JSON進(jìn)行交互示例
本篇文章主要介紹了jQuery Ajax前后端使用JSON進(jìn)行交互示例，實(shí)現(xiàn)前端通過jQuery Ajax傳輸json到后端，后端接收json，對(duì)json進(jìn)行處理，后端返回一個(gè)json給前端，有興趣的可以了解一下。
2017-03-03
JQuery中如何傳遞參數(shù)如click(),change()等具體實(shí)現(xiàn)
有個(gè)需求讓兩個(gè)select中option相互轉(zhuǎn)換,這個(gè)作業(yè)就是給幾個(gè)按鈕添加click()事件接下來為大家介紹下如何在click(),change()傳遞參數(shù)
2013-04-04
用jQuery將JavaScript對(duì)象轉(zhuǎn)換為querystring查詢字符串的方法
這篇文章主要介紹了用jQuery將JavaScript對(duì)象轉(zhuǎn)換為querystring查詢字符串的方法，本文給大家分享兩種方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-11-11
jQuery的學(xué)習(xí)步驟
首先我建議大家去看看<JQUERY實(shí)戰(zhàn)>這本書，稍后我會(huì)提供本書的jquery實(shí)戰(zhàn)PDF版本。能省點(diǎn)銀子最好啊。
2011-02-02
jQuery實(shí)現(xiàn)批量判斷表單中文本框非空的方法(2種方法)
這篇文章主要介紹了jQuery實(shí)現(xiàn)批量判斷表單中文本框非空的方法,實(shí)例分析了2種實(shí)現(xiàn)判定非空的技巧,涉及jQuery頁面元素遍歷的相關(guān)技巧,需要的朋友可以參考下
2015-12-12
基于jQuery的$.getScript方法去加載javaScript文檔解析
下面小編就為大家?guī)硪黄趈Query的$.getScript方法去加載javaScript文檔解析。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-11-11
jQuery md5加密插件jQuery.md5.js用法示例
這篇文章主要介紹了jQuery md5加密插件jQuery.md5.js用法,結(jié)合實(shí)例形式簡單分析了jQuery md5加密插件jquery.md5.js的簡單使用技巧,需要的朋友可以參考下
2018-08-08
jQuery 練習(xí)[二] jquery 對(duì)象選擇器(1)
根據(jù) id 選擇(通過 id 只能選擇一個(gè)對(duì)象), 如: $("#div2") ，jquery 對(duì)象選擇器是jquery的一個(gè)亮點(diǎn)。
2010-05-05