Welcome and thanks for visiting! This is my first blog for the first plugin i made for jQuery. In a nutshell, jCalculator provides simple yet customizable calculator for a web application.
Download
JCalculator v1.0
UsageJCalculator Basic Usage
$().ready(function() {
$('#example1').calculator();
});
the default state of calculator when it is loaded.
title: defaults to 'Calculator'
the title of the calculator.
accuracy: defaults to 12
the number of digits to accept as input for the calculator.
width: defaults to 164,
the width of calculator.
height: defaults to 180
the height of calculator
movable: defaults to false
whether the calculator is draggable or not [works only if jQuery UI is included in the page]
resizable: defaults to false
whether the calculator is resizable or not [works only if jQuery UI is included in the page]
Special Considerations
For best experience please use this plugin with the jQuery UI included on the page. The plugin is not tested fully yet. Please report the issues here in case you found any bugs in the plugin.
Download
JCalculator v1.0
Usage
$().ready(function() {
$('#example1').calculator();
});
JCalculator Options
defaultOpen: defaults to truethe default state of calculator when it is loaded.
title: defaults to 'Calculator'
the title of the calculator.
accuracy: defaults to 12
the number of digits to accept as input for the calculator.
width: defaults to 164,
the width of calculator.
height: defaults to 180
the height of calculator
movable: defaults to false
whether the calculator is draggable or not [works only if jQuery UI is included in the page]
resizable: defaults to false
whether the calculator is resizable or not [works only if jQuery UI is included in the page]
JCalculator Events
buttonPressed: Supply a callback function to handle the event when a button is pressed by user
$( ".selector" ).calculator({ buttonPressed: function(calc, button) { ... } });
displayChanged: Supply a callback function to handle the event when the display of calculator is changed
$( ".selector" ).calculator({ displayChanged: function(calc, button) { ... } });
JCalculator Methods
No methods available yetSpecial Considerations
For best experience please use this plugin with the jQuery UI included on the page. The plugin is not tested fully yet. Please report the issues here in case you found any bugs in the plugin.
It's save my lot of effort to write code for this task.Thanks
ReplyDeleteIts a gud plugin to use in web-application.. Great Job!!
ReplyDeleteGreat plugin !!!
ReplyDeleteHow can i change design or just color ?
Thanks,
ReplyDeleteTo change design locate the <link> tag in <head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/x.y.z/themes/cupertino/jquery-ui.css" rel="stylesheet" />
and replace the theme cupertino/ with any of the following -
# base/
# black-tie/
# blitzer/
# cupertino/
# dark-hive/
# dot-luv/
# eggplant/
# excite-bike/
# flick/
# hot-sneaks/
# humanity/
# le-frog/
# mint-choc/
# overcast/
# pepper-grinder/
# redmond/
# smoothness/
# south-street/
# start/
# sunny/
# swanky-purse/
# trontastic/
# ui-darkness/
# ui-lightness/
# vader/
This is the easiest way to do it. If you are familiar with css you can write your custom css to include after the above link and to write custom design and colors. The calculator is already made up with classes you can use to write css.
Can you add a demo of the plugin ?
ReplyDeleteSure tXK, Here you go
ReplyDeletehttp://digdrag.com/projects/JCalculator1.0/demo/
Thank you so much!!!!! This has definitely made my day.
ReplyDeletenice effort
ReplyDeleteIs it possible to use keyboard?
ReplyDeleteGreat job!
Yes petergsm, you can use keyboard too.
ReplyDeletewhere can I edit the link tag?.sorry if the answer is very obvious. i just cant find it. I imported only to my project the calculator.css and calculator.js.
ReplyDeleteOrvyl can you clear it more. Btw you need to have jquery script and than jquery UI script/css imported first before you import calculator.js in your html and there you can edit the link tag to change the theme.
DeleteLet me know if it solves your query.
Best,
How can I show it directly on top of everything so it doesn't move my elements around when shown ?
ReplyDeleteput it inside an element having position: relative and the calculator itself should have position: absolute
DeleteI have it in this div :
ReplyDeleteI initialize it with :
$('#calcdiv').calculator({movable:true,resizable:true, width:160,defaultOpen:true});
And I'm using the css copy/pasta from the calculator.css file from the download link.
It still pushes my elements down :-)
Any ideas ? (I had to obfuscate with dots due to anti-html checks of the blog software)
Can you show me it hosted on a temp server?
DeleteSorry, no.
ReplyDeleteBut I ended up putting it inside a jquery dialog. Good enough. :-)
Although I find it strange that it only captures keypad numbers.
Thank you sharing this code. It saved hours of work. Firefox works fine for me however, in IE 8 the numbers do not display - the header title displays fine. Any idea? I used IE Developer Tool to debug and when I change the position to relative the numbers display but the format is lost. Can you help?
ReplyDeleteVery nice, but you know that plugin?
ReplyDeleteLink: https://github.com/rcoelros/jquery-blackCalculator
it is giving wrong answer..
ReplyDeleteIt is not giving right answer always..
sorry its working fine.... i was trying with code which someone edited...
ReplyDeleteThanks...