티스토리 뷰

모바일/모바일웹

jQuery Mobile에서 iOS 탭바 스타일 구현

공허공자 2012. 3. 15. 18:11

영어 가능하신 분들을 위한 원문 = http://www.stokkers.mobi/valuables/bartender.html

원작자의 Github에서 소스를 다운받고
작업할 디렉토리에 압축 해제해 주세요.


1. 아이콘 작업

다소의 포토샵 스킬이 필요합니다.

작업 전에 sprite_combined.png 파일을 잘 보십시오.

다운받은 소스의 압축을 풀어보면
templates 디렉토리가 있습니다.

그 아래에 탭바의 재료가 되는 포토샵(*.PSD) 파일이 존재하는데
templates_double.psd 를 포토샵으로 열고
가이드를 보이게(Ctrl + ;) 하면 원작자가 새겨놓은 가이드가 보일겁니다.

위에서 잘 보라고 해 두었던 sprite_combined.png 파일을 보면
아이콘이 위, 아래로 있습니다.

위 = sprite_lo-res.png 에서 보여지는 작은 아이콘 30 x 30 (px)
아래 = sprite_hi-res.png 에서 보여지는 큰 아이콘 60 x 60 (px)

위와 같이 알고 진행 하면 됩니다.
* 아이콘 수를 가이드 이상 넣고픈 경우 원작자의 CSS를 삽질해야 합니다.

이제, 각 가이드의 사각형 안에
적절한 크기로 아이콘들을 배치합니다.

제 경우는 원본 복사한 작업파일을 가지고 작업하였고
처음 나타나는 4개의 레이어를 병합(Ctrl + E) 하였습니다.
병합한 레이어를 '탭바'라고 합시다.

탭바를 선택한 상태에서
Ctrl 키를 누른 상태에서
아이콘들 레이어 이름 말고 프리뷰 썸네일들을 하나씩 클릭,클릭,...
후에 아이콘들이 모두 선택 상태로 되었다면
Delete 키를 눌러 탭바에서 아이콘 모양들을 빼 줍니다.

Save For Web (Ctrl + Alt + Shift + S) 를 눌러 투명화가 들어간 png 이미지 파일로 저장합니다.

이제 저/고화질용 탭바를 두개 나누어 만듭시다.
sprite_lo-res.png = 300 x 44 (px)
sprite_hi-res.png = 300 x 88 (px)
를 만들어야 합니다.

위 크기만큼 Slice 툴로 잘 나누고
이것도 Save For Web 합니다.
결과물은 투명화가 들어간 png 이미지만 2개 만들어 내면 됩니다.

아이콘 작업은 끝났습니다.


2. CSS 작업

apple.css 파일을 만들고 HTML 파일의 <head>부분에 import 해 둡니다.

원작자 소스중 bartender.css 내용을 보면
/* Bartender CSS-plugin, Version: 1.0
으로 시작하는 주석 부분이 있는데
그 부분부터 끝까지 apple.css에 복사하여 넣습니다.

[data-icon="xxxx"]
라고 되어 있는 부분을 봅시다.
몇줄이 연속되어 나올것입니다.

처음 줄이 처음 아이콘를 보여주게 하는 CSS입니다.
그 다음 줄은 두번째 아이콘을 보여주게 하는 CSS입니다.
그 다음 줄은 두번째 아이콘을 보여주게 하는 CSS입니다. 
......
위와같은 공식이라는것을 알아두시고

xxxx 되어 있는 부분을
제 경우 tab1, tab2, tab3 등과 같이 알아보기쉽게 고쳤습니다.
(텍스트 에디터의 찾아서 전체 바꾸기 기능을 활용하였습니다.)

xxxx 부분은 HTML 탭바 정의 부분에서 data-icon=" xxxx" 속성에 매칭 됩니다. 


3. HTML 작업

기본적인 하단 탭바는

아래와 같이 추가/변경 해주면 됩니다.

끝났습니다. HTML 페이지를 로딩해 봅시다.


저작자표시 변경금지

'모바일 > 모바일웹' 카테고리의 다른 글

jQueryMobile, SenchaTouch2 웹 Android에서 깜박거리는 문제 해결  (0) 2012.05.10
jQueryMobile + Phonegap 1.7  (0) 2012.05.08
[Sencha Touch2] 오류 Ext.createByAlias Cannot create an instance of unrecognized alias  (0) 2012.03.06
[Sencha Touch2] adding 'xxx' explicitly as a require of the corresponding class  (0) 2012.03.04
[Sencha Touch2] list disclosure 아이콘 둥근화살표 대신 아이폰 같은 꺽쇠로  (0) 2012.02.29
공유하기 링크
댓글