控制組：水平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上的多行

回答

相關問題