Частенько в кулинарных рецептах так бывает, что, скажем сахара, нужно добавить 200 г. А как отмерить данное количество, колько ложек или стаканов нужно добавить, не понятно. В этом может помочь кулинарный калькулятор.
Предлагаю Вашему вниманию скрипт кулинарного калькулятора. Он может расчитать вес или объем того или иного кулинарного продукта. Таким образом, можно будет легко расчитать, сколько ингредиента добавить в рецепт.
Этот скрипт можно установить на любой сайт. Он не использует никаких других фреймворков, и собран исключительно на чистом JavaScript. Если Вы владелец кулинарного сайта, то стоит добавить этот скрипт на него. Сделайте свой сайт удобнее для пользователя. Он это оценит.
Итак, перейдем к процессу установки. Для начала нужно скопировать следующий код:
Этот код можно разместить в любом месте Вашего сайта (в боковом сайде, под рецептами и т. д.). Ширину блока можно задавть любую при помощи стилей. Данный код создает кулинарный калькулятор шириной в 300 пикселей. Размеры можно задавать как в пикселях, так и в процентах. Если Вы хотите, стобы блок кулинарного калькулятора растягивался автоматически, то просто нужно убрать из стилей заданную ширину или прописать style = "width:100%;".
Функция создания блока cookCalcInit() может иметь 1 аргумент. Это id блока, в котором должен появиться кулинарный калькулятор. По умолчанию этот id = "cookCalc". Если вы хотите, чтобы кулинарный калькулятор появился в блоке с id = "block1", то вызывать функцию нужно будет так:
При желании, Вы можете переместить сам скрипт на Ваш хостинг. Но тогда при обновлении и дополнении скрипта кулнарного калькулятора, Вы не получите обновления. Мы будем дополнять этот скрипт новыми продуктами.
По умолчанию, все элементы скрипта размещаются в контейнере с ID = cookCalc. Если же вы прописали требуемый контейнер, то используйте его ID. Я же буду описывать стили с ID по умолчанию.
В стилях следует прописать следующие строчки:
Это только пример. Стили вы можете назначить абсолютно любые. Если дизайн вашего сайта правильно сверстан, то стили внедрять даже не потребуется. Скрипт примет те слили, которые прописаны на сайте.
И напоследок, рабочий пример данного скрипта:
На этом все. Удачи в свершениях!
Не по теме. Чел рисует калькулятор. Прикольно.
Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Скрипт кулинарного калькулятора
Скрипты
Скрипты, инструкции, справочники
Категория: | Скрипты |
Просмотрено: | 13558 |
Рейтинг: | 4.3/9 |
Дата добавления: | 2014-02-01 15:00, Суббота |
Добавил: | Szen |
Теги: | скрипт на сайт, кулинария, кулинарный калькулятор |
№ 0 | 2014-02-01 15:00 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Скрипт кулинарного калькулятора". |
Гость |
№ 1 | 2016-02-07 21:53 |
alexsajan | Спасибо со стилями получше стало, но все равно не могу колонки кг,г, и т.д. выровнять по правому краю (наравне с кнопкой "рассчитать" и надпись "Получить код блока" выравнять по центру? |
Александр |