jQuery Mobile - Grouped Buttons

네비게이션 처럼 보이게 하기 위해서 여러 버튼을 한 블럭처럼 보이게 할 수 있습니다.
버튼들의 상위 div 태그에 data-role=”controlgroup” 속성을 추가하면 프레임웍이 세로로 나열한 버튼 그룹을 만들어 줄 것입니다. 각 버튼간에 적용된 마진을 제거하고 쉐도우를 삭제하여 중간에 나열된 버튼들이 어색하지 않도록 보여줍니다.

<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>

감싸고 있는 태그의 속성에 data-type=”horizontal” 속성을 추가하면, 한 라인에 가로방향으로 버튼들이 나열됩니다. 버튼안의 content 길이에 따라 버튼의 가로 길이가 결정되어집니다.

<div data-role="controlgroup" data-type="horizontal">
<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>

만약, 버튼이 개수가 많거나, 버튼 content가 길어서 스크린의 한 라인에 들어가지 않으면 자동으로 다음 줄로 내려가지니 유의해야 합니다.

그리고, 버튼에 아이콘을 추가하듯이 하여, 그룹 버튼을 꾸밀수도 있습니다.

<div data-role="controlgroup" data-type="horizontal" >
<a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
<a href="index.html" data-role="button" data-icon="arrow-d">Down hahahaha</a>
<a href="index.html" data-role="button" data-icon="delete">Delete</a>
</div>