버튼에 아이콘을 추가할 수 있습니다.
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>
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 |
댓글