Responsive & Mobile-friendly jQuery Calculator Plugin
File Size: | 2.41 KB |
---|---|
Views Total: | 8974 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Calc is a tiny calculator plugin built on top of jQuery and Bootstrap 3 that creates a responsive, mobile-friendly calculator App for desktop & mobile devices.
See also:
How to use it:
1. Load the latest version of Twitter Bootstrap 3 framework in the document.
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css"> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
2. Load the jQuery calc plugin in the document. Make sure you have jQuery library loaded.
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="jquery.calc.js"></script>
3. Markup Html structure for the calculator App.
<div id="calculator"> <div class="row"> <div class="col-sm-12"> <div class="well result"> 0 </div> </div> <div class="digits"> <div class="col-xs-3"> <div class="well digit">7</div> </div> <div class="col-xs-3"> <div class="well digit">8</div> </div> <div class="col-xs-3"> <div class="well digit">9</div> </div> <div class="col-xs-3"> <div class="well digit">+</div> </div> <div class="col-xs-3"> <div class="well digit">4</div> </div> <div class="col-xs-3"> <div class="well digit">5</div> </div> <div class="col-xs-3"> <div class="well digit">6</div> </div> <div class="col-xs-3"> <div class="well digit">-</div> </div> <div class="col-xs-3"> <div class="well digit">1</div> </div> <div class="col-xs-3"> <div class="well digit">2</div> </div> <div class="col-xs-3"> <div class="well digit">3</div> </div> <div class="col-xs-3"> <div class="well digit">×</div> </div> <div class="col-xs-3"> <div class="well digit">0</div> </div> <div class="col-xs-3"> <div class="well digit">.</div> </div> <div class="col-xs-3"> <div class="well digit">=</div> </div> <div class="col-xs-3"> <div class="well digit">÷</div> </div> </div> </div> </div>
4. A little bit CSS codes to style the digits and result.
.digits .well { text-align: center; cursor: pointer; font-weight: bold; font-size: 2em; } .result { text-align: right; font-weight: bold; font-size: 2em; }
Change log:
2014-05-09
- added clear function
This awesome jQuery plugin is developed by zoul0813. For more Advanced Usages, please check the demo page or visit the official website.