jquery - 将 jQuery Mobile 收音机从水平转换为垂直

Question

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

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

这不应该将所有 data-type="horizo​​ntal" 更改为 data-type="vertical" 吗？即使我检查它，我也看不到任何变化。我还在表单上玩过 trigger('create') ，这只会弄乱收音机。

<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");