JQuery Mobile - Button Icons

Adding Icons to Buttons

jQuery Mobile framework에는 모바일에서 자주 사용되는 여러 아이콘들이 미리 세팅되어 있습니다. 다운로드 사이즈를 최소화하기 위해 jQuery Mobile에는 single white icon sprite가 포함되 있습니다. 그리고 자동적으로 semi-transparent black circle 이 그 아이콘 뒤에 추가 되어 어떤 배경색에도 잘 눈에 띄도록 만들어 줍니다.

아이콘은 data-icon attribute를 anchor 에 추가 함으로서 추가될 수 있습니다. 예를 들면 아래와 같이 사용되는 것이죠.

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



이렇게 하면 아래와 같이 아이콘이 있는 버튼이 만들어 집니다.

data-mini="true" 를 사용하면 좀 더 compact 한 버튼을 만들 수 있습니다.

Icon set

아래에는 data-icon attribute에 추가할 수 있는 여러 아이콘들을 보여 줍니다.

Icon positioning

디폴트로 아이콘은 button text의 왼쪽에 보여 집니다.


icon 만 있는 버튼을 만들 수도 있습니다. 그러려면 data-iconpos attribute를 notext로 만들면 됩니다. 버튼 plugin 은 text를 보이지 않을겁니다.
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>



Mini & Inline

mini 와inline attributes 들은 좀 더 compact 한 버튼을 만들기 위해서 사용하시면 됩니다.

Custom Icons

custom icon을 사용하려면 myapp-email 같이 unique 한 이름을 가지는 data-icon  값을 명시하세요. 그러면 버튼 플러그인은 ui-icon- 이라는 prefixing을 data-icon 값에 붙여서 클래스를 generate 할 겁니다. 그러면 ui-icon-myapp-email 이 되는 거죠.

여러분은 ui-icon-myapp-email 클래스를 특정 아이콘 background source로 연결시켜준ㄴ 것을 스타일 쉬트의 CSS rule을 만들어서 사용하실 수 있습니다. 시각적인 일관성을 유지하기 위해 white icon 으로 18X18 픽셀짜리로 만들어서 PNG 로 만들어 주세요 transparency는 8로 만들어 주시구요.

이 예제에서는 그냥 심플하게 standalone icon image를 사용했는데요. icon sprite와 positioning을 사용해서 framework에서 사용하는 아이콘처럼 만드실 수도 있습니다.

.ui-icon-myapp-email {
	background-image: url("app-icon-email.png");
}

이러면 standard resolution icon 을 생성할 겁니다. 하지만 지금은 많은 device들에서 고해상도를 표현할 수 있습니다. iPhone 4의 retina display 같은 경우가 이에 해당 되죠. HD 아이콘을 추가하려면 36X36 픽셀로 만드세요. (18X18의 두배짜리로요). 그리고 -webkit-min-device-pixel-ratio: 2 media query 를 사용하는 second rule을 만드세요. 그리고 나서 HD icon file을 면시하시고 배경 사이즈를 18X18로 하시면 36픽셀 아이콘을 18 픽셀 공간으로 넣을 겁니다. 미디어 쿼리 블럭은 여러 아이콘 rule을 넣을 수 있습니다.

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.ui-icon-myapp-email {
		background-image: url("app-icon-email-highres.png");
		background-size: 18px 18px;
	}
	...more HD icon rules go here...
}
 

Icons and themes

하얀 아이콘 뒤에 있는 semi-transparent black circle은 어떤 배경색에도 눈에 잘 띄도록 해 주죠. 그래서 이렇게 하면 jQuery Mobile theming system에서도 아주 잘 어울립니다.

아래 themed buttons  들을 사용한 서로 다른 color swatch들위에 이 아이콘들이 어떻게 잘 어울리는지 보여주는 예제들이 있습니다.

ButtonIcons.html