jQuery Mobile Слайдер формы
Элемент управления слайдером jQuery Mobile
Слайдер позволяет выбрать значение из диапазона чисел:
Чтобы создать слайдер, используйте <input type="range">:
Пример
<label for="points">Прогресс:</label>
<input type="range" name="points" id="points" value="50" min="0" max="100">
</form>
Попробуйте сами »
Используйте следующие атрибуты для указания ограничений:
- max - задаёт максимально допустимое значение
- min - задаёт минимально допустимое значение
- step — задаёт допустимые числовые интервалы
- value — задаёт значение по умолчанию
Совет:Если вы хотите отображать значение прогресса на кнопке, можно добавить атрибут data-show-value="true":
Совет:Если вы хотите отображать прогресс на кнопке ползунка (как небольшое всплывающее окно), можно использовать атрибут data-popup-enabled="true":
Совет:Если вы хотите выделить значение ползунка, добавьте data-highlight="true":
Перекидной переключатель
Перекидные переключатели обычно используются для кнопок вкл/выкл или true/false:
Мы можем использовать элемент <input type="checkbox"> и указать data-role как "flipswitch", чтобы создать переключатель:
Пример
<label for="switch">Перекидной переключатель:</label>
<input type="checkbox" data-role="flipswitch" name="switch" id="switch">
</form>
Попробуйте сами »
По умолчанию текст переключателя — "On" и "Off". Вы можете изменить его с помощью атрибутов data-on-text и data-off-text:
Пример
Попробуйте сами »
Совет:Флажок-переключатель может использовать атрибут "checked" для установки варианта по умолчанию:
Пример
Попробуйте сами »
Другие примеры
Создайте слайдер с диапазоном значений.
Задайте стили для переключателя слайдера.