Радиокнопки используются для предоставления списка опций, где можно выбрать только один элемент. Традиционные радиокнопки на рабочем столе не оптимизированы для сенсорного ввода, поэтому jQuery Mobile меняет метку на для радиокнопок, чтобы они были крупнее и выглядели кликабельными. Пользовательский набор значков добавляется к этикетке для обеспечения дополнительной визуальной обратной связи.
Элементы радиоуправления ниже используют стандартную разметку ввода/меток, но они оформлены так, чтобы они были более удобными для сенсорного управления. Стилизованный элемент управления, который вы видите, на самом деле является элементом метки, который находится над реальным вводом, поэтому, если изображения не загружаются, у вас все еще будет функциональный элемент управления.
В большинстве браузеров щелчок по метке автоматически вызывает щелчок по вводу, но нам пришлось запускать обновление вручную для нескольких мобильных браузеров, которые не делают этого по умолчанию. На рабочем столе эти элементы управления доступны с клавиатуры и программы чтения с экрана. Просмотрите справочник атрибутов данных, чтобы увидеть все возможные атрибуты, которые вы можете добавить к переключателям.
Вертикально сгруппированные радиокнопки
Чтобы создать набор переключателей, добавьте input с атрибутом type="radio" и соответствующей меткой . Установите атрибут для метки , чтобы он соответствовал id входа , чтобы они были семантически связаны.
Элемент label отображается рядом с элементом радиоформы. Оберните переключатели в набор полей элемент с легендой , которая выступает в качестве заголовка вопроса.
Чтобы визуально интегрировать несколько переключателей в вертикально сгруппированный набор кнопок, платформа автоматически удалит все поля между кнопками и закруглит только верхний и нижний углы набора, если в элементе есть атрибут data-role="controlgroup" . контейнер.
набор полей>
Это создаст вертикально сгруппированный набор переключателей. Стили по умолчанию задают ширину группы кнопок равной 100% от родительского контейнера и размещают легенду на отдельной строке.
Выберите питомца:
Кот
Собака
Хомяк
Ящерица
Мини-версия
Чтобы получить более компактную версию, которая будет полезна на панелях инструментов и в ограниченном пространстве, добавьте к элементу атрибут data-mini="true" , чтобы создать мини-версию.