Control group: 3 buttons horizontal, multiple lines on jQuery Mobile
Using jQuery Mobile v1.4.3 with jQuery 1.11 I am dynamically adding layers to the canvas using KinectJS. I am working on a layer control to move and hide layers. I am thinking about using a control group for this. I can add 4 horizontal buttons / links that look great. But when adding a new layer, I need to add four more buttons below the first four horizontal buttons. I can't seem to get this to work. I tried to add a controlgroup for each layer, but then I cannot dynamically add items to it. It throws an exception about an uninitialized cgroup.
So how can I get buttons like this:
(link|link|link|link)
(link|link|link|link)
(link|link|link|link)
I added a simple fiddle test: http://jsfiddle.net/okL0geuw/2/ When you click the button it adds 4 links to the previous one. But he has to add them on a new line. BTW. I am still working on getting the stylism to work in the violin sample.
source to share
All buttons in the horizontal control group have float: left
and clear: none
. To force the newly added buttons to go to the next line, you clear: left
only need the first button of each new button group.
You can also update margin-bottom
to make each set appear as a separate group.
Then, to keep the cgroup UI, you need to add ui-first-child
to every first button and a class ui-last-child
to every fourth button after the update. Note that you don't need to call .enhanceWithin()
after adding a new element, .controlgroup("refresh")
just.
.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");
source to share