快捷導(dǎo)航

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

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

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

有時(shí)候在設(shè)計(jì)表單時(shí)需要對文本框?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自定義配置對于定制個(gè)性化的文本框數(shù)值自增自減功能非常方便，使用也非常簡單，總的來說，自定義文本框數(shù)值自增或自減使用jQuery插件jQuery Spin Button一行代碼輕松搞定。
查看演示：http://demo.jb51.net/js/jquery-spin/index.html

您可能感興趣的文章: