Question

我正在尝试使用jquery mobile 1.2.1动态更改水平控制组单选按钮的高度和字体大小

我可以更改大小和字体，但是使用某些值时，按钮会显示为与基本无线电选择器一样 http://picpaste.com/Capture-94sE5bZi.PNG

<body>
<div data-role="page" id="home">
<div data-role="content">
<form>
<fieldset data-role="controlgroup" data-type="horizontal" id="btnc1">
    <input name="rc" id="rca" value="on" checked="checked" type="radio">
    <label for="rca">#1</label>
    <input name="rc" id="rcb" value="off" type="radio">
    <label for="rcb">#2</label>
    <input name="rc" id="rcc" value="other" type="radio">
    <label for="rcc">#3</label>
</fieldset>
</form>
</div>
</div>  
</body>

<script>
$('#rca').on('click', function(){
  $('.ui-radio').css('height','100px');
  $('.ui-radio').children().children().css('font-size','18px');
});
$('#rcb').on('click', function(){
    $('.ui-radio').css('height','60px');
    $('.ui-radio').children().children().css('font-size','14px');
});
$('#rcc').on('click', function(){
    $('.ui-radio').css('height','30px');
    $('.ui-radio').children().children().css('font-size','10px');
});
</script>

感谢您的帮助

Answer 1

jQM通过替换其标记来增强单选按钮，但是，它将原始输入标记保留在dom下，在新标记下垂直居中于无线电div中。将高度设置为100px时，增强按钮保持在顶部，而输入移动到中间并变为可见。以下是两个选项：

不要调整按钮大小，只需更改字体大小，让按钮自动调整字体大小：

<强> DEMO

如果您需要将按钮大小更改为精确高度，则可以使用CSS隐藏输入：

.ui-radio input{
    display: none;
}

<强> DEMO

在jquery mobile中动态更改单选按钮高度和字体大小

1 个答案: