jQuery Mobile：两列/三列垂直控件组的单选按钮

Question

我最近一直在使用jQuery Mobile，并开始遇到各种限制;其中大部分我可以使用某种类型的jQuery/Javascript/CSS操作。我们使用了很多iPad，它比普通手机的宽度更宽。我们页面上的一些输入组在双列格式中往往看起来更好;如果可能。

一个例子是单选按钮的长列表。它只有一列看起来很糟糕。我们希望显示2或3列的单选按钮列表，而不是使用单个“垂直”“控制组”的典型1列格式。看到这个演示页面上的垂直控制组：

http://demos.jquerymobile.com/1.4.5/checkboxradio-radio/#Verticalgroup

随着的复选框，我已经通过创建两个或三个不同controlgroups，然后将它们放置在一个3柱网做到了这一点。这适用于复选框，但我不确定如何使用单选按钮执行此操作。有任何想法吗？

我假设我可以创建三个不同的无线电输入垂直控制组（并排），然后操作CSS，使其看起来像有一个组。我必须为实际选定的收音机管理隐藏的输入。

Answer 1

我决定为营销源创建两列;右边和左边。名称是“marketing_source_left”和“marketing_source_right”。我填充两个无线电垂直控制组，然后使用jQuery来更改两个都具有“marketing_source”的“名称”属性。

// Define current marketing_source value and remove hidden field 
var marketing_source = $('#marketing_form #marketing_source').val(); // hidden field 
$('#marketing_form #marketing_source').val(marketing_source).remove(); 

// Change all marketing source radios (left and right sides) 
// to have property name="marketing_source" 
$("#marketing_form input:radio[name='marketing_source_left']").prop('name', 'marketing_source').prop('checked', false); 
$("#marketing_form input:radio[name='marketing_source_right']").prop('name', 'marketing_source').prop('checked', false); 

// Set the radio to checked for the marketing source value 
$('#marketing_form input[type="radio"]:checked').prop('checked', false); // Uncheck current 
$('#marketing_form input:radio[name="marketing_source"]').filter('[value="'+marketing_source+'"]').prop('checked', true); 
$('#marketing_form input:radio[name="marketing_source"]').checkboxradio('refresh'); 

所用的CSS与此类似。

#marketing_right_div, #marketing_left_div { 
    display: inline-block !important; 
    width: 314px !important; 
    text-align: top; 
    vertical-align: top; 
}