如何使用jquery-mobile以水平样式显示垂直单选按钮

How do I display vertical radio buttons in the horizontal style using jquery-mobile?

本文关键字：显示 垂直 单选按钮 样式 水平 何使用 jquery-mobile      更新时间：2023-09-26

Jquery-mobile可以通过添加属性'data-type="horizontal"'在水平分组上显示单选按钮集，实际选择框被抑制，选择由背景文本颜色指示。

它还可以通过设置'data-type="vertical"'来显示一个垂直集，它保留了方框而不设置背景色。

是否有办法改变垂直样式以匹配水平样式?也就是说，抑制方框并使用背景文本颜色来指示选择。

仅供参考，我们正在使用jquery-mobile 1.3.2。

这个特性不是内置在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");    
}

这里有一个DEMO

相关文章：