Quick start
1.- Include the files
<!-- Bootstrap and JQuery -->
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery-2.1.4.min.js"> </script>
<!-- Plugin -->
<link rel="stylesheet" href="SimpleCalculadorajQuery.css">
<script src="SimpleCalculadorajQuery.js"></script>
2.- Create HTML Element
<div id="idCalculadora"> </div>
<div id="micalc"> </div>
3.- Call the the plugin on a container as your wish
$("#idCalculadora").Calculadora();
$("#micalc").Calculadora({'EtiquetaBorrar':'Clear'});
4.- All done!
Options
you can custom by passing options when call the plugin, all available options are listed below.
call the the plugin on a container wish you wish
$("#idCalculadora").Calculadora({
option: value,
option2: value2
});
{
TituloHTML:'<a class="btn-block btn3d btn btn-success" href="http://develoteca.com" target="_blank">Calculadora</a>', /*Title HTML*/
Botones:["7","8","9","+","4","5","6","-","3","2","1","*","0",".","=","/"], /* Order Numbers*/
Signos:["+", "-", "*", "/"], /*Simbols*/
ClaseBtns1: 'primary', /* Color Numbers*/
ClaseBtns2: 'success', /* Color Operators*/
ClaseBtns3: 'warning', /* Color Clear*/
ClaseColumnas:'col-md-3 mbottom',
ClaseBotones:'btn3d btn-lg btn-block btn btn-',
txtSalida:idInstancia+'txtResultado', /* Ouput Result*/
ClasetxtSalida:'form-control txtr',
InputBorrar:idInstancia+'Borrar', /* Ouput Clear*/
ClaseInputBorrar:'btn3d btn btn-danger btn-lg btn-block',
EtiquetaBorrar:'Borrar' /* Label Ouput Result*/
}
Demo (Options)
$("#CalcOptoins").Calculadora({
EtiquetaBorrar:'Clear',
ClaseBtns1: 'warning', /* Color Numbers*/
ClaseBtns2: 'success', /* Color Operators*/
ClaseBtns3: 'primary', /* Color Clear*/
TituloHTML:'<h2>Develoteca.com</h2>',
Botones:["+","-","*","/","0","1","2","3","4","5","6","7","8","9",".","="]
});