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");
}
Here is a DEMO
关于javascript - 如何使用 jquery-mobile 以水平样式显示垂直单选按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25019887/