Документация / Зависимости /

Включение/выключение виджетов

Данный вид зависимости (ZForms.Dependence.TYPE_ENABLE) позволяет описать условия, при которых виджет включается/выключается. В большинстве случаев соответствует свойству disabled.

Параметры

oEnabled : {
	RegExp rPattern        : null,
	Object oCompare        : null,
	Function fFunction     : null,
	String sName           : null,
	String sId             : null,
	Boolean bInverse       : false,
	Boolean bFocusOnEnable : false,
	String sLogic          : 'and', 
	Array aFrom            : []
	}

Первые три параметра определяют, каким образом будет проходить проверка (параметры являются взаимоисключающими в порядке следования, т.е. если передан rPattern, все остальные не учитываются и т.д.):

  • rPattern — регулярное выражение.
  • oCompare — объект сравнения. С помощью объекта сравнения можно сравнивать значение виджета со значением другого виджета или с простым значением.
  • fFunction — пользовательская функция проверки.

Вторая группа параметров является дополнительной:

  • sName — имя виджета, значение которого будет проверяться. Если параметр не передан, будет взят текущий виджет (которому добавляется эта зависимость).
  • sId — альтернатива параметру sName, вместо имени можно указать id виджета. Применяется только в том случае, когда несколько виджетов имеют одинаковое имя, а зависимость нужно указать от конкретного виджета.
  • bInverse — инвертирование (иногда проще написать то, чему не должно удовлетворять условие проверки).
  • bFocusOnEnable — параметр, позволяющий установить фокус на виджет при его включении.
  • sLogic — логика связывания зависимостей (играет роль только когда заполнен параметр aFrom).
  • aFrom — массив вида [{ sName : 'имя_виджета_1', rPattern : null, … }, …, { sName : 'имя_виджета_N', rPattern : null, … }]. Параметр необходим, когда проверка включенности виджета зависит от нескольких виджетов. Каждый из элементов этого массива может включать все предыдущие параметры.

Проверка с помощью регулярного выражения

Значение виджета проверяется с помощью заданного регулярного выражения. Вместо регулярного выражения может быть указана строка (в этом случае проверяется полное совпадение).

Пример 1. Поле для ввода названия другой страны включается, только если выбран соответствующий переключатель.

Код примера 1

<form class="zf" action=".">
	<dl class="zf zf-radiobuttongroup">
		<dt><label>Страна</label></dt>
		<dd>
			<div class="zf-option">
				<input class="zf" type="radio" name="country" value="1" id="input-country-1" checked="checked" />
				<label for="input-country-1">Россия</label>
			</div>
			<div class="zf-option">
				<input class="zf" type="radio" name="country" value="2" id="input-country-2" />
				<label for="input-country-2">Украина</label>
			</div>
			<div class="zf-option">
				<input class="zf" type="radio" name="country" value="3" id="input-country-3" />
				<label for="input-country-3">Беларусь</label>
			</div>
			<div class="zf-option">
				<input class="zf" type="radio" name="country" value="4" id="input-country-4" />
				<label for="input-country-4">другая</label>
			</div>
		</dd>
	</dl>
	<dl>
		<dt><label for="input-country-other">Название</label></dt>
		<dd><input class="zf" type="text" name="country-other" id="input-country-other" onclick="return { oEnabled : { sName : 'country', rPattern : '4', bFocusOnEnable : true } }" /></dd>
	</dl>
</form>

Пример 2. Отключение ползунков у слайдера.

Слайдер

Код примера 2

<form class="zf" action=".">
	<fieldset class="zf zf-slider zf-range"><legend><span>Слайдер</span></legend>
		<dl>
			<dt><label for="input-value-from">От</label></dt>
			<dd><input class="zf zf-number" type="text" name="value-from" id="input-value-from" size="2" value="30" onclick="return { oEnabled : { sName : 'control', rPattern : '1', bInverse : true } }" />
			</dd>
		</dl>
		<dl>
			<dt><label for="input-value-to">до</label></dt>
			<dd><input class="zf zf-number" type="text" name="value-to" id="input-value-to" size="2" value="60" onclick="return { oEnabled : { sName : 'control', rPattern : '2', bInverse : true } }" /></dd>
		</dl>
	</fieldset>
	<dl class="zf zf-checkboxgroup zf-nolabel">
		<dd>
			<div class="zf-option">
				<input class="zf" type="checkbox" name="control" value="1" id="input-control-1" checked="checked" />
				<label for="input-control-1">отключить левый ползунок</label>
			</div>
			<div class="zf-option">
				<input class="zf" type="checkbox" name="control" value="2" id="input-control-2" />
				<label for="input-control-2">отключить правый ползунок</label>
			</div>
		</dd>
	</dl>
</form>

Проверка с помощью сравнения

Позволяет сравнивает значение виджетов между собой или значение виджета с простым значением. Объект сравнения:

oCompare : {
	String sCondition : 'eq',
	String sName      : null,
	String mValue     : null
	}

Где:

  • sCondition — условие сравнения, допустимые варианты: eq (=), gt (>), gte (>=), lt (<), lte (<=).
  • sName — если указан этот параметр, то значение будет сравнивать со значением виджета с этим именем.
  • mValue — если указан этот параметр, то значение будет сравниваться непосредственно с ним.

Пример 3. Если вводимая сумма кредита больше 50 000, то необходимо указать хотя бы один источник дохода.

Код примера 3

<form class="zf" action=".">
	<dl>
		<dt><label for="input-sum">Сумма кредита</label></dt>
		<dd><input class="zf zf-number" type="text" name="sum" id="input-sum" value="1000" /></dd>
	</dl>
	<dl class="zf zf-checkboxgroup" onclick="return { oEnabled : { sName : 'sum', oCompare : { sCondition : 'gt', mValue : 50000 } }, oRequired : {} }">
		<dt><label>Источники дохода</label></dt>
		<dd>
			<div class="zf-option">
				<input class="zf" type="checkbox" name="sources" value="1" id="input-sources-1" />
				<label for="input-sources-1">основная работа</label>
			</div>
			<div class="zf-option">
				<input class="zf" type="checkbox" name="sources" value="2" id="input-sources-2" />
				<label for="input-sources-2">работа по&#160;совместительству</label>
			</div>
			<div class="zf-option">
				<input class="zf" type="checkbox" name="sources" value="3" id="input-sources-3" />
				<label for="input-sources-3">собственный бизнес</label>
			</div>
			<div class="zf-option">
				<input class="zf" type="checkbox" name="sources" value="4" id="input-sources-4" />
				<label for="input-sources-4">регулярная игра в&#160;казино</label>
			</div>
		</dd>
	</dl>
</form>