Skip to content

Instantly share code, notes, and snippets.

@scopevale
Created January 24, 2012 12:00
Show Gist options
  • Save scopevale/1669828 to your computer and use it in GitHub Desktop.
Save scopevale/1669828 to your computer and use it in GitHub Desktop.
jQuery UI 1.8 - calculator demo
.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; }
<div id="container">
<div id="calc"></div>
</div>
$(document).ready(function() {
$("#calc").calculator();
});
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
...
(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);
@crisu83
Copy link

crisu83 commented Feb 23, 2013

Thanks for this example, very useful.

@elouazzani
Copy link

thank you ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment