DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 基於jQuery的Spin Button自定義文本框數值自增或自減
基於jQuery的Spin Button自定義文本框數值自增或自減
編輯:JQuery特效代碼     
有時候在設計表單時需要對文本框實現數值自增或自減功能,例如默認為1,點擊向上按鈕鍵則增加指定步長值,點擊向下按鈕鍵則減少指定步長值,使用jQuery插件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.jb51.net/js/jquery-spin/index.html
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved