Документация JQM здесь несколько запутанная.Существует два вида flipswitch:
- Flipswitches, которые построены поверх
select элемента - Flipswitches, которые построены поверх
checkbox элемента
(не знаю, почему существует также slider флипчитч)
оба, скины, как мобильные flippswitches , вы можете использовать либо select или checkbox в зависимости от ваших потребностей, точно так же, как вы делали бы со стандартными немобильными элементами HTML: если вам нужно создать свою страницу из PHP, используйте selected или checkedатрибут для предварительного выбора одной опции / значения.
Вот пример инициализации из кода:
$(document).on("flipswitchcreate", "#flip-checkbox", function(e) {
$(this).prop("checked", true).flipswitch("refresh");
});
$(document).on("flipswitchcreate", "#flip-select", function(e) {
$(this).val("on").flipswitch("refresh");
});
$(document).on("slidecreate", "#flip-slider", function(e) {
$(this).val("on").slider("refresh");
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div id="page-one" data-role="page">
<div role="main" class="ui-content">
<label for="flip-checkbox">Flip toggle switch checkbox:</label>
<input type="checkbox" data-role="flipswitch" id="flip-checkbox" name="flip-checkbox">
<label for="flip-select">Flip toggle switch select:</label>
<select data-role="flipswitch" id="flip-select" name="flip-select">
<option value="off" selected="">Off</option>
<option value="on">On</option>
</select>
<label for="flip-slider">Flip toggle switch slider:</label>
<select data-role="slider" id="flip-slider" name="flip-slider">
<option selected="" value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</div>
</body>
</html>
По поводу состояния
active вы правы.Я тоже это заметил, поэтому я использую это по умолчанию в своем CSS:
/* Maybe forgotten in JQM standard CSS */
a.ui-flipswitch-on {
color: inherit !important;
}