jquery mobile 의 버튼 스타일

jquery mobile 에는 jquery.mobile.css 가 자동으로 포함되어 다섯가지 테마를 제공하고 버튼이나 아이콘도 포함되어 모바일에서 보기좋게 설정을 알아서 해줍니다.

따로 스타일을 설정하지 않아도 다 알아서 해주죠.
그중에 아이콘과 버튼의 스타일이 맘에 들어서 가지고 와서 조금 만쳐봤습니다.
현재 jqm홈페이지에서는 1.0을 배포하고 있습니다. zip파일로 제공하는데요.
거기에 이미지와 css 관련 자료는 다 있습니다.
jquery mobile 의 버튼은 a, b, c, d, e 이렇게 다섯가지를 기본으로 제공합니다.


그중에서 맘에 드는것은 바로 아이콘입니다. 하나의 이미지의 png 파일을 backgrpund-position 을 이용해서 배치를 합니다.
요넘을 블로그에서 어떻게 사용해볼까하고 만지작거렸지요.
기본의 모바일 화면이 아니니 똑같이 할 필요는 없을거 같구요. jqm 은 자바스크립트를 사용해서 span을 자동으로 삽입합니다.
블로그에서는 그렇게까지 할 필요도 없거니와 마크업을 좀더 단순화해서 사용해볼까 해서 수정해봤습니다.



모든 자료는 아래에서 다운로드 할 수 있습니다.

jqm-button.zip


참고로 티스토리나 다른곳에 업로드해서 사용하실때는 아래의 css 를 사용하세요. 압축된겁니다.
위의 압축파일에는 압축되지 않은 css 파일이고 아래는 압축되어 용량을 줄인것이니 사용할때는 아래의 css 파일을 사용하세요.

icon.css


여기에는 html , css, 그리고 icons-18-white.png 파일 한개가 있습니다.
html 마크업은 이렇습니다.
<!-- 예제 -->
<a href="#" class="button black"><span class="icon-plus"></span>icon-plus</a>
<a href="#" class="button black"><span class="icon-minus"></span>icon-minus</a>	
<a href="#" class="button black"><span class="icon-delete"></span>icon-delete</a>
<a href="#" class="button black"><span class="icon-arrow-r"></span>icon-arrow-r</a>
<a href="#" class="button black"><span class="icon-arrow-l"></span>icon-arrow-l</a>

<!-- 설명 -->
<a href="#" class="button 색상"><span class="아이콘모양"></span>icon-plus</a>

jqm처럼 a, b.... 등등으로 나누면 뭐가 뭔지 모르기때문에 black, blue 이런식으로 나눴습니다.
그리고 span의 클래스에 원하는 모양을 적으면 됩니다.

티스토리에서 사용할때는 어떻게 하면 되나요??
압축파일에 있는 이미지파일인 icons-18-white.png 와 icon.css 를 스킨 편집에서 업로드 합니다.
그런다음 head 사이에 css 파일을 링크합니다.
<head>
.....	
<link href="./images/style.css" rel="stylesheet" type="text/css" media="screen" />
.....
</head>

그런다음 본문에서 글쓰기 할때 html 에 체크하고 아래처럼 사용하면 됩니다.
<!-- black -->
<a href="#" class="button black"><span class="icon-plus"></span>icon-plus</a>
<a href="#" class="button black"><span class="icon-minus"></span>icon-minus</a>	

<!-- blue -->
<a href="#" class="button blue"><span class="icon-plus"></span>icon-plus</a>
<a href="#" class="button blue"><span class="icon-minus"></span>icon-minus</a>

<!-- 설명 -->
<a href="#" class="button 색상"><span class="아이콘모양"></span>icon-plus</a>

전체적으로 작성한것을 스샷을 찍었으니 참고해보세요.

버튼 전체 스샷 보기


참고로 jqm은 html5로 마크업 되었습니다. 그래서 IE8이하는 지원을 안합니다.
그래서 하위 익스플로러 브라우져가 지원하도록 필터를 적용해서 그라데이션은 지원됩니다만 둥근코너는 지원되지 않고 아이콘 이미지가 깨집니다.
웹표준을 준수하는 브라우져에서는 정상적으로 잘 보입니다.

개    개