Javascript 如何使用jquery mobile以水平样式显示垂直单选按钮?
Jquery mobile可以通过添加“data type=“horizontal”属性,在水平分组上显示多组单选按钮,实际选择框被抑制,选择由背景文本颜色指示 它还可以通过设置“data type=“vertical””来显示一个垂直集,该垂直集保留框而不设置背景颜色 是否有方法更改垂直样式以匹配水平样式?也就是说,抑制框并使用背景文本颜色来指示选择Javascript 如何使用jquery mobile以水平样式显示垂直单选按钮?,javascript,html,css,jquery-mobile,jquery-mobile-radio,Javascript,Html,Css,Jquery Mobile,Jquery Mobile Radio,Jquery mobile可以通过添加“data type=“horizontal”属性,在水平分组上显示多组单选按钮,实际选择框被抑制,选择由背景文本颜色指示 它还可以通过设置“data type=“vertical””来显示一个垂直集,该垂直集保留框而不设置背景颜色 是否有方法更改垂直样式以匹配水平样式?也就是说,抑制框并使用背景文本颜色来指示选择 仅供参考,我们正在使用jquery mobile 1.3.2。此功能未内置于jQM中,但您可以通过一些CSS和脚本实现 给定标准垂直标记: &l
仅供参考,我们正在使用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>
最后,我添加了在单选按钮更改时进行检查的脚本,并将类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");
}
这里有一个
$(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");
}