对照组:3个水平按钮，在JQuery Mobile上有多行 [英] Controlgroup: 3 buttons horizontal, multiple rows on JQuery Mobile

问题描述

在JQuery 1.11中使用JQuery Mobile v1.4.3 我正在使用KinectJS在画布上动态添加图层. 我正在使用图层控件来移动和隐藏图层. 我正在考虑为此使用对照组.我可以添加4个水平按钮/链接，看起来很棒. 但是，当添加新图层时，我需要在前4个水平按钮下方再次添加一系列4个按钮. 我无法使它正常工作. 我尝试为每个图层添加一个控件组，但随后无法向其中动态添加元素.它将引发有关未初始化控制组的异常.

Using JQuery Mobile v1.4.3 with JQuery 1.11 I'm dynamically adding layers to a canvas using KinectJS. I'm working on a layer control to move and hide layers. I'm thinking of using the controlgroup for this. I can add 4 horizontal buttons/links which look great. But when adding a new layer I need to add below the first 4 horizontal buttons again a series of 4 buttons. I can't get this to work. I tried adding a controlgroup for each layer, but then I can't dynamically add elements to it. It throws an exception about the controlgroup not initialized.

那么我如何获得这样的按钮:

So how can I get buttons like this:

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

我在小提琴上添加了一个简单的测试: http://jsfiddle.net/okL0geuw/2/ 当您按下按钮时，会将4个链接附加到上一个链接.但是它应该将它们添加到新行中. 顺便提一句.我仍在努力使样式在小提琴样本中起作用.

I've added a simple test on fiddle: http://jsfiddle.net/okL0geuw/2/ When you hit the button it appends the 4 links to the previous one. But it should add them on a new line. BTW. I'm still working on getting the styling working in the fiddle sample.

推荐答案

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

All buttons in a horizontal controlgroup have float: left and clear: none. To force new added buttons to jump to next line, you need to clear: left of only first button of each new group of buttons.

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

You may also update margin-bottom to make each set look like a separate group.

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

Then, to maintain controlgroup's UI, you need to add ui-first-child to every first button and ui-last-child class to every fourth button after refreshing. Note that you don't need to call .enhanceWithin() after adding new element, .controlgroup("refresh") is enough.

.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

这篇关于对照组:3个水平按钮，在JQuery Mobile上有多行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！