База знаний
ProfiPages.net > Тикет система сервиса Profipages.net > База знаний

Как создать визуальный калькулятор

Решение

Видео-инструкция

 

Последовательность действий

Шаг 1. Создаем элемент "калькулятор" и настраиваем его дизайн (а т.ж. дизайн его элементов).

 

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

Шаг 3. Нажимаем кнопку "добавить" для добавления связи исходного элемента (выделенного) с изменяемыми элементами страницы.

 

Шаг 4. Кликаем по интересующему нас элементу на странице для связывания его с исходным элементом (в данном примере монетки будут "появляться" при увеличении "чистой прибыли").

Связи между элементами страницы отображаются синими стрелками.

Для выходи из режима связывания элементов можно использовать один из способов:

    • нажмите Esc или Enter;
    • нажмите правую кнопку мыши;
    • кликните по исходному элементу.

 

Шаг 5. Кликаем по связанному элементу в списке для настройки изменения его видимости или способов отображения, в зависимости от значений исходного элемента.

 

Шаг 6. Открывшееся диалоговое окно разделено на 2 части:

6.1. доступные способы изменения свойств связанного элемента;

6.2. настройки выбранного способа изменения связанного элемента.

 

 

На данный момент есть 3 способа изменения свойств связанных элементов:

  • "Изменение размеров" - можно менять высоту и ширину элемента (подробнее см. Шаг 7).
  • "Видимость" - элемента будет либо скрыт, либо виден на странице, в зависимости от условий, перечисленных в списке "изменение состояния, если" (должно выполняться хотя бы одно из перечисленных условий).
  • "Изображение (фон)" - у связанного элемента будет изменено изображение (фон), в зависимости от условий, перечисленных в списке "изменяется, если" (должно выполняться хотя бы одно из перечисленных условий). При наличии нескольких изменяемых изображений с одинаковыми условиями, отображаться будет последнее.

  

 

Настроим изменение высоты связанного элемента.

Шаг 7. Выбираем способ изменения отображения связанных объектов "Изменение размеров".

Шаг 8. Выбираем изменение "Высоты".

Шаг 9. Кликаем на полосе "Зависимости изменения размера от значения" для создания "контрольной точки".

Настраиваем значения созданной "контрольной точки":

    • процентное значение величины изменяемого размера связанного элемента (сверху) - 5%
    • значение исходного элемента, при котором будет применен данный размер (снизу) - 8000

 

Что означают данные величины:

  • если значение исходного элемента будет равно 8000 - высота связанного элемента будет соответствовать 5% от его максимальной высоты (т.е. высоты, которую вы задали ему в конструкторе)
  • если значение исходного элемента будет меньше 8000 - высота связанного элемента будет зависеть от наличия "контрольных точек" слева от текущей (менее 5%)
    • если "контрольные точки" слева существуют (напр. 0% при значении 1000) - высота связанного элемента будет установлена в промежутке между 2% и 5% пропорционально значениям ближайшей контрольной точки (т.е. при значении исходного элемента 4500, высота связанного элемента будет 2.5%)
    • если "контрольных точек" слева не существует - высота связанного элемента будет соответствовать текущей "контрольной точке" (т.е. 5%)
  • если значение исходного элемента будет более 8000высота связанного элемента будет зависеть от наличия "контрольных точек" справа от текущей (более 5%), аналогично случаю с меньшим значением исходного элемента.

 

Шаг 10. Добавляем еще 2 "контрольные точки", со значениями 0% - 0 и 100% - 170000.

Шаг 11. Для удаления лишних "контрольных точек" - перетаскиваем их ниже (или выше) полосы.

 

Устанавливаем фиксацию позиции связанного элемента - т.е. стороны элемента, которые всегда будут находится в изначальном положении, в то время как положение остальных сторон будет изменяться в зависимости от размеров элемента. Таким образом мы указываем, в каком направлении будет изменяться высота связанного элемента.

Для этого:

Шаг 12. Нажимаем на кнопку "Фиксация позиции элемента".

Шаг 13. Выбираем нижнюю позицию фиксации. Т.е. высота связанного элемента будет изменяться от нижней границы, и мы получим эффект "появления" монет в стопке.

 

 

Шаг 14. Активируем "Изменение размеров" связанного элемента.

 

Шаг 15. Визуальный калькулятор готов.

 

П.С. В данном примере используется элемент для расчета и отображения результатов вычисления калькулятора, с которым Вы можете подробнее ознакомиться в статье "Как работать с калькулятором".

 

 
Была ли эта статья полезной? ДА / НЕТ
Относящиеся статьи Как работать с калькулятором
Создание и свойства элемента "ИЗОБРАЖЕНИЕ"
Как реализовать мультилендинг на profipages
Детали статьи
Идентификатор статьи: 42
Категория: Knowledgebase
Дата добавления: 2016-05-17 10:25:44
Просмотры: 176
Рейтинг (Голоса): Рейтинг статьи 5.0/5.0 (1)

 
« Назад

 
Powered by Help Desk Software HESK, brought to you by SysAid