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

Question

我试图将jQuery移动收音机动态地转换为垂直堆叠的收音机。我有这个。

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

这应该不会改变所有data-type =“horizo​​ntal”到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

我一般使用以改变施加到controlgroup和单选按钮的样式每当我需要从水平改变为垂直或反之亦然。以下是代码，希望这符合您的要求。

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