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

Управление css-классами

Данный вид зависимостей (ZForms.Dependence.TYPE_CLASS) позволяет управлять дополнительными, пользовательскими CSS-классами виджета.

Параметры

oDependedClasses : {
	Array    aData     : [],
	Function fFunction : null,
	String   sName     : null,
	String   sId       : null,
	String   sLogic    : 'and',
	Array    aFrom     : []
	}

Где:

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

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

Значение виджета проверяется с помощью заданного регулярного выражения rPattern. В случае совпадения виджету добавляется соответствующий CSS-класс sClassName.

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

Пример. Лэйблы для поля «Cемейный статус» должны соответствовать тому, что выбрано в поле «Пол».

Пол

Код примера

<form class="zf" action=".">
	<dl class="zf zf-radiobuttongroup">
		<dt>Пол</dt>
		<dd>
			<div class="zf-option">
				<input class="zf" type="radio" name="sex" id="input-sex-1" value="0" checked="checked" />
				<label for="input-sex-1">мужской</label>
			</div>
			<div class="zf-option">
				<input class="zf" type="radio" name="sex" id="input-sex-2" value="1" />
				<label for="input-sex-2">женский</label>
			</div>
		</dd>
	</dl>
	<dl class="zf zf-radiobuttongroup male" onclick="return { oDependedClasses : { sName : 'sex', aData : [['0', 'male'], ['1', 'female']] } }">
		<dt><label>Семейный статус</label></dt>
		<dd>
			<div class="zf-option">
				<input class="zf" type="radio" name="marital-status" id="input-marital-status-1" value="0" checked="checked" />
				<label for="input-marital-status-1">
					<span class="male">холост</span>
					<span class="female">не&#160;замужем</span>
				</label>
			</div>
			<div class="zf-option">
				<input class="zf" type="radio" name="marital-status" id="input-marital-status-2" value="1" />
				<label for="input-marital-status-2">
					<span class="male">женат</span>
					<span class="female">замужем</span>
				</label>
			</div>
			<div class="zf-option">
				<input class="zf" type="radio" name="marital-status" id="input-marital-status-3" value="2" />
				<label for="input-marital-status-3">
					<span class="male">разведен</span>
					<span class="female">разведена</span>
				</label>
			</div>
		</dd>
	</dl>
</form>

Этому примеру соответствуют CSS-правила:

.male .female,
.female .male {
	display: none;
}