버튼의 종류
a(앵커)
페이지 이동에 사용된다.
1 | <a href="index.html" data-role="button">Link button</a> |
1 | <a href="index.html" data-role="button" data-mini="true">Link button</a> |
Form 버튼
Form의 버튼인 <input type="button" /> 이나 <button></button> 등은 data-role를 지정하지 않아도 자동으로 버튼 컴포넌트로 변환된다.
버튼의 아이콘
아이콘의 종류
버튼에 아이콘을 표시하고 싶다면 data-icon 속성을 사용한다.
버튼 아이콘의 위치
data-iconpos 속성의 값을 left, right, top, bottom으로 지정해서 아이콘의 위치를 변경한다.
아래는 data-iconpos="top"으로 한 예제
참고
http://jquerymobile.com/demos/1.1.0/docs/buttons/buttons-icons.html
버튼의 그룹핑
1 2 3 4 5 | <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> |
1 2 3 4 5 | <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> |
버튼의 테마
버튼의 테마는 data-theme 속성에 a,b,c,d,e 값을 부여해서 지정한다.
1 | <a href="index.html" data-role="button" data-theme="a">Theme a</a> |
아래는 각 테마별 버튼의 디자인
