Виджет ползунка

Ползунок

Для добавления ползунка на вашу страницу используйте стандартный элемент ввода с атрибутом type="range". Значение элемента ввода используется для настройки начального положения ползунка, и это значение также заполняет текстовое поле. Установите значения атрибутов min и max, чтобы задать диапазон ползунка. Если необходимо ограничить ввод определёнными приращениями, добавьте атрибут step. Задайте атрибут value, чтобы определить начальное значение. Фреймворк проанализирует эти атрибуты для настройки ползунка.

При перетаскивании ползунка фреймворк будет обновлять значение базового элемента ввода (и наоборот), чтобы они всегда синхронизировались; это гарантирует, что значение будет отправлено вместе с формой.

Установите атрибут for элемента label в соответствии со значением id элемента input, чтобы они были семантически связаны. Можно скрывать метку, если это не нужно в макете страницы, но мы требуем её присутствия в разметке для семантических и доступностных соображений.

Фреймворк найдёт все элементы input с атрибутом type="range" и автоматически преобразует их в ползунок с сопутствующим элементом ввода без необходимости применения атрибута data-role. Чтобы предотвратить автоматическое преобразование элемента ввода в ползунок, добавьте атрибут data-role="none" к элементу ввода.

В этом примере допустимый диапазон составляет от 0 до 100.

<label for="slider-1">Input slider:</label>
<input type="range" name="slider-1" id="slider-1" value="60" min="0" max="100">

Ползунок по умолчанию с этими настройками отображается следующим образом:

• ui-slider: Внешний контейнер для ползунка.
  • ui-slider-popup: Элемент всплывающей подсказки в случае, если data-popup-enabled имеет значение true
  • ui-slider-input: Элемент ввода ползунка
  • ui-slider-track: Дорожка ползунка
    • ui-slider-handle: Ручка дорожки ползунка

Шаг приращения

Чтобы принудительно установить ползунок на определённое приращение, добавьте атрибут step к элементу ввода. По умолчанию шаг равен 1, но в этом примере шаг равен 10, а максимальное значение равно 500.

В этом примере допустимый диапазон составляет от 0 до 100.

<label for="slider-1">Input slider:</label>
<input type="range" name="slider-1" id="slider-1" value="60" min="0" max="100" step="10">

Это создаст элемент ввода, который устанавливается на приращения по 50. Если значение, введённое в элемент ввода, не соответствует шагу приращения, значение будет сброшено при потере фокуса на ближайшее значение, соответствующее шагу.

Выделение заполнения

Чтобы добавить выделение заполнения на дорожке до положения ползунка, добавьте атрибут data-highlight="true" к элементу ввода. Заполнение использует активный цвет.

<label for="slider-fill">Input slider:</label>
<input type="range" name="slider-fill" id="slider-fill" value="60" min="0" max="100" data-highlight="true">

Мини-версия

Для более компактной версии, полезной в тулбарах и ограниченном пространстве, добавьте атрибут data-mini="true" к элементу, чтобы создать мини-версию.

<label for="slider-mini">Input slider:</label>
<input type="range" name="slider-mini" id="slider-mini" value="25" min="0" max="100" data-highlight="true" data-mini="true">

Это создаст ползунок и соответствующий элемент ввода, которые будут меньше по высоте, чем стандартная версия. Элемент ввода также будет иметь меньший размер текста.

Контейнеры полей

По желанию оберните разметку ползунка в контейнер с классом ui-field-contain, чтобы визуально сгруппировать его в форме. В этом примере атрибут step опущен, чтобы можно было выбрать любое целое число.

<div class="ui-field-contain">
  <label for="slider-2">Input slider:</label>
  <input type="range" name="slider-2" id="slider-2" value="25" min="0" max="100">
</div>

Теперь ползунок отображается так:

Ползунки также реагируют на управляющие клавиши. Клавиши "Стрелка вправо", "Стрелка вверх" и "Page Up" увеличивают значение; клавиши "Стрелка влево", "Стрелка вниз" и "Page Down" уменьшают его. Для перемещения ползунка к минимальному или максимальному значению используйте клавиши "Home" или "End" соответственно.

Вызов плагина ползунка

Этот плагин будет автоматически инициализирован на любой странице, содержащей элемент ввода с атрибутом type="range". Однако при необходимости вы можете напрямую вызвать плагин ползунка для любого селектора, как и любой другой плагин jQuery:

$( "input" ).slider();

Стилевое оформление ползунка

Чтобы установить цвет темы для ползунка, добавьте атрибут data-theme к элементу input, который применит тему к элементу ввода, ручке и дорожке. Цвет дорожки можно установить отдельно, добавив атрибут data-track-theme для применения состояния "активно" выбранного цвета.

<div class="ui-field-contain">
  <label for="slider-3">Input slider:</label>
  <input type="range" name="slider-3" id="slider-3" value="25" min="0" max="100" data-theme="b" data-track-theme="a">
</div>

Это создаст ползунок с темой:

Переключатель-фликер

Двоичный переключатель-фликер — это распространённый элемент пользовательского интерфейса на мобильных устройствах, используемый для ввода данных "вкл./выкл." или "истина/ложь". Можно либо перетащить ручку переключателя, как в ползунке, либо нажать на одну из сторон переключателя.

Для создания переключателя-фликера начните с элемента select с двумя вариантами. Первый вариант будет стилизован как выключенное состояние, а второй — как включённое, поэтому напишите свои варианты соответственно.

Установите атрибут for элемента label в соответствии со значением id элемента input, чтобы они были семантически связаны. Можно скрывать метку, если это не нужно в макете страницы, но мы требуем её присутствия в разметке для семантических и доступностных соображений.

<label for="flip-1">Flip switch:</label>
<select name="flip-1" id="flip-1" data-role="slider">
  <option value="off">Off</option>
  <option value="on">On</option>
</select>

Это создаст базовый переключатель-фликер. По умолчанию стили устанавливают ширину переключателя на 100% родительского контейнера и выстраивают метку на отдельной строке.

Более длинные метки

Управление масштабируется пропорционально, поэтому для использования более длинных меток можно просто добавить строку CSS, устанавливающую переключателю желаемую ширину. Например, при следующем разметке:

<div class="containing-element">
  <label for="flip-min">Flip switch:</label>
  <select name="flip-min" id="flip-min" data-role="slider">
    <option value="off">Switch Off</option>
    <option value="on">Switch On</option>
  </select>
</div>

.containing-element .ui-slider-switch { width: 9em } приведет к:

Поскольку некоторые стили по умолчанию зависят от fieldcontains, обратите внимание, что вам может потребоваться убедиться, что пользовательские стили применяются к переключателям внутри fieldcontains, используя .ui-field-contain div.ui-slider-switch { width: […]; }.

Мини-версия

Для более компактной версии, полезной в тулбарах и ограниченном пространстве, добавьте атрибут data-mini="true" к элементу, чтобы создать мини-версию.

<label for="flip-mini">Flip switch:</label>
<select name="flip-mini" id="flip-mini" data-role="slider" data-mini="true">
  <option value="off">Off</option>
  <option value="on">On</option>
</select>

Это создаст переключатель-фликер, который будет меньше по высоте, чем стандартная версия, и иметь меньший размер текста.

Контейнеры полей

По желанию оберните разметку переключателя в контейнер с классом ui-field-contain, чтобы визуально сгруппировать его в форме. В этом примере атрибут step опущен, чтобы можно было выбрать любое целое число.

<div class="ui-field-contain">
  <label for="flip-2">Flip switch:</label>
  <select name="flip-2" id="flip-2" data-role="slider" data-mini="true">
    <option value="off">Off</option>
    <option value="on">On</option>
  </select>
</div>

Теперь переключатель-фликер отображается так:

Стилевое оформление переключателя-фликера

Как и все элементы формы, этот виджет автоматически наследует тему от своего родительского контейнера. Чтобы выбрать определённый цвет темы, укажите атрибут data-theme на select и укажите букву цвета.

<div class="ui-field-contain">
  <label for="flip-3">Flip switch:</label>
  <select name="flip-3" id="flip-3" data-role="slider" data-theme="b">
    <option value="no">No</option>
    <option value="yes">Yes</option>
  </select>
</div>

В результате получается переключатель с цветами цвета "b" для ручки. Обратите внимание, что левая "включённая" часть получает цвет активного состояния.

Вот вариант с цветом "a":

Также можно стилизовать дорожку переключателя-фликера, добавив атрибут data-track-theme и указав выбранную букву цвета на select.

Вот пример переключателя-фликера с цветом "a" для дорожки и цветом "c" для ручки:

<div class="ui-field-contain">
  <label for="flip-5">Flip switch:</label>
  <select name="flip-5" id="flip-5" data-role="slider" data-theme="a" data-track-theme="b">
    <option value="no">No</option>
    <option value="yes">Yes</option>
  </select>
</div>

Вызов плагина переключателя

Этот плагин будет автоматически инициализирован на любой странице, содержащей элемент ввода с атрибутом type="slider". Однако при необходимости вы можете напрямую вызвать плагин ползунка для любого селектора, как и любой другой плагин jQuery:

$( "input" ).slider();

Стилевое оформление переключателя-фликера

Как и все элементы формы, этот виджет автоматически наследует тему от своего родительского контейнера. Чтобы выбрать определённый цвет темы, укажите атрибут data-theme на select и укажите букву цвета.

<div class="ui-field-contain">
  <label for="flip-3">Flip switch:</label>
  <select name="flip-3" id="flip-3" data-role="slider" data-theme="a">
    <option value="no">No</option>
    <option value="yes">Yes</option>
  </select>
</div>

В результате получается переключатель с цветами цвета "a" для ручки. Обратите внимание, что левая "включённая" часть получает цвет активного состояния.

Также можно стилизовать дорожку переключателя-фликера, добавив атрибут data-track-theme и указав выбранную букву цвета на select.

Вот пример переключателя-фликера с цветом "a" для дорожки и цветом "c" для ручки:

<div class="ui-field-contain">
  <label for="flip-5">Flip switch:</label>
  <select name="flip-5" id="flip-5" data-role="slider" data-theme="a" data-track-theme="b">
    <option value="no">No</option>
    <option value="yes">Yes</option>
  </select>
</div>