Ch 04. 애니메이션

4.1 jQTouch 활용하기 웹 페이지에 애니메이션 효과 구현하기 jQTouch 데이비드 카네다라는 청년이 만듦 모바일 웹 개발을 쉽게 해주는 자바스크립트 라이브러리 오픈소스 jQuery 플러그인

4.2 Home 패널 살펴보기 ‘kilo’라는 간단한 칼로리 추적 앱 사용자가 특정 일자에 섭취할 음식을 추가/삭제할 수 있는 앱 Home, Settings, Dates, Date, New Entry 다섯 가지 기능의 패널 추가

4.2 Home 패널 살펴보기 index.html 파일 생성 - Home과 About 패널을 만들기 위함

4.2 Home 패널 살펴보기 예제 4-1 분석 위의 HTML은 head, title, 두 자식이 들어있는 body로 구성 ➊ 이 div는 body에서 바로 나온 것이기 때문에 앱에서 패널이 됨 ➋ 각각의 패널 div 안에는 toolbar 클래스와 함께 div 존재 이 toolbar 클래스는 하나의 전통적인 모바일 폰 툴바처럼 구성요소를 스타 일하기 위해 jQTouch 테마에 상세히 사전 정의 ➌ 이 정돈되지 않은 리스트 태그는 edgetoedge 클래스를 가짐 edgetoedge 클래스는, jQTouch가 가시권 영역의 좌측에서 우측으로 목록 을 최대한 펼쳐놓을 수 있도록 보여줌 ➍ 이 줄 위에는 링크를 포함하는 (About 패널을 가리키는 href와 함께 ) li가 있습니다. li에 arrow 클래스를 포함시킬지 여부는 선택사항 목록 내 그 아이템의 우측에 V 표시 추가 ➎ 툴바 엘리먼트들은 각각 나중에 패널 제목이 될 h1 엘리먼트 포함 jQTouch가 그 버튼을 Back 버튼처럼 보이고 작동하도록 지시

4.2 Home 패널 살펴보기 jQTouch 추가 jQTouch를 내려받아 HTML 문서와 같은 디렉터리에 압축풀기 [예제 4-2]

4.2 Home 패널 살펴보기 [예제 4-2] 분석 ➊ 이 코드는 jqtouch.css 파일 포함 애니메이션과 액션 핸들링 그리고 안드로이드의 특성화된 세부사항 ➋ 이 코드는 선택된 테마에 대한 CSS 파일 지정 여기에서는 ‘jqt’ 테마를 선택했는데 이것은 jQTouch에서 지원 HTML에서 우리가 이용했던 클래스들은 이 문서의 CSS 셀렉터들과 일치 ➌ jQTouch는 jQuery를 필요로 하기 때문에 여기에 포함 JQTouch에는 jQuery(jquery.js로 이름을 바꿀 필요 있음)의 복제본 포함 ➍ jQTouch를 포함시키는 곳 jQuery 뒤에 jQTouch를 추가해야 동작

4.2 Home 패널 살펴보기 [예제 4-2] 분석 ➎ jQTouch 오브젝트를 초기화 jQTouch는 몇 가지 프로퍼티 제공 아이콘이라는 프로퍼티 값을 보내는 스크립트 블록 제공 jQTouch 오브젝트를 이니셜라이즈한 곳에 스크립트 블록을 가져와 property value 아이콘에 보내줌 jQTouch는 몇 가지 프로퍼티 제공 앱의 행동과 모습을 최적화 아이콘은 커스텀 홈 스크린 아이콘을 어디에서 찾는지 jQTouch에게 알려줌

4.2 Home 패널 살펴보기 jQTouch를 적용하기 전과 후의 비교

4.3 Dates 패널 추가 [그림 4-3] Dates 패널 - 상대적인 날짜 리스트 제공

4.3 Dates 패널 추가 [예제 4-3] About 패널 다음 </body>로 끝맺기 전에 Dates 패널을 위한 HTML 추가 Dates 패널에도 타이틀과 Back 버튼이 들어있는 툴바 존재 툴바 뒤에 정렬되지 않은 링크의 edgetoedge 리스트 모든 링크는 자신만의 ID를 갖고 있지만, 비트 안에 href(예를 들어 #date) 는 동일

4.3 Dates 패널 추가 Dates 패널의 링크를 포함한 Home 패널 업데이트 index.html 안의 Home 패널에 굵게 표기된 코드 추가

4.3 Dates 패널 추가 [그림 4-4] Dates 패널은 클릭해도 아무런 반응 없음

4.4 Date 패널 추가 예제 4-4] Dates 패널 뒤에서 </body>로 끝맺음 하기 전에 Date 패널을 위한 HTML 추가

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

4.4 Date 패널 추가 예제 4-4] 실행화면

4.5 New Entry 패널 추가 [예제 4-5] - New Entry 패널을 위한 소스 코드 </body>로 마무리하기 전에 index.html 뒤에 코드 추가

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

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

4.5 New Entry 패널 추가 [예제 4-5 실행 화면]

4.5 New Entry 패널 추가 [그림 4-7] New Entry 폼 실행화면 사용자가 ‘Save Entry’를 클릭했을 때 실제로 입력사항들 저장

4.6 Settings 패널 추가 Home 패널 툴바에 Setting 패널을 위한 버튼 추가하기 ➊ 버튼을 추가한 HTML 코드 [그림 4-8] 참조 링크에 flip 클래스 할당해 jQTouch에 수직 축에서 페이지를 회전시켜 Home 패널에서 Settings 패널로 전환하도록 지시 프로세스에 영역을 추가하면, 이 페이지는 애니메이션 도중에 페이지를 실제로 살짝 줌 아웃

4.6 Settings 패널 추가 Settings 패널을 위한 HTML 작업 [예제 4-6]과 거의 흡사

4.7 더 추가해볼 것들 [예제 4-7] - 최종 HTML 코드 예제

4.7 더 추가해볼 것들 [예제 4-7] - 최종 HTML 코드 예제 (2)

4.7 더 추가해볼 것들 [예제 4-7] - 최종 HTML 코드 예제 (3)

4.7 더 추가해볼 것들 [예제 4-7] - 최종 HTML 코드 예제 (4)

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

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

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