jQuery UI 1.8 - calculator demo

fiddle.css

.ui-calculator { width:9.65em; }
.ui-calculator-container { padding:.2em .2em 0; }
.ui-calculator-display { width:12.3em; padding:.3em; margin-bottom:.3em; font-size:0.7em; overflow:auto; }
.ui-calculator-numberpad, .ui-calculator-functionpad { width:7em; float:left; }
.ui-calculator-functionpad { width:2em; }
.ui-calculator li { float:left; margin:0 .2em .2em 0; }
.ui-calculator-button { display:block; width:2em; height:1.2em; padding:.3em 0 .5em; text-align:center; border:0; }
.ui-calculator-button-wide { width:4.3em; }
.ui-calculator-icon { margin:.2em auto; }

fiddle.html

<div id="container">
<div id="calc"></div>
</div>

fiddle.js

$(document).ready(function() {
	$("#calc").calculator();		
});

fiddle.manifest

name: jsFiddle/Gist demo - jQuery UI Calculator
description: jsFiddle demo hosted on Gist using jQuery UI to render a calculator
authors:
  - Gary Smith
title:
  - JS Fiddle - jsFiddle/Gist integration demo - calculator
resources:
  - /js/empty.js
  - /css/normalize.css
  - http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css
  - https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js
  - https://raw.github.com/gist/1669828/112ac65229c74a1298b1cffc89b48b6ee9d6ee59/jquery-ui-calculator.js
normalize_css: yes
...

jquery-ui-calculator.js

(function($) {

	$.widget("ui.calculator", {
		
		options: { 
			autoShow: true,
			currentSum: []
		},				
		
		_create: function() {
				
			var div = $("<div />"),
				list = $("<ul />", {
					"class": "ui-helper-reset ui-helper-clearfix"	
				}),
				li = $("<li />", {
					"class": "ui-corner-all	ui-state-default"
				}),
				a = $("<a />", {
					href: "#",
					"class": "ui-calculator-button"
				}),
				
				container = div.clone().addClass("ui-calculator-container ui-corner-all ui-widget-content ui-helper-clearfix"),
				display = div.clone().addClass("ui-corner-all ui-widget-content ui-calculator-display").text("0").appendTo(container),
				numberpad = div.clone().addClass("ui-calculator-numberpad").appendTo(container),
				functionpad = div.clone().addClass("ui-calculator-functionpad").appendTo(container),
				numberlist = list.clone().appendTo(numberpad),
				functionlist = list.clone().appendTo(functionpad),
				buttons = ["", "clear", 7, 8, 9, 4, 5, 6, 1, 2, 3, 0, "."],
				functions = ["/", "*", "-", "+", "="];
	
			for (var x = 0; x < buttons.length; x++) {
				
				var listitem = li.clone().appendTo(numberlist),
					linky = a.clone().text(buttons[x]).appendTo(listitem);
				
				if(x === 0) {
					$("<span></span>", {
						"class": "ui-calculator-icon ui-icon ui-icon-arrowthick-1-w",
						text: "Backspace"
					}).appendTo(linky);
				} else if (x === 1 || buttons[x] === 0) {
					linky.addClass("ui-calculator-button-wide");
				}					
			}
			
			for (var y = 0; y < functions.length; y++) {
				
				var listitem2 = li.clone().addClass("ui-state-default").appendTo(functionlist),
					linky2 = a.clone().text(functions[y]).appendTo(listitem2);	
			}
						
			this.element.addClass("ui-calculator ui-widget ui-helper-reset");
			
			(this.options.autoShow) ? container.appendTo(this.element) : container.appendTo(this.element).hide();
			
			this.element.find("li").bind({
				mouseenter: this._addHoverState,
				mouseleave: this._removeHoverState,
				click: this._buttonClick
			});
		},
				
		destroy: function() {
			$.Widget.prototype.destroy.call(this, arguments);
			this.element.removeClass("ui-calculator ui-widget ui-helper-reset");
			this.element.find("li").unbind();
			this.element.children(":first").remove();
		},
		
		disable: function() {
			$.Widget.prototype.disable.call(this, arguments);
			this.element.find("li").unbind();
		},
		
		enable: function() {
			$.Widget.prototype.enable.call(this, arguments);
			this.element.find("li").bind({
				mouseenter: this._addHoverState,
				mouseleave: this._removeHoverState,
				click: this._buttonClick
			});
		},
		
		show: function() {
			var el = this.element.children(":first");
			if (el.is(":hidden")) {
				el.show();	
			}
			
			this._trigger("show", null, this.element);
		},
		
		_addHoverState: function() {
			$(this).addClass("ui-state-hover");	
		},
		
		_removeHoverState: function() {
			$(this).removeClass("ui-state-hover");
		},
		
		_buttonClick: function() {

			var buttonText = $(this).text(),
				display = $(".ui-calculator-display"),
				newArray = $.ui.calculator.prototype.options.currentSum;
			
			if (buttonText == "Backspace") {							
				if (display.text() !== "0" && display.text().length > 1) {
					newArray.pop();							
					$.ui.calculator.prototype.options.currentSum = newArray;
				
					display.text(function(i, orig) {
						return orig.substring(0, orig.length - 1);
					});
				}
			} else if (buttonText == "clear") {
				$.ui.calculator.prototype.options.currentSum = [];
				display.text("0");
			} else if (buttonText == "=") {
				result = eval($.ui.calculator.prototype.options.currentSum.join(""));
				display.text(result);
				$.ui.calculator.prototype.options.currentSum = [result];
			} else if (buttonText == "/" || buttonText == "*" || buttonText == "-" || buttonText == "+") {				
				$.ui.calculator.prototype.options.currentSum.push(buttonText);
				display.text(buttonText);
			} else {
				$.ui.calculator.prototype.options.currentSum.push(buttonText);
				if (display.text() == "0" || display.text() == "/" || display.text() == "*" || display.text() ==  "-" || display.text() == "+") {
					display.text("");
				} 
				display.text(function(i, orig) {
					return orig + buttonText;
				});
			}
		}		
	});	
})(jQuery);

http://jsfiddle.net/gh/gist/jquery/edge/1669828/

Thanks for this example, very useful.

thank you ;)