Jquery mobile:在一行中保持水平控件

Question

我有两个动态水平的单选按钮控制组:

<div class="categories-panel" id="sections-panel">
    <fieldset id="section-choice-fieldset" data-role="controlgroup" data-type="horizontal">
        <!-- ko foreach: Sections -->
        <input type="radio"
               data-mini="true" 
               ...
            />
        <label data-bind="text:Name, attr:{'for':Id}"></label>
        <!-- /ko -->
    </fieldset>
</div>

controlgroups的内容由knockoutjs更新。标记是这样更新的:

self.refreshCategoriesList = function() {
    $("#section-choice-fieldset").find("input[type='radio']").checkboxradio();
    $("#category-choice-fieldset").controlgroup();
};

问题是:控制组不适合一行，直到我在调试器中打开.ui-controlgroup-controlsdiv的display: inline-block属性:

在display: inline-block刷新前:http://i890.photobucket.com/albums/ac105/cubius/screen - 1. - png

在display: inline-block刷新后(期望视图):http://i890.photobucket.com/albums/ac105/cubius/screen - 2. - jpg

如何使jQM总是画我的控制组在一行?

Answer 1

首先，这一行你选择对照组的方式是错误的:

$("#category-choice-fieldset").controlgroup();

必须是

$("#section-choice-fieldset").controlgroup();

(可能是打字错误)您可以使用以下两种方法中的任何一种:

方法1

在我的小提琴上很好。我会说你把<script>标签从头部移动到身体，因为jQM的page事件不适合KnockOut.js和KnockOut.js需要一个DOM准备好正常工作，而DOM ready不适用于jQM。所以我想这确实是一个恶性循环。

Demo: http://jsfiddle.net/hungerpain/k7UR5/

方法2

你可以在你的refreshCategoriesList方法中再尝试一件事:

//$("#section-choice-fieldset").find("input[type='radio']").checkboxradio();
//$("#category-choice-fieldset").controlgroup();
$("[data-role=page]").trigger("create");

刷新页面上的整个控件——这就是trigger("create")的作用

Demo: http://jsfiddle.net/hungerpain/k7UR5/1/

Answer 2

如果要更新控制组(追加、修改等)，可以这样访问控制组:

$("#my-controlgroup").controlgroup("container")["append"]($el);

需要访问控制组container。请参阅我的jsfiddle来修改控制组:

http://jsfiddle.net/androdify/WAzs6/