Question

我正在尝试动态地将jQuery移动无线电转换为垂直堆叠的无线电。我有这个。

$('fieldset').data('type', 'vertical').controlgroup('refresh');

这不应该将所有数据类型=“水平”更改为data-type =“vertical”吗？即使我检查它，我看到没有变化。我还在表格上玩了触发器（'创建'），这只是搞乱了收音机。

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup" data-type="horizontal">
        <input type="radio" name="gender" id="male" value="male" class="required" checked />
        <label for="male">Male</label>
        <input type="radio" name="gender" id="female" value="female" class="required" />
        <label for="female">Female</label>
    </fieldset>
</div>

Answer 1

我通常用来改变应用于控制组和单选按钮的样式，只要我需要从水平变为垂直，反之亦然。以下是代码，希望这符合您的要求。

$("fieldset").attr('data-type','vertical').removeClass('ui-controlgroup-horizontal').addClass('ui-controlgroup-vertical');

var $firstLbl =  $("fieldset").find('div.ui-radio:first').children('label'),
    $secondLbl = $("fieldset").find('div.ui-radio:last').children('label');

    $firstLbl.removeClass('ui-corner-left').addClass('ui-corner-top');
    $firstLbl.children('span').removeClass('ui-corner-left').addClass('ui-corner-top');
    $secondLbl.removeClass('ui-corner-right').addClass('ui-corner-bottom');
    $secondLbl.children('span').removeClass('ui-corner-right').addClass('ui-corner-bottom');

    //show the radio buttons.
    $("input[type='radio']").each(function(i) {
        var $self = $(this);
        $self.next().addClass('ui-btn-icon-left').find('span.ui-btn-text').after($('<span class="ui-icon ui-icon-shadow ui-icon-radio-off">&nbsp;</span>'));
    });

    //Set the first one as checked by default.
    $("input[type='radio']:first").attr("checked",true).checkboxradio("refresh");

将jQuery Mobile无线电从水平转换为垂直

1 个答案: