버튼 button

버튼은 매우 광범위하게 사용되는 UI 컨트롤입니다. jQuery Mobile 에서 버튼은 앵커 태그에 data-role="button" 속성을 지정해서 만들 수 있습니다.
다만 폼 요소 중 버튼 타입에 해당하는 submit, reset, image 등의 input 양식은 이 속성을 따로 지정하지 않아도 자동으로 jQuery Mobile 버튼으로 만들어 집니다.

다음과 같이 앵커 태그에 data-role="button" 속성을 지정해서 버튼을 생성합니다.
<a href="#" data-role="button">button</a>

이렇게 생성한 버튼은 모바일 브라우져의 가로 크기를 꽉 채우게 됩니다.
그러나 data-inline="true" 속성을 추가로 지정하면 버튼의 크기를 텍스트에 맞춰 줄일수 있습니다.(이전글에서 블럭과 인라인이라고 잠시 이야기 한적이 있지요.)

폼 버튼.

앵커 태그의 경우 data-role="button" 속성을 명시적으로 지정해서 버튼을 만드는 반면 원래 버튼 타입에 해당하는 다음의 요소들은 이 속성을 따로 지정하지 않아도 자동으로 만들어 집니다.

이때 jQuery Mobile 은 내부적으로 이러한 버튼 타입 요소들을 숨김(hidden) 처리하고 버튼이 클릭될 때 원래 요소의 이벤트에 연결하는 방식으로 폼 버튼을 처리한다.
다음 코드는 data-role="button" 속성을 지정하지 않아도 자동으로 버튼으로 표현되는 예를 보여줍니다.
이들 버튼에도 여전히 data-icon, data-inline 등의 속성을 동일하게 사용할 수 있습니다.
<button>button element</button>
<input type="button" value="Input type=button" />
<input type="submit" value="Input type=submit" />
<input type="reset" value="Input type=reset" />
<input type="image" value="Input type=image" />

button 1

버튼 그룹.

여러개의 버튼을 묶어서 하나의 그룹을 형성하려면 버튼을 감싸고 있는 컨테이너 태그에 data-role="controlgroup" 속성을 지정하면 됩니다.
이 속성을 지정하면 개별 버튼에 있던 여백과 그림자 효과가 제거되고 서로 딱 달라붙은 형태로 표현되며 첫번째와 마지막 버튼의 양 끝이 둥그스레한 라운드 모양이 되어 전체적으로 하나의 그룹처럼 표현됩니다.

그리고 버튼이 그룹화되는 방향을 지정할 수 있는데, 기본값은 수직 정렬이며 이를 수평정렬로 변경할 수도 있습니다.
아래의 그림은 세 개의 버튼 그룹을 생성하고 각각 vertical(수직 기본값), horizontal(수평)로 정렬한 예입니다.
수평 정렬된 버튼 그룹은 Header , Footer 에 자주 사용 됩니다.

<div data-role="controlgroup">
    <a href="#" data-role="button" data-icon="back">Button 1</a>
    <a href="#" data-role="button" data-icon="forward">Button 2</a>
    <a href="#" data-role="button" data-icon="refresh">Button 3</a>
</div>
<div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="back">Button 1</a>
    <a href="#" data-role="button" data-icon="forward">Button 2</a>
    <a href="#" data-role="button" data-icon="refresh">Button 3</a>
</div>
<div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="back" data-iconpos="notext">Button 1</a>
    <a href="#" data-role="button" data-icon="forward" data-iconpos="notext">Button 2</a>
    <a href="#" data-role="button" data-icon="refresh" data-iconpos="notext">Button 3</a>
</div>

button 2