QUAZAR-FORMQUAZAR-FORMQuasar form Pro имеет мощную встроенную условную логику. Вы можете использовать это для следующих задач:
Принцип работы логики
Логика работает по простой схеме, которая состоит из двух элементов — условия и действия.
1) Условие. Состоит из 2 или 3 частей в зависимости от типа условия.
Пример (двигайте ползунок):
[default value]
В приведенной выше форме установлена следующая логика (скриншот):
Если значение ползунка станет больше 4, то будет показана скрытая кнопка «Отправить» (кнопка была скрыта, через настройки самого поля). Попробуйте — подвигать ползунок и сами все увидите.
2) Действие, вторая часть любой логики, может состоять из 3 и более значений в зависимости от типа действия. В форме приведенной выше — действие это показ кнопки.
В одной логики может быть много условий и много действий, обращенных к разным полям.
Например (выберите тип материала — Качественный и двигайте ползунок):
SkobKipSKrjlfd[default value]SkobKi@TRDEEEQWGGpSKrjlfd
В приведенной выше форме установлено 2 логики (скриншот):
Первая логика имеет 2 условия и 2 действия, если значение ползунка больше 10 и в выпадающем списке «Материал» выбрано «Качественный» сработают действия первой логики — скрыть поле с выбором доставки и изменить текст в поле на «Вы получаете бесплатную доставку».
Для чего нужна вторая логика?
Все просто, не все действия имеют противоположный эффект. Например, действие показа или скрытия имеет противоположный эффект, если вы скрыли поле, но условие больше не выполняется, поле снова будет показано.
Но некоторые действия, такие как «изменить html», не имеют противоположного эффекта, текст меняется раз и на всегда, даже если условие больше не выполняется текст не вернется к исходному. Поэтому, чтобы вернуть исходный текст надо создать еще одну логику, которая и будет возвращать нужный текст, поэтому в форме выше 2 логики.
Действия, которые не имеют противоположного эффекта:
1) изменить html
2) установить значение поля
Для реализации сложных задач, можно использовать переменные значения. Типичный случай — надо сделать калькулятор, в котором скидка будет зависеть от значения одного из полей.
[default value]
Данный функционал можно было сделать и без переменных, однако переменные позволяют вам создавать более сложные формы. В форме выше всего одна логика (скриншот):
Сначала мы устанавливаем переменную — а со значением 0. Далее мы присваиваем переменной значение поля — количество карандашей, потом умножаем на три (изначально в калькуляторе умножается на 5, но нам нужна скидка в 2 рубля поэтому умножаем на 3). Далее используем действие для пересчета итога калькулятора, куда просто вставляем нашу переменную.
Обратите внимание — имя переменной в полях с действиями пишется в фигурных скобках.
Также знайте — при помощи действия «изменить значение переменной» можно калькулировать значения разных переменных, например:
1) Показать поле — показывает поле, если оно было скрыто. Имеет противоположный эффект. Если условие больше не выполняется, поле автоматически скрывается снова.
2) Скрыть поле — скрывает поле. Имеет противоположный эффект. Если условие больше не выполняется, поле автоматически отображается снова.
3) Изменить html в пользовательском тексте — изменяет текст или html в поле «Пользовательский текст / html». Работает только с этим типом полей. Не имеет обратного эффекта. Если условие больше не выполняется, исходное содержимое поля не восстанавливается.
Главная особенность этого поля — возможность использовать любые html теги.
[default value]
[default value]
4) Установить значение поля — устанавливает значение для поля. Не имеет обратного эффекта. Если условие больше не выполняется, исходное значение поля не восстанавливается.
[default value]
5) Пересчитать итог калькулятора — пересчитывает значение поля «калькуляция». Работает только с этим типом поля. Эта логика может быть использована для реализации скидок, добавления в расчет новых полей или наоборот. Шорткод [itog] — это текущий итог калькулятора. Вы также можете использовать шорт коды с ID полей, как в формуле калькулятора.
Именно это действие позволяет вам создавать калькуляторы любой сложности — вы можете изменять формулу расчета на «лету».
Если условие больше не выполняется, то влияние этого поля для расчета исчезает. Пример реализации 20% скидки: [itog] — (( [itog] * 20) / 100 )
[default value]
6) Добавить класс — добавляет класс указанному элементу. Главная особенность этого действия — оно не ограничено пределами формы, класс можно добавить любому элементу на странице. Если условие больше не выполняется, класс не пропадает.
Действие состоит из двух полей. В первом вы указываете селектор — класс или ID элемента, которому нужно добавить класс. Во втором поле указывается сам класс.
7) Удалить класс — тоже самое, что и добавить, но только удаляет класс, принцип работы тот же.
1) Работа с большим количеством полей
Количество селекторов(полей) в условиях и действиях не ограничено. Для работы с большим количеством полей не потребуется создавать много логик.
На скриншоте выше показано одно условие и одно действие, но работа происходит с большим количеством селекторов(полей). Когда используется несколько условий между ними ставится «и» или «или» — это значит оба условия должны быть выполнены или только одно из них. В действии мы также видим много полей, которые будут показаны.
2) Количество логик
Количество логик в одной форме ограниченно только вашей фантазией. Когда логик становится много, для удобного их просмотра используйте инструменты, показанные на скриншоте:
3) Доступность полей
Когда вы выбираете разные действия, то можете заметить, что список доступных полей, к которым можно применить это действие меняется.
Здесь все просто, при выборе действия происходит автоматическая фильтрация полей, остаются только поля, подходящие под это действие.