Документация / Виджеты /

Группа переключателей

ZForms.Widget → ZForms.Widget.Container → ZForms.Widget.Container.Group → ZForms.Widget.Container.Group.RadioButton

Виджет для группы переключателей создается на основе элeментов <input type="radio"> и любого объединяющего их HTML-элемента, например, <div>, <dl>, <td> и т.д.

Определение виджета

Виджет определяется по дополнительному CSS-классу zf-radiobuttongroup, например: <dl class="zf zf-radiobuttongroup" />. Переключатели, входящие в виджет, определяются по атрибуту type — <input class="zf" type="radio" />.

Поддерживаемые зависимости

Пример

Код примера

<form class="zf" action=".">
	<dl class="zf zf-radiobuttongroup">
		<dt><label>Я&#160;курю</label></dt>
		<dd>
			<div class="zf-option"> <!-- oClassElement -->
				<input class="zf" type="radio" name="input-tabak" id="input-tabak-1" value="cigarettes" checked="checked" /><label for="input-tabak-1">сигареты</label>
			</div>
			<div class="zf-option"> <!-- oClassElement -->
				<input class="zf" type="radio" name="input-tabak" id="input-tabak-2" value="cigars" /><label for="input-tabak-2">сигары</label>
			</div>
			<div class="zf-option"> <!-- oClassElement -->
				<input class="zf" type="radio" name="input-tabak" id="input-tabak-3" value="cigarills" /><label for="input-tabak-3">сигариллы</label>
			</div>
			<div class="zf-option"> <!-- oClassElement -->
				<input class="zf" type="radio" name="input-tabak" id="input-tabak-4" value="pipe" /><label for="input-tabak-4">трубку</label>
			</div>
		</dd>
	</dl>
</form>