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>

对照组的内容由knockoutjs更新。标记以这种方式更新：

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

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

在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准备好正常工作，AND DOM { {1}}与jQM不兼容。所以我猜它确实是一个恶性循环。

演示：http://jsfiddle.net/hungerpain/k7UR5/

方法2

您可以在ready方法中再试一次：

refreshCategoriesList

刷新页面上的整个控件 - 这就是//$("#section-choice-fieldset").find("input[type='radio']").checkboxradio(); //$("#category-choice-fieldset").controlgroup(); $("[data-role=page]").trigger("create");的作用

演示：http://jsfiddle.net/hungerpain/k7UR5/1/

Answer 2

如果要更新控制组（追加，修改等），请按以下方式访问控制组：

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

您需要访问控制组container。请参阅我的jsfiddle以修改控制组：

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

jquery mobile：将水平控制组保持在一行

2 个答案:

方法1

方法2