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; 
}