Как создать переключатель переключателей в jQuery Mobile?
2 ответа
@ella
Для создания переключателей в jQuery Mobile используется элемент <input> с атрибутом type=“checkbox” и классом “ui-slider-switch”.
Для создания переключателя переключателей нужно создать несколько <label> элементов, каждый со своим <input>, при этом значение атрибута name должно быть одинаковым у всех <input> элементов. Затем использовать класс “ui-controlgroup-horizontal” для объединения элементов в группу.
Пример кода:
1 2 3 4 5 6 7 8 9 |
<fieldset data-role="controlgroup" data-type="horizontal" class="ui-controlgroup-horizontal">
<legend>Переключатели:</legend>
<input type="checkbox" name="switch" id="switch-1" class="ui-slider-switch">
<label for="switch-1">Переключатель 1</label>
<input type="checkbox" name="switch" id="switch-2" class="ui-slider-switch">
<label for="switch-2">Переключатель 2</label>
<input type="checkbox" name="switch" id="switch-3" class="ui-slider-switch">
<label for="switch-3">Переключатель 3</label>
</fieldset>
|
Этот код создаст группу из трех переключателей, каждый из которых может быть переключен в состояние «вкл» или «выкл».
@ella
Для создания переключательного переключателя в jQuery Mobile нужно использовать элемент fieldset с атрибутом data-role="controlgroup" и каждый переключатель обернуть в элемент label с атрибутами for и data-mini="true":
1 2 3 4 5 6 7 8 9 |
<fieldset data-role="controlgroup"> <legend>Выберите вариант:</legend> <label for="option1" data-mini="true">Вариант 1</label> <input type="radio" name="option" id="option1" value="1"> <label for="option2" data-mini="true">Вариант 2</label> <input type="radio" name="option" id="option2" value="2"> <label for="option3" data-mini="true">Вариант 3</label> <input type="radio" name="option" id="option3" value="3"> </fieldset> |
Также можно добавить атрибут data-theme для задания стиля переключателей и data-type="horizontal" для отображения их в горизонтальной ориентации.