Скрипт кулинарного калькулятора

Скрипты

Рисунок Скрипт кулинарного калькулятора
Скрипт кулинарного калькулятора Скрипт кулинарного калькулятора
оценка: 4.8 из 5
оценок: 4, отзывов: 1

Частенько в кулинарных рецептах так бывает, что, скажем сахара, нужно добавить 200 г. А как отмерить данное количество, колько ложек или стаканов нужно добавить, не понятно. В этом может помочь кулинарный калькулятор.

Предлагаю Вашему вниманию скрипт кулинарного калькулятора. Он может расчитать вес или объем того или иного кулинарного продукта. Таким образом, можно будет легко расчитать, сколько ингредиента добавить в рецепт.

Этот скрипт можно установить на любой сайт. Он не использует никаких других фреймворков, и собран исключительно на чистом JavaScript. Если Вы владелец кулинарного сайта, то стоит добавить этот скрипт на него. Сделайте свой сайт удобнее для пользователя. Он это оценит.

Установка кулинарного калькулятора

Итак, перейдем к процессу установки. Для начала нужно скопировать следующий код:

Code
<div id="cookCalc" style="width:300px;">
  Здесь расположен <a href="http://cookerz.ru/index/vesy/0-13">кулинарный калькулятор</a> от cookerz.ru .<br>
  Включите выполнение JavaScript чтобы его увидеть!
</div>
<script type="text/javascript" charset="utf-8" src="http://cookerz.ru/js/cookcalc.js"></script>
<script type="text/javascript">
  cookCalcInit();
</script>

Этот код можно разместить в любом месте Вашего сайта (в боковом сайде, под рецептами и т. д.). Ширину блока можно задавть любую при помощи стилей. Данный код создает кулинарный калькулятор шириной в 300 пикселей. Размеры можно задавать как в пикселях, так и в процентах. Если Вы хотите, стобы блок кулинарного калькулятора растягивался автоматически, то просто нужно убрать из стилей заданную ширину или прописать style = "width:100%;".

Функция создания блока cookCalcInit() может иметь 1 аргумент. Это id блока, в котором должен появиться кулинарный калькулятор. По умолчанию этот id = "cookCalc". Если вы хотите, чтобы кулинарный калькулятор появился в блоке с id = "block1", то вызывать функцию нужно будет так:

Code
<script type="text/javascript">
  cookCalcInit('block1');
</script>

При желании, Вы можете переместить сам скрипт на Ваш хостинг. Но тогда при обновлении и дополнении скрипта кулнарного калькулятора, Вы не получите обновления. Мы будем дополнять этот скрипт новыми продуктами.

Стилевое оформление кулинарного калькулятора

По умолчанию, все элементы скрипта размещаются в контейнере с ID = cookCalc. Если же вы прописали требуемый контейнер, то используйте его ID. Я же буду описывать стили с ID по умолчанию.

В стилях следует прописать следующие строчки:

Code
#cookCalc input,
#cookCalc textarea,
#cookCalc select {
  display: inline-block;
  border: 1px solid #777;
  background: #FFF;
  vertical-align: middle;
  outline: none;
  border-radius: 1px;
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  -ms-border-radius: 1px;
  -o-border-radius: 1px;
}
#cookCalc input[type="text"],
#cookCalc select {
  background:#FFF;
  background: linear-gradient(to top, #FFF, #DDD);
  background: -moz-linear-gradient(bottom, #FFF, #DDD);
  background: -webkit-linear-gradient(bottom, #FFF, #DDD);
  background: -ms-linear-gradient(bottom, #FFF, #DDD);
  background: -o-linear-gradient(bottom, #FFF, #DDD);
}
#cookCalc input[type="submit"] {
  background: #FFF;
  background: linear-gradient(to top, #DDD, #FFF);
  background: -moz-linear-gradient(bottom, #DDD, #FFF);
  background: -webkit-linear-gradient(bottom, #DDD, #FFF);
  background: -ms-linear-gradient(bottom, #DDD, #FFF);
  background: -o-linear-gradient(bottom, #DDD, #FFF);
}
#cookCalc input: focus,
#cookCalc textarea: focus,
#cookCalc select: focus {
  border-color: #FF5300;
  outline: none;
}

Это только пример. Стили вы можете назначить абсолютно любые. Если дизайн вашего сайта правильно сверстан, то стили внедрять даже не потребуется. Скрипт примет те слили, которые прописаны на сайте.

Пример работы кулинарного калькулятора

И напоследок, рабочий пример данного скрипта:

Здесь расположен кулинарный калькулятор от cookerz.ru .
Включите выполнение JavaScript чтобы его увидеть!

На этом все. Удачи в свершениях!

Не по теме. Чел рисует калькулятор. Прикольно.

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Скрипт кулинарного калькулятора
Скрипты
Скрипты, инструкции, справочники

rss
Категория:Скрипты
Просмотрено:6387
Рейтинг:4.8/4
Дата добавления:2014-02-01 15:00, Суббота
Добавил:Szen
Теги:скрипт на сайт, кулинария, кулинарный калькулятор

Мини-форум

№ 02014-02-01 15:00
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Скрипт кулинарного калькулятора".
Гость
№ 1
2016-02-07 21:53 Спам
alexsajan
Аватар участника alexsajan
Спасибо со стилями получше стало, но все равно не могу колонки кг,г, и т.д. выровнять по правому краю (наравне с кнопкой "рассчитать" и надпись "Получить код блока" выравнять по центру?
Александр
Учавствовать в обсуждении "Скрипт кулинарного калькулятора" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Посетители
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Во сколько оцените портал
Всего ответов: 1888
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 2
Гостей: 2
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz