4. 애니메이션 4.1 JQTouch 활용 jQuery 기반의 모바일 웹 프레임워크

4. 애니메이션 • 4.1 JQTouch 활용 • jQuery 기반의 모바일 웹 프레임워크 • jQTouch is an Open SourceJQuery plugin with native animations, automatic navigation, and themes for mobile WebKit browsers like iPhone , G1 ( Android ), and Palm Pre. • It enables programmers to develop mobile applications with a native look and feel for the target device using HTML , CSS , and JavaScript. 4.2 Home 패널 • ‘kilo’라는 간단한 칼로리 추적 앱: 5개의 패널(Home, Settings, Dates, Date, New Entry)로 구성 • Home과 About 패널을 위한 index.html Web App (4. Animation)

툴바: 윈도나 웹브라우저 따위의 응용프로그램가운데사용자가 자주사용하는명령어들을 따로모아아이콘모양으로 만들어놓은 것 (CSS 클래스, jQTouch 테마). 해당 박스모델의 가로/세로 면적이 width+padding+border 였던 기존의 계산 content-box을 바꾸어 width(padding+border)으로 계산하게 하는 속성 = border-box Web App (4. Animation)

edgetoedge 클래스: 가시권 영역의 좌측에서 우측으로 목록을 최대한 펼쳐 놓는다. • jQTouch를 활성화해 줄 head를 추가한 html Web App (4. Animation)

4.3 Dates 패널 추가 • 오늘부터 5일전까지 상대적 날짜 리스트를 가지는 Dates 패널 추가 Web App (4. Animation)

4.4 Date 패널 추가 • Date 패널을 위한 html Web App (4. Animation)

jQuery slideup 클래스 예제 화면에 보이지 않는 요소들을 찾아주는 선택자. 요소들은 몇 가지 원인에 의해 숨겨져 있게 됩니다. ◎ CSS display 속성값이 none 일때 ◎ form 요소 중에 type='hidden' 일때 ◎ 요소의 width 와 height 가 0 일때 ◎ 부모 요소가 보이지 않거나 숨겨져 있을 때 Web App (4. Animation)

4.5 New Entry 패널 추가 • POST 전송은 웹 페이지의 폼(form) 양식을 서버로 전송하는 규칙인데, jQTouch 에서는 POST전송을 내부적으로 Ajax 호출로 처리한다. 그리고 POST 처리 결과를 받아서 자동으로 페이지요소를 생성, id를 부여하여 자연스럽게 jQTouch 화면으로 구성해 준다. Bind an event handler to the "submit" JavaScript event, or trigger that event on an element. submitHandler function (jqouch.js)가 실행. showPageByHref()로 AJAX를 통해 페이지 조각을 로드하고 다음 슬라이드를 수행해야 한다. Web App (4. Animation)

4.6 Settings 패널 추가 • 최종적인 html 코드 Web App (4. Animation)

Web App (4. Animation)

4. 애니메이션 4.1 JQTouch 활용 jQuery 기반의 모바일 웹 프레임워크