JQuery Mobile -Grouped buttons

Grouped buttons

가끔 몇개의 버튼을 시각적으로 그룹화 해서 한 block 에 넣어야 할 때가 있습니다. 

이런 효과를 주기 위해서는 그 버튼들의 set를 container에 wrap 하시면 되고 방법은 data-role="controlgroup" attribute를 이용하시면 됩니다. 그러면 framework는 vertical 버튼 그룹을 생성할 겁니다.

그리고 버튼들 사이의 margin이나 그림자 효과 같은 것을 없애게 되고 첫번째와 마지막 버튼에만 round 효과를 줍니다. 그러면 하나의 그룹안에 있는 버튼들이라는 시각적인 효과를 주게 되죠.

<div data-role="controlgroup">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>

디폴트로 그룹화된 버튼들은 vertical list로 보여 집니다.

data-type="horizontal" attribute를 controlgroup container에 추가하면 버튼들이 한 줄에 나란히 놓여지면서 그룹화 되는 horizontal-style group을 만들 수 있습니다. 버튼의 크기는 안의 텍스트 크기에 맞게 설정 됩니다. (버튼의 수가 너무 많거나 텍스트가 아주 길 경우 여러 줄로 표시 될 수도 있습니다.)

GroupedButtons.html