Адаптивный калькулятор · Bootstrap

Адаптивный калькулятор Bootstrap

Адаптивный калькулятор работающий при подключенном плагине bootstrap с приятным цветным дизайном для сайта, сделано описание по установке калькулятора на сайт дополненное демо примерами.

Подключение калькулятора bootstrap

Для использования калькулятора на всех страницах сайта добавьте в зону <head> динамичной страницы.

<link rel="stylesheet" href="//atmpl.ru/design/elements/2015/calculator/SimpleCalculadorajQuery.css">
<script src="//atmpl.ru/design/elements/2015/calculator/SimpleCalculadorajQuery.js"></script>

При использовании калькулятора на отдельной странице поддерживающей HTML редактирование, добавьте в тело <body>.

<style>@import url("//atmpl.ru/design/elements/2015/calculator/SimpleCalculadorajQuery.css");</style>
<script src="//atmpl.ru/design/elements/2015/calculator/SimpleCalculadorajQuery.js"></script>

Ниже подключаемых внешних файлов добавьте скрипт управления калькулятором.

<script>
$("[id*=calculator]").Calculadora({'EtiquetaBorrar':'Стереть',TituloHTML:'<a class="btn-block btn3d btn btn-success" href="//atmpl.ru/publ/adaptive_elements/adaptivnyj_kalkuljator_bootstrap/22-1-0-98" target="_blank">aTmpl</a>'});
$("#CalcOptoins").Calculadora({
EtiquetaBorrar:'Clear',
ClaseBtns1: 'warning',
ClaseBtns2: 'success',
ClaseBtns3: 'primary',
Botones:["+","-","*","/","0","1","2","3","4","5","6","7","8","9",".","="]
});
</script>

В месте отображения калькулятора добавьте код.

<div id="calculator"></div>

Демо использование калькулятора базовым селектором col-md-4

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.

Демо использование калькулятора селектором col-md-6

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.

Дополнительные сведения о калькуляторе

  1. Возможно изменение цветовой палитры кнопок калькулятора используя базовые селекторы цвета плагина bootstrap.
  2. Рекомендуемый минимальный селектор плагина col-md-4.
  3. Рекомендуемый максимальный селектор col-md-6.

Демонстрация примера на внешнем ресурсе.

CODEPEN

Скачать адаптивный калькулятор bootstrap

Скачать

Рейтинг: 5.0/5 из 3



Добавлено Автор Ник Источник Просмотров Комментариев Теги
30-08-2015 Михаил Меренков aTmpl © 1099 0 калькулятор bootstrap, адаптивный калькулятор