SimpleCalculadora jQuery Plugin para crear una calculadora bootstrap

DESCARGA : SimpleCalculadora

SimpleCalculadora jQuery Plugin para crear una calculadora bootstrap, este plugin es muy sencillo de usar ya que su implementación solo necesita un div, puede ser muy interesante implementarlo en tu sitio (si lo necesitas para cálculos sencillos), esta calculadora esta realizada con la ayuda de bootstrap y los estilos del siguiente snipp el enlace es el siguiente: http://bootsnipp.com/snippets/featured/3d-buttons-effects-fix , el plugin se centra en tener una solución rápida para tus aplicaciones, la demostración la puedes ver en el siguiente enlace: http://oscaruhp.github.io/SimpleCalculadora, este plugin tienes opciones como por ejemplo:

Cambio de:

1.- Colores de Botones.

2.- Colores de Signos.

3.- Orden de aparición de las teclas.

4.- Texto Personalizado.

5.- Control de salida de resultados.

Para realizar la aparición de dicho plugin en tu sitio puedes realizar la instalación de la siguiente forma.

1.- Incluir el archivo del plugin (el sitio tiene que estar creado en bootstrap, y tener jquery)


<!-- 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.- Crear los elementos donde quieres que aparezca la calculadora


<div id="idCalculadora"> </div>
<div id="micalc"> </div>

3.- Crear el script para instalar el plugin


$("#idCalculadora").Calculadora();
$("#micalc").Calculadora({'EtiquetaBorrar':'Limpiar'});

 

4.- Personalizarlo al gusto


<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#idCalculadora"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">Calculadora</span><span class="token punctuation">(</span><span class="token punctuation">{</span> EtiquetaBorrar<span class="token punctuation">:</span><span class="token string">'Clear'</span><span class="token punctuation">,</span> ClaseBtns1<span class="token punctuation">:</span> <span class="token string">'warning'</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">/* Color Numbers*/</span> ClaseBtns2<span class="token punctuation">:</span> <span class="token string">'success'</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">/* Color Operators*/</span> ClaseBtns3<span class="token punctuation">:</span> <span class="token string">'primary'</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">/* Color Clear*/</span> TituloHTML<span class="token punctuation">:</span><span class="token string">'<h2>Develoteca.com</h2>'</span><span class="token punctuation">,</span> Botones<span class="token punctuation">:</span><span class="token punctuation">[</span><span class="token string">"+"</span><span class="token punctuation">,</span><span class="token string">"-"</span><span class="token punctuation">,</span><span class="token string">"*"</span><span class="token punctuation">,</span><span class="token string">"/"</span><span class="token punctuation">,</span><span class="token string">"0"</span><span class="token punctuation">,</span><span class="token string">"1"</span><span class="token punctuation">,</span><span class="token string">"2"</span><span class="token punctuation">,</span><span class="token string">"3"</span><span class="token punctuation">,</span><span class="token string">"4"</span><span class="token punctuation">,</span><span class="token string">"5"</span><span class="token punctuation">,</span><span class="token string">"6"</span><span class="token punctuation">,</span><span class="token string">"7"</span><span class="token punctuation">,</span><span class="token string">"8"</span><span class="token punctuation">,</span><span class="token string">"9"</span><span class="token punctuation">,</span><span class="token string">"."</span><span class="token punctuation">,</span><span class="token string">"="</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

No esperes mas, si quieres hacer cálculos en tu sitio, no esperes descargarlo y realiza las operaciones básicas, puedes agregarle más funcionalidades.

 

Puede interesarte

  • Alejandro Alzate

    Buen día…

    Tambien permite poner la tecla de % ?

    Gracias