Виджет переключательверсия добавлена: 1.4
Описание: Создаёт виджет переключатель
Переключатели
Переключатель — это альтернативный вид чекбокса или двухвариантного списка. Его можно переключать щелчком или свайпом.
Чтобы создать переключатель, добавьте атрибут data-role="flipswitch" к чекбоксу input или к select, у которого есть два option значения.
Темы
Виджет переключатель использует CSS-фреймворк jQuery Mobile для стилизации внешнего вида. Если требуется специфическая стилизация переключателя, следующие имена классов CSS можно использовать для переопределений или в качестве ключей для classes параметра:
-
ui-flipswitch: Внешний контейнер переключателя. Кроме того, классui-flipswitch-activeбудет применён, если переключатель находится в активном-
ui-flipswitch-on: Метка включённого состояния переключателя -
ui-flipswitch-off: Метка выключенного состояния переключателя -
ui-flipswitch-input: Элемент чекбокса для переключателя
-
Переключатель на основе чекбокса
Используйте следующий разметку для создания переключателя на основе чекбокса input:
<fieldset>
<div data-role="fieldcontain">
<label for="checkbox-based-flipswitch">Checkbox-based:</label>
<input type="checkbox" id="checkbox-based-flipswitch" data-role="flipswitch">
</div>
</fieldset> Метки переключателя управляются параметрами onText и offText. Переключатель на основе списка
Вы также можете создать переключатель на основе элемента select:
<fieldset>
<div data-role="fieldcontain">
<label for="select-based-flipswitch">Select-based:</label>
<select id="select-based-flipswitch" data-role="flipswitch">
<option value="leave">Bye</option>
<option value="arrive">Hi</option>
</select>
</div>
</fieldset> Метки переключателя управляются метками элементов select элемента option. Первый вариант используется для неактивного, "выключенного" состояния, а второй вариант — для активного, "включённого" состояния. Пользовательские метки
Вы можете настроить отображаемые метки виджета переключатель, используя параметры onText и offText, если виджет основан на чекбоксе, или используя текст внутри первых двух элементов option , если виджет основан на select.
Расположение текста внутри двух меток задаётся вручную в структурном CSS виджета переключатель. Таким образом, если вы используете метки, которые длиннее, чем "Вкл." и "Выкл.", вам, возможно, придётся переопределить стандартное размещение текста с помощью следующего пользовательского CSS:
.ui-flipswitch .ui-btn.ui-flipswitch-on {
text-indent: -2.6em;
}
.ui-flipswitch .ui-flipswitch-off {
text-indent: 1em;
} В зависимости от вашего выбора меток, вам также может потребоваться предоставить пользовательский CSS для переопределения значения ширины переключателя по умолчанию:
.ui-flipswitch {
width: 5.875em;
}
.ui-flipswitch.ui-flipswitch-active {
padding-left: 4em;
width: 1.875em;
}
@media (min-width: 28em) {
// Repeated from rule .ui-flipswitch above
.ui-field-contain > label + .ui-flipswitch {
width: 1.875em;
}
} Предоставление готовой разметки
Вы можете улучшить время загрузки страницы, предоставив разметку, которую виджет переключатель обычно создаёт во время своего начального выполнения.
Предоставив эту разметку самостоятельно и указав, что вы это сделали, установив атрибут data-enhanced="true", вы даёте указание виджету переключателя пропустить эти манипуляции с DOM при создании и предположить, что необходимая структура DOM уже присутствует.
При предоставлении такой предварительно отрендеренной разметки вы также должны установить все классы, которые фреймворк обычно устанавливает, и вы также должны установить все атрибуты данных, значения которых отличаются от значений по умолчанию, чтобы указать, что предоставленная предварительно отрендеренная разметка отражает значения параметров виджета, отличные от значений по умолчанию.
Виджет переключатель добавляет обёртку div вокруг input. В дополнение к исходному элементу обёртка также содержит два элемента span , где хранятся две метки. Первая span стилизуется как кнопка с текстом активного состояния, отображающимся за пределами области кнопки слева. Чтобы сделать переключатель доступным для навигации по табуляции, вы можете добавить атрибут tabindex="1" к первой span.
В примере ниже предоставлена предварительно отрендеренная разметка для переключателя. Атрибут data-corners="false" явно указан, поскольку отсутствие класса ui-corner-all на элементе обёртки указывает, что параметр виджета "углы" должен быть false.
<div class="ui-flipswitch ui-shadow-inset ui-bar-inherit"> <span tabindex="1" class="ui-flipswitch-on ui-btn ui-shadow ui-btn-inherit">On</span> <span class="ui-flipswitch-off">Off</span> <input type="checkbox" data-role="flipswitch" data-enhanced="true" data-corners="false" name="flip-checkbox" class="ui-flipswitch-input"> </div>
