Ползунки Формы jQuery Mobile

Ползунок на форме jQuery Mobile позволяет Вам выбирать значение из диапазона чисел.

Средства управления Сдвигом jQuery Mobile

Чтобы создать ползунок, используйте <input type="range">:

Пример

<form method="post" action="demoform.php">
  <div data-role="fieldcontain">
    <label for="points">Очки:</label>
    <input type="range" name="points" id="points" value="50" min="0" max="100">
  </div>
</form>

Попробуйте сами »

Используйте следующие атрибуты, чтобы указать ограничения:

  • max - указывает максимальное допустимое значение
  • min - указывает минимальное допустимое значение
  • step - указывает допустимые числовые интервалы
  • value - указывает значение по умолчанию

Подсказка: Если Вы хотите выделить дорожку до значения ползунка, добавьте data-highlight="true":

Пример

<input type="range" data-hightlight="true">

Попробуйте сами »

Тумблер

Тумблер часто используется для кнопок вкл\выкл или истина/ложь:

Чтобы создать переключатель, используйте элемент <select> вместе с data-role="slider" и добавьте два элемента <option>:

Пример

<form method="post" action="demoform.php">
  <div data-role="fieldcontain">
    <label for="switch">Тумблер:</label>
    <select name="switch" id="switch" data-role="slider">
      <option value="on">Вкл</option>
      <option value="off">Выкл</option>
    </select>
  </div>
</form>

Попробуйте сами »

Подсказка: Используйте атрибут "selected", чтобы установить одну из опций, которые будут выбраны заранее (выделены):

Пример

<option value="off" selected>Выкл</option>

Попробуйте сами »

Еще примеры

Выбор из диапазона
Как сделать ползунок с двумя ручками, позволяя пользователям указать минимальное и максимальное значение в диапазоне.

Далее: Событие Ориентации jQuery Mobile

Смотрите также
Комментарии
Написать

(обязательно)

(обязательно)

Это не спам (обязательно)