jQuery Mobile 사용자테마와 다른 테마

게시자: 대문 demun 카테고리: 퍼블리셔/jQueryMobile 2011.12.26 06:00
jQuery Mobile 은 기본적으로 5가지 테마를 제공합니다. 그런데 추가적으로 사용자테마를 만들수 있습니다.
현재 홈페이지에서 제공하고 있는 정식버젼인 1.0 파일에 css 파일에 보면 /* A */, /* B */ 형식으로 5가지의 테마를 제공합니다.
만약 새로운 테마 즉 F 라는 테마를 만들려면 기존의 Swatch 중 하나를 복사해서 CSS 셀렉터 이름을 새로운 Swatch 문자(여기서는 F) 로 수정하고 색상과 효과를 다르게 구현하면 됩니다.
예를들면 다음과 같습니다.
.ui-bar-f { /* 셀렉터 이름의 끝을 새로운 Swatch 문자로 수정 */
	border:1px solid #555; /* 새로운 색상 #555 를 지정함 */
	....
}

CSS 파일을 이렇게 수정한후에는 마찬가지로 html을 지정할때도 새로운 선택자를 이용해야 합니다.
즉 아래와 같이 써주면 됩니다.
<!-- 기본테마 Swatch 'e'적용 -->
<a href="#" data-role="button" data-theme="e">button</a>			
<!-- 사용자정의 테마 Swatch 'f' 적용 -->
<a href="#" data-role="button" data-theme="f">button</a>

이런식으로 새로운 사용자 테마를 만들고 적용해 봤습니다.
정식버젼이 나오기전에 테마들이 있었는데 테마롤러가 나오면서 기존의 테마는 없어진듯 합니다.
jquerymobile.com/blog 에 보면 이제까지 개발한 버젼과 테마등을 볼 수 있습니다. 

추가적으로 Swatch 를 만드는것도 이제는 따로 색상을 지정하거나 하지 않아도 보면서 만들수 있습니다.
바로 테마롤러(QuickSwatch bar)를 사용하면 되지요.

jQuery Mobile 사용자테마 1

 
 
jQuery Mobile 에서 추천하는 다른 사이트로 참고할 수 있습니다.

jQuery Mobile 사용자테마 2

 
또한 다른 플러그인도 존재하니 구경해보시 적용하는것도 좋을것 입니다.
 

jQuery Mobile 사용자테마 3

 
신고

댓글