Home » jQuery 外掛

[jQ]Smart Spin

[ 日期： | 瀏覽：5,235 | 迴響：搶沙發 ]
範例 1
請協助我把這個效果加到我的網站 (只要 600 元)
沒錯!只要 600 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!



Smart Spin 提供使用者在數值型資料時的輔助功能。除了標準的直接輸入或是上下鈕之外，也支援 Page Down 和 Page Up 的方式來進行大幅度的增減；甚至還支援滑鼠滾輪方式的控制呢。

套件名稱：Smart Spin
套件版本：N/A
作者網站：http://www.egrappler.com/jquery-spin-button-plugin-smart-spin
套件網址：N/A
發佈日期：2010-04-19
檔案大小：8.85 KB
檔案下載：smartspinner.js smartspinner.css

參數說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

min(選填)
描述： 最小值
預設值： 0
 
max(選填)
描述： 最大值
預設值： 100
 
stepInc(選填)
描述： 按下增減鈕時增減的數值大小
預設值： 1
 
pageInc(選填)
描述： 按下 Page Down 或是 Page Up 鈕時增減的數值大小
預設值： 10
 
mask(選填)
描述： 當 spin 控制項失去焦點時顯示的內容
預設值： ''
 
initValue(選填)
描述： 初始值
預設值： 0
 
width(選填)
描述： spin 控制項的寬
預設值： 50
 
height(選填)
描述： spin 控制項的高
預設值： 15
 
btnWidth(選填)
描述： spin 控制項按鈕的寬，但這值取決於影像的寬度
預設值： 15
 
callback(選填)
描述： 當 spin 控制項值改變時會觸發該函式
預設值： null

方法說明：

檢視原始碼 JavaScript
1
2
3
4
5

// 把指定的輸入框轉換成 spin 控制項
$(selector).spinit(options);
 
// 把指定 spin 控制項值重設為 val
$(selector).reset(val);

使用範例：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<link type="text/css" rel="stylesheet" href="css/smartspinner.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="smartspinner.js"></script>
<style type="text/css">
	#total {
		height: 50px;
		line-height: 50px;
		vertical-align: middle;
		font-size: 50px;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 初始值
		var p = 10, m = 800;
 
		// 設定人數, 當值改變後會執行 onperson()
		$('#person').spinit({
			height: 30,
			width: 100,
			min: 1,
			initValue: p, 
			max: 100, 
			callback: onperson, 
			mask: '人數'
		});
 
		// 設定金額, 當值改變後會執行 onmoney()
		$('#money').spinit({
			height: 30,
			width: 100,
			min: 0,
			initValue: m, 
			max: 10000, 
			callback: onmoney, 
			mask: '金額'
		});
 
		function onperson(val) {
			p = val;
			calculate();
		}
 
		function onmoney(val) {
			m = val;
			calculate();
		}
 
		// 計算相乘後的值
		function calculate() {
			$('#total').html(p * m);
		}
	});
</script>
 
<body>
	<input type="text" id="person" class="smartspinner" /> X <input type="text" id="money" class="smartspinner" /> = <span id="total"> 0 </span>
</body>
範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

發表迴響