|
|
使用說(shuō)明
一，需要使用jQuery庫(kù)文件和jQuery Spin Button庫(kù)文件(目前版本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ù)制代碼 代碼如下:
<input type="text" id="number" value="0" />
三，Javascript部分(jQuery插件jQuery Spin Butt調(diào)用)
復(fù)制代碼 代碼如下:
<script type="text/Javascript">
$(document).ready(function(){
$('#number').spin();
});
</script>
由上可知，使用jQuery插件jQuery Spin Button自定義文本框數(shù)值自增或自減非常簡(jiǎn)單，只需要設(shè)置好按鈕圖片，數(shù)值的初始值，就可實(shí)現(xiàn)自定義文本框數(shù)值自增或自減功能。
四，用戶自定義配置
imageBasePath: '/img/spin/',按鈕圖片路徑
spinBtnImage: 'spin-button.png',圖片按鈕圖片名
spinUpImage: 'spin-up.png', 向上自增按鈕圖片名
spinDownImage: 'spin-down.png', 向下自減按鈕圖片名
interval: 1,步長(zhǎng)值
max: null, 最大值
min: null, 最小值
timeInterval: 500, 點(diǎn)擊時(shí)間間隔
timeBlink: 200 點(diǎn)擊閃爍時(shí)間
1，自定義步長(zhǎng)值為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ù)值自增自減功能非常方便，使用也非常簡(jiǎn)單，總的來(lái)說(shuō)，自定義文本框數(shù)值自增或自減使用jQuery插件jQuery Spin Button一行代碼輕松搞定。
查看演示：http://demo.jb51.NET/js/jquery-spin/index.html
JavaScript技術(shù)：基于jQuery的Spin Button自定義文本框數(shù)值自增或自減，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
