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

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

所以，我怎样才能按钮这样的：

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

我对小提琴添加了一个简单的测试：http://jsfiddle.net/okL0geuw/2/ 当你点击按钮，它追加4个链接到前一个。但它应该把它们添加到一个新的行。顺便说一句。我仍在努力让样式在小提琴样本中工作。

来源

2014-09-28 Paul Meems

你可以做拨弄一下演示。 – Tasos 2014-09-28 19:33:01

感谢您的快速回复。我用链接更新了我的帖子。 – 2014-09-28 20:04:57

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

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

然后，保持controlgroup的UI，你需要刷新后添加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

来源

2014-09-28 20:30:03 Omar

非常感谢。这正是我整个晚上都在寻找的东西。 – 2014-09-28 20:47:11

@PaulMeems不客气。我已经更新了我的回答以及演示。 – Omar 2014-09-28 20:54:13

或者你只是使用（
）;） - http://jsfiddle.net/nypk5rfv/ – Tasos 2014-09-28 21:45:14

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

回答

相关问题