Инструкция

image-1 image-1 image-1 image-1

В настоящее время, чтобы создать калькулятор необходимо сделать следующее:

Перейти по ссылке «Попробовать» для неавторизованных пользователей либо «Создать» для тех, кто прошел идентификацию.

Задать размеры формы калькулятора. Это делается «ползунками», размещенными внизу формы(ширина) и справа от формы(высота).

Чтобы задать дополнительные настройки формы, такое как фон, радиус округления углов, название калькулятора, его описание, необходимо щелкнуть по иконке .

Чтобы выстраивать элементы на форме более точно, вместо фона можно включить отображение миллиметровки, для этого необходимо нажать на иконку .

Иконка отвечает за отображение имени добавленного элемента, это полезно на этапе записи скрипта.

После этого можно переходить к размещению элементов на форме.

В настоящий момент присутствует 14 элементов, 4 из которых не визуальные.

  • Текстовое поле – ввод осуществляется с клавиатуры.
  • Ввод чисел – ввод можно производить как с клавиатуры, так и стрелками вверх и вниз в рамках заданного диапазона.
  • Флажки – элементы множественного выбора. (checkbox в html)
  • Переключатели – элемент одиночного выбора из группы. (radio в html)
  • Горизонтальный слайдер – выбор из диапазона элементов путём перемещения ползуна.
  • Вертикальный слайдер – выбор из диапазона элементов, с вертикальным отображением.
  • Надпись – текст или надпись.
  • Изображение – позволяет добавить изображение.
  • Выпадающий список – позволяет выбрать элемент из группы в виде выпадающего списка.
  • Кнопка – элемент, по нажатию на который что-то происходит.
  • Константа – неизменяющееся значение.
  • Переменная – значение может меняться в процессе работы калькулятора.
  • Массив – массив элементов.
  • Скрипт – логика работы калькулятора, здесь задаются формулы для расчета.

Чтобы добавить нужный элемент на форму по ему необходимо щёлкнуть, либо перетянуть его на форму. Не визуальные элементы отображаются отдельной группой. При наведении курсора мыши на элемент, происходит его обводка и появляются две иконки, редактировать и удалить. При нажатии на удалить, произойдёт удаление элемента из формы. При нажатии редактировать откроется меню и доступными настройками.

  • Значение по умолчанию – значение, которое будет отображаться в элементе после загрузки калькулятора. Например «0».
  • Размер шрифта – размер шрифта текста элемента. Например «12px»
  • Подсказка – текст в элемента, который отображается до ввода в элемент (placeholder в html). Например «Введите число».
  • Название переменной – имя элемента по которому е нему можно обратиться из скрипта. Имя должно быть на английском, все имена должны быть уникальны.
  • Минимальное значение – минимальное значение, допустимое для ввода.
  • Максимальное значение – максимальное значение, допустимое для ввода.
  • Шаг изменения – шаг изменения значения элемента.
  • Ширина – ширина отображения элемента.
  • Высота – высота отображения элемента.
  • Скрипты на изменение – имена скриптов, которые необходимо выполнять при изменении значения элемента, либо при щелчки, если элемент кнопка.
  • CSS классы – в данные размел можно добавить пользовательские CSS классы.
  • Цвет текста – элемента.
  • Выделение по умолчанию – будет ли элемент выделен после загрузки формы.
  • Текст надписи – для элементов «флажки» и «переключатели» подпись соответствующего элемента.
  • Группа значений – для элемента «выпадающий список», группа необходимых значение. Для каждого значения в отдельной строчке, сначала значение, затем описание, например «1; первые значение»
  • Адрес изображения – адрес требуемого изображения. При нажатии «Проверить адрес изображения» произойдёт загрузка изображения на форму.
  • Массив значений – массив значений. Значения разделяются точкой с запятой, каждая новая строка массива начинается с новой строки.
  • Значение скрипта – формула работы калькулятора.
  • Запустить при загрузке страницы – если установить, то скрипт выполниться сразу после загрузки калькулятора. Текстовые дополнения необходиво выделять в одинарные кавычки '. Например: "a=(b+100)*0.1+' руб'"

Чтобы лучше понять принципы создания калькуляторов, рекомендуем ознакомиться с примерами готовых калькуляторов, а так же изучить видео-инструкции по созданию в альбоме нашей группы VK.