본문 바로가기
----- IT -----/jQuery Moblie

jQuery Mobile - Button icons

by 대소니 2011. 5. 17.
버튼에 아이콘을 추가할 수 있습니다.
JQM 프레임웍은 모바일 앱에서 자주 사용되는 아이콘을 포함하고 있습니다.
저용량 다운로드 JQM버젼에는 모든 배경색에 훌륭하게 대비될 수 있는 검정색의 반투명 원모양위에 하얀색 아이콘을 포함하고 있습니다.

Ex1.
<a href="index.html" data-role="button" data-icon="delete">Delete</a>

Ex2.
버튼 태그에 아이콘 추가하기(버튼 태그에는 아이콘이 아직 제대로 적용이 안되네요^^)
<button data-icon=”delete”> delete icon Button </button>

Ex3.
Input type=”submit” 태그에 아이콘 추가하기
<input type="submit" data-icon="delete" value="home icon submit "> </button>


그외에도 아래와 같이 많은 아이콘들이 사용 가능합니다.




아이콘의 위치


아이콘의 디폴트 위치는 왼쪽입니다.
아이콘의 위치 설정 속성은 data-iconpos=[right, top, bottom] 입니다.

<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">right position icon Delete  </a>
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="top">top position icon Delete  </a>
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="bottom">bottom position icon Delete  </a>
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">notext icon Delete  </a>



notext 값을 주면 버튼의 텍스트 부분이 줄어 아이콘 버튼이 됩니다.^^






'----- IT ----- > jQuery Moblie' 카테고리의 다른 글

jQuery Mobile - Inline Buttons  (0) 2011.05.18
jQuery Mobile - Custom icon  (0) 2011.05.17
jQuery Mobile - Button markup options  (0) 2011.05.16
jQuery Mobile - Theming toolbars  (0) 2011.05.16
jQuery Mobile - Persistent footer navbar  (4) 2011.05.13

댓글