0

Jquery-mobile can display sets of radio buttons on a horizontal grouping with the actual selection box suppressed and selection indicated by the background text colour by adding the attribute 'data-type="horizontal"'.

It can also display a vertical set, which retains the boxes and does not set the background colour, by setting 'data-type="vertical"'.

Is there a way to change the vertical styling to match the horizontal styling? That is, suppress the boxes and use the background text colour to indication selection.

FYI, we're using jquery-mobile 1.3.2.

4

1 回答 1

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");    
}

这是一个 演示

于 2014-07-29T19:43:43.170 回答