Ch 04. 애니메이션 20126696 송재철.

Presentation on theme: "Ch 04. 애니메이션 20126696 송재철."— Presentation transcript:

1 Ch 04. 애니메이션 송재철

2 jQTouch 활용하기 웹 페이지에 애니메이션 효과 구현하기 모바일 웹 개발을 쉽게 해주는 자바스크립트 라이브러리
오픈소스 jQuery 플러그인 Jqtouch.com에서 다운 Jqtouch / themes : css, script, img

3 jQTouch 활성화 코드 삽입 <link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css"> 애니메이션 정의 <link type="text/css" rel="stylesheet" media="screen" href="themes/jqt/theme.css"> 기본 스타일 정의 <script type="text/javascript" src="jqtouch/jquery.js"></script> <script type="text/javascript" src="jqtouch/jqtouch.js"></script> 스크립트 파일, 순서에 주의 <script type="text/javascript"> var jQT = $.jQTouch({ icon: 'kilo.png' }); </script> jQTouch 초기화, 홈 스크린 아이콘 지정

4 패널 살펴보기 ‘kilo’라는 간단한 칼로리 추적 앱 사용자가 특정 일자에 섭취할 음식을 추가/삭제할 수 있는 앱
Home, Settings, Dates, Date, New Entry 다섯 가지 기능의 패널 추가 jQtouch에 이미 정의되어 있는 클래스를 이용하여 html로 구조화 Toolbar, edgetoedge, arrow, button, back 등

5 jQtouch 클래스 toolbar button egdetoegde arrow

6 home 패널 <div id="home"> <div class="toolbar”> <h1>Kilo</h1> <a class="button flip" href="#settings">Settings</a> </div> <ul class="edgetoedge” > <li class="arrow" ><a href="#dates">Dates</a></li> <li class="arrow"><a href="#about">About</a></li> </ul>

7 About 패널 <div id="about"> <div class="toolbar"> <h1>About</h1> <a class="button back" href="#">Back</a> </div> <div> <p>Kilo gives you easy access to your food diary.</p>

8 dates 패널 <div id="dates"> <div class="toolbar"> <h1>Dates</h1> <a class="button back" href="#">Back</a> </div> <ul class="edgetoedge"> <li class="arrow"> <a id="0" href="#date">Today</a></li> <li class="arrow"> <a id="1" href="#date">Yesterday</a></li> <li class="arrow"> <a id="2" href="#date">2 Days Ago</a></li> <li class="arrow"> <a id="3" href="#date">3 Days Ago</a></li> <li class="arrow"> <a id="4" href="#date">4 Days Ago</a></li> <li class="arrow"> <a id="5" href="#date">5 Days Ago</a></li> </ul>

9 date 패널 <div id="date"> <div class="toolbar"> <h1>Date</h1> <a class="button back" href="#">Back</a> <a class="button slideup" href="#createEntry">+</a> </div> <ul class="edgetoedge"> <li id="entryTemplate" class="entry" style="display:none"> <span class="label"> Label</span> <span class="calories"> 000</span> <span class="delete"> Delete</span> </li> </ul>

10 4.4 Date 패널 추가 예제 4-4] ➊ Date 패널 툴바의 버튼을 클릭하면 New Entry 패널 표시
slideup 클래스 지정 대상 패널을 일반 네비게이션 같은 가로 방향의 이동이 아니라 화면 하단에서 위로 이동시키라고 jQTouch에게 명령 ➋ display:none을 지정해 리스트 아이템이 안 보이도록 정의 가능 조금만 보이도록 하려면, 템플릿으로 인비저블 리스트 아이템 이용 가능 현 시점에서는 아무 항목도 없으므로, 그 패널은 툴바에서 비어 있음

11 New entry 패널 <div id="createEntry"> <div class="toolbar"> <h1>New Entry</h1> <a class="button cancel" href="#">Cancel</a> </div> <form method="post"> <ul class="rounded"> <li><input type="text" placeholder="Food" name="food" id="food" autocapitalize="off" autocorrect="off" autocomplete="off" /></li> <li><input type="text" placeholder="Calories" name="calories" id="calories" autocapitalize="off" autocorrect="off" autocomplete="off" /></li> <li><input type="submit" class="submit" name="action" value="Save Entry" /></li> </ul> </form>

12 4.5 New Entry 패널 추가 [예제 4-5] 설명 ➊ New Entry 패널의 가장 중요한 특징 - Cancel 버튼을 갖고 있음 ➋ 세 가지 아이템의 정렬되지 않은 리스트를 포함한 HTML. 두 텍스트 필드와 클릭할 버튼으로 구성 li에 삽입된 폼 컨트롤은 [그림 4-6]과 같은 스타일의 폼에 jqt 테마 허용 type="text" : 단일 줄의 텍스트 항목 필드가 되기 위한 폼 컨트롤을 정의 placeholder : 입력이 빈 상태일 때 폼 입력란에 문자열 형태를 보여줌 name : 폼이 전송될 때 사용자가 전송한 값과 관련됨 id : 완전한 페이지의 상황정보context 안에서 엘리먼트를 위한 단일 구별자 autocapitalize : 아이폰의 ‘모바일 사파리’에서 대문자를 사용하도록 해줌. 안드로이드에서는 효과 없음 autocorrect : 아이폰 ‘모바일 사파리’에서 스펠링이 맞는지 확인할 수 있도 록 해줌. 안드로이드에서는 효과 없음 autocomplete : 아이폰 ‘모바일 사파리’에서 완성된 문자인지 확인할 수 있도록 해줌. 안드로이드에서는 효과 없음

13 4.5 New Entry 패널 추가 [예제 4-5] 설명 (2) ➌ ‘submit input’ 버튼의 class 속성
안드로이드폰은 사용자 커서가 필드에 있으면 키보드 표시 키보드는 오른쪽 바닥 모서리에 Go 버튼을 클릭하면 폼을 전송 submit 함수를 하이잭할 때, 키보드의 Go 버튼으로는 액티브 필드로부터 커서를 제거하지 못함 키보드는 뷰 밖으로 슬라이드되지 못하는 단점 jQTouch는 폼이 제출될 때 현재 필드로부터 자동적으로 커서 제거 폼의 submit 엘리먼트에 submit 클래스 추가

14 Setting 패널 <div id="settings"> <div class="toolbar"> <h1>Settings</h1> <a class="button cancel" href="#">Cancel</a> </div> <form method="post"> <ul class="rounded"> <li><input placeholder="Age" type="text" name="age" id="age" /></li> <li><input placeholder="Weight" type="text" name="weight" id="weight" /></li> <li><input placeholder="Budget" type="text" name="budget" id="budget" /></li> <li><input type="submit" class="submit" name="waction" value="Save Changes" /></li> </ul> </form>

15 4.8 jQTouch 최적화 jQTouch의 기본 동작 양식 다양한 속성 설정을 통해 조정

16 4.8 jQTouch 최적화 jQTouch의 기본 동작 양식 (2)

17 4.8 jQTouch 최적화 jQTouch의 기본 동작 양식 (3)

18