Как отобразить вертикальные переключатели в горизонтальном стиле с помощью jquery-mobile?

Question

Jquery-mobile может отображать наборы радиокнопок в горизонтальной группировке с отключенным фактическим полем выбора, а выделение указывается цветом фона текста путем добавления атрибута data-type="horizontal".

Он также может отображать вертикальный набор, который сохраняет поля и не устанавливает цвет фона, установив 'data-type="vertical"'.

Есть ли способ изменить вертикальный стиль в соответствии с горизонтальным? То есть подавить поля и использовать цвет фона текста для выбора индикации.

К вашему сведению, мы используем jquery-mobile 1.3.2.

Answer 1

Эта функция не встроена в jQM, но вы можете сделать это с помощью некоторых CSS и скриптов.

Дана стандартная вертикальная разметка:

<fieldset data-role="controlgroup" data-mini="true" class="vertBackground">
    <legend>Vertical, mini sized:</legend>
    <input type="radio" name="radio-choice-v-6" id="radio-choice-v-6a" value="on" checked="checked" />
    <label for="radio-choice-v-6a">One</label>
    <input type="radio" name="radio-choice-v-6" id="radio-choice-v-6b" value="off" />
    <label for="radio-choice-v-6b">Two</label>
    <input type="radio" name="radio-choice-v-6" id="radio-choice-v-6c" value="other" />
    <label for="radio-choice-v-6c">Three</label>
</fieldset>

Я дал контрольной группе класс vertBackground сделать селекторы jQuery и CSS специфичными для этой группы. Я применяю немного CSS, чтобы скрыть галочки и переместить текст назад слева от кнопки:

.vertBackground .ui-icon{
    display: none;
}
.vertBackground .ui-btn-inner{
    padding-left: 11px !important;
}

Наконец, я добавляю скрипт, который проверяет, когда переключатели меняются, и добавляю класс ui-btn-active к метке, которая в данный момент проверяется:

$(document).on("pageinit", "#page1", function(){
    SetActive();

    $(".vertBackground input[type='radio']").on("change", function(){
        setTimeout(SetActive, 0);        
    });
});

function SetActive(){
    $(".vertBackground .ui-radio-off").removeClass("ui-btn-active");
    $(".vertBackground .ui-radio-on").addClass("ui-btn-active");    
}

Вот ДЕМО