Question

将JQuery Mobile v1.4.3与JQuery 1.11一起使用我正在使用KinectJS动态地将图层添加到画布。我正在使用图层控件来移动和隐藏图层。我正在考虑使用控制组。我可以添加4个看起来很棒的水平按钮/链接。但是当添加一个新图层时，我需要在前4个水平按钮下面添加一系列4个按钮。我不能让这个工作。我尝试为每个图层添加一个控制组，但后来我无法动态添加元素。它引发了一个关于未初始化的控制组的异常。

那我怎么能得到这样的按钮：

(link|link|link|link)
(link|link|link|link)
(link|link|link|link)

我在小提琴上添加了一个简单的测试：http://jsfiddle.net/okL0geuw/2/ 当您点击按钮时，它会将4个链接附加到上一个链接。但它应该将它们添加到新的一行。 BTW。我还在努力让造型在小提琴样品中起作用。

Answer 1

水平控制组中的所有按钮都有float: left和clear: none。要强制新添加的按钮跳转到下一行，您需要clear: left只有每组新按钮的第一个按钮。

您还可以更新margin-bottom以使每个集看起来像一个单独的组。

然后，要维护 controlgroup 的用户界面，您需要在刷新后的每个第一个按钮和ui-first-child类添加ui-last-child到每个第四个按钮。请注意，添加新元素后，您无需致电.enhanceWithin()，.controlgroup("refresh")已足够。

.ui-controlgroup .ui-btn:nth-child(4n+1) {
   clear:left;
}

.ui-controlgroup .ui-btn {
   margin-bottom: 2px;
}

$el = "<buttons>";
$("#layercontrol")
    .controlgroup("container")
    .append($el)
    .end()
    .controlgroup("refresh")
    .find(".ui-btn:nth-child(4n)")
    .addClass("ui-last-child")
    .end()
    .find(".ui-btn:nth-child(4n+1)")
    .addClass("ui-first-child");

<强> Demo

控制组：JQuery Mobile上有3个水平按钮，多个行

1 个答案: