아이콘 data-icon

게시자: 대문 demun 카테고리: 퍼블리셔/jQueryMobile 2011.12.28 06:00
jQuery Mobile 에서는 표준 아이콘을 22개를 지원합니다.
아이콘은 보통 버튼이나 리스트 컨트롤과 함께 사용하며 data-icon 속성을 이용해 특정 아이콘을 지정할 수 있습니다.
다음 코드는 버튼에 인쪽 화살표 아이콘을 적용하는 간단한 예입니다.
button

아이콘 위치.

버튼에 아이콘을 추가하면 아이콘은 기본적으로 왼쪽에 위치하게 됩니다. 이 위치를 변경하려면 data-iconpos 속성을 지정하면 됩니다.
아이콘 위치로 다음과 같이 4개의 값 중 하나를 선택할 수 있습니다.
icon 위치 : left(혹은 false, 기본 값), right, top, bottom
data-iconpos 의 적용 예.
button

data-iconpos 에 top,bottom,right,left 로 아이콘이 어느 위치에 있는지 지정할 수 있습니다.
다음의 네군데 모두의 예입니다.


현재 아이콘이 나와있는 버튼이 한 화면을 전부 차지하고 있습니다. 즉 블럭(block)이죠
이걸 인라인(inline)으로 하면 버튼 옆에 버튼이 놓이게 되며, 사이즈 또한 텍스트만큼 차지하게 됩니다.
아래 코드의 예와 이미지를 참고하세요.
button
button
button
button


또한 텍스트가 없이 아이콘만 적용하려면 data-iconpos="notext" 를 지정하면 아이콘만 나옵니다.
Delete

a,b,c 테마 그리고 아이콘 종류별 입니다.


아이콘은 다음과 같은 명명 규칙에 따라 CSS 클래스가 정의되어 있습니다.
또 이미지도 하나의 이미지로 통합하여 background-position 으로 아이콘의 위치를 지정해서 보여줍니다.
html 에서는 data-icon="plus" 식으로 지정하고 CSS 에서는 .ui-icon-plus 라고 클래스를 지정하고 설정하면 됩니다.
우선 다섯가지 테마(a~e) 모두 각각의 아이콘을 마크업하고 어떻게 보여지는지 예를 한번 보세요.
Theme a
Theme b
Theme c
Theme d
Theme e


그럼 CSS 설정은 아래처럼 백그라운드 포지션으로 설정합니다.

.ui-icon-plus {
    background-position:    -0 50%;
}
.ui-icon-minus {
    background-position:    -36px 50%;
}
.ui-icon-delete {
    background-position:    -72px 50%;
}
.ui-icon-arrow-r {
    background-position:    -108px 50%;
}
.ui-icon-arrow-l {
    background-position:    -144px 50%;
}

이 모든 설정은 jquery.mobile-1.0.css 에 모두 설정되어 있습니다. 물론 기본테마를 사용하게 되면 테마, 아이콘 모두 설정이 되어 있습니다.
신고

댓글