Home » jQuery 外掛

[jQ]JCalculator 1.0

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



JCalculator 是一個小巧簡單的網頁計算機，用來做一些基本的加加減減是沒問題滴！像是使用者在購物時旁邊有個計算機的話，也許可以讓他精打細算一下，看是要買一送一還是多買幾件可以免運費咧！

套件名稱：JCalculator
套件網址：1.0
作者網站：http://jqueryextensions.blogsp......ugin-for.html
套件網址：N/A
發佈日期：2011-02-14
檔案大小：12.3 KB
檔案下載：calculator.js calculator.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
40
41
42
43
44
45
46
47

defaultOpen(選填)
描述： 若設為 false 時, 當轉換後不會立即顯示
預設值： true
 
title(選填)
描述： 計算機的標題
預設值： 'Calculator'
 
accuracy(選填)
描述： 精準度; 可輸入的數字位數
預設值： 12
 
width(選填)
描述： 計算機的寬度
預設值： 164
 
height(選填)
描述： 計算機的高度
預設值： 180
 
movable(選填)
描述： 若設為 true 時則計算機可被移動; 需要引用 jQuery UI 才行
預設值： false
 
resizable(選填)
描述： 若設為 true 時則計算機可被縮放尺寸; 需要引用 jQuery UI 才行
預設值： false
 
show(選填)
描述： 計算機顯示的事件及動作
預設值： function(calc){
			$.fn.calculator.show(calc);
		}
 
hide(選填)
描述： 計算機關閉的事件及動作
預設值： function(calc){
			$.fn.calculator.hide(calc);
		}
 
buttonPressed(選填)
描述： 當按下計算機上的某按鈕時所要執行的動作
預設值： function(calc, button){}
 
displayChanged(選填)
描述： 當計算機顯示改變時所要執行的動作
預設值： function(calc, text, expression){}

方法說明：

檢視原始碼 JavaScript
1
2

// 把指定的元素轉換成計算機
$(selector).calculator(params);

使用範例：

檢視原始碼 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

<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/cupertino/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="calculator.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="calculator.js"></script>
<style type="text/css">
	.calc-wrapper {
		font: 11px Arial, Helvetica, sans-serif;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 變當計算機關閉時的效果
		$.fn.calculator.hide = function(calc){
			calc.fadeOut(500);
		};
 
		// 產生一個計算機
		// 可移動及改變尺寸
		// 預設不顯示
		$('#calc').calculator({
			movable: true,
			resizable: true, 
			defaultOpen: false
		});
 
		// 當按下 #showCalc 後
		$('#showCalc').click(function(){
			// 顯示計算機
			$('#calc').show();
 
			return false;
		})
	});
</script>
 
<body>
	<a id="showCalc" href="#">顯示計算機</a>
 
	<div id="calc"></div>
</body>

範例 1

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

備註:
原作者捉要加入引用 calculator.css，但筆者發現加入後的效果也沒特別的好。另外使用時記得額外引用 jQuery UI 的 js 及 css 主題檔案才行。

4 筆針對 [jQ]JCalculator 1.0 的迴響

  1. 您好~
    想請問一下
    我設成預設開啟
    是否可以把預設開啟的位置固定在網頁的某一區塊呢??(可以隨網頁的滑動而跟者移動)
    謝謝

  2. 你好, 我發現buttonPressed的參數無法使用(拿不到是哪個按鈕按下), 原因是addButton的時候沒有參數傳進去,
    // function to add button
    ...
    calc.settings.buttonPressed();
    ...

    另外想問一下我想要在show的時候加入把calc.text清掉的功能, 但我發現在產生計算機的時候設的function沒有效果, 請問這邊是否我有理解錯誤呢?

    $('#calc').calculator({
    show:function(calc){
    console.log("show");
    calc.init();
    $.fn.calculator.show(calc);
    },
    hide:function(calc){
    calc.fadeOut(500);
    }
    });

    • Good Job!

      buttonPressed 的參數就如同你說的, 將原始碼 110 行改成以下就可以

      檢視原始碼 JavaScript
      1

      calc.settings.buttonPressed(calc, button);

      然後他的 show 這參數其實根本沒用到，如果你是要清空計算機上的數字跟內容時，我覺得直接找到 C 鈕讓它按一下比較快。

      假設顯示時要一併清除上一次輸入的話

      檢視原始碼 JavaScript
      1

      $('#calc').show().find('.calc-button:contains(C)').trigger('click');

發表迴響