Последние учебники веб-разработки
 

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

❮ Предыдущая Следующая Глава ❯

JQuery Mobile Slider Controls

С помощью ползунка можно выбрать значение из диапазона чисел:

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

пример

<form method="post" action="demoform.asp">
  <label for="points">Points:</label>
  < input type="range" name="points" id="points" value="50" min="0" max="100">
</form>
Попробуй сам "

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

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

Совет: Если вы хотите , чтобы показать значение на кнопке слайдера, добавить data-show-value="true" :

пример

<input type="range" data-show-value="true" >
Попробуй сам "

Совет: Если вы хотите , чтобы значения выскакивать на экране , как в подсказке (как вы слайд), добавить data-popup-enabled="true" с data-popup-enabled="true" :

пример

<input type="range" data-popup-enabled="true" >
Попробуй сам "

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

пример

<input type="range" data-highlight="true" >
Попробуй сам "

Флип тумблер

Переключатель флип часто используется для включения / выключения или истина / ложь кнопки:

Чтобы создать переключатель флип, используйте <input type="checkbox"> и указать data-role в "flipswitch" :

пример

<form method="post" action="demoform.asp">
  <label for="switch">Flip toggle switch checkbox:</label>
    <input type="checkbox" data-role="flipswitch" name="switch" id="switch">
</form>
Попробуй сам "

По умолчанию текст на переключателе флип "On" и "Off" . С помощью data-on-text и data-off-text атрибутов , чтобы изменить это:

пример

<input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-on-text="True" data-off-text="False" >
Попробуй сам "

Совет: Используйте "checked" был "checked" атрибут , чтобы установить один из вариантов , которые будут предварительно выбраны:

пример

<input type="checkbox" data-role="flipswitch" name="switch" id="switch" checked >
Попробуй сам "

Еще примеры

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

Стиль Флип переключатель
Как сделать переключатель флип шире.


❮ Предыдущая Следующая Глава ❯