모바일 웹과 웹앱을 위한 jQuery Mobile

1장 스마트 디자인을 위한 jQuery Mobile

1.1 하이브리드를 완벽하게 실현한 jQuery Mobile
1.2 하이브리드의 정의
1.3 웹앱의 정의
1.4 미완성작 웹앱 솔루션
1.5 완성된 웹앱 솔루션 조합

2장 네이티브 앱 개발환경 구축

2.1 안드로이드용 개발환경 요약
2.2 아이폰용 개발환경 요약
2.3 원도우폰 개발환경 요약
2.2 네이티브 브릿지 폰갭(PhoneGap) 다운로드
2.3 스마트 디자인 jQuery Mobile 다운로드

3장 웹앱과 jQuery Mobile의 연동

3.1 안드로이드용 웹앱 프로젝트
이클립스 폰갭 플러그인 설치
폰갭 프로젝트 생성
jQuery Mobile 라이브러리 포함 옵션
안드로이드 프로젝트 이름 정의
안드로이드 프로젝트 SDK 버전 정의
안드로이드 프로젝트 패키지 이름 정의
안드로이드 jQuery 폰갭 프로젝트 생성 완료
이클립스 설정 : workspace 기본 인코딩 설정
이클립스 설정 : 웹 개발 플러그인 "앱타나(Aptana)" 설치
이클립스 설정 : 웹 표준 코딩을 위한 Validation 설정
이클립스 설정 : 웹 편집기 테마 설정
jQuery Mobile 라이브러리 호출 사례
HTML 구성을 한눈에 보는 이클립스 "Outline" 창
가상기기 준비하기 : SDK 4.0.X 아이스크림 샌드위치 버전
안드로이드 프로젝트 실행 환경 설정
가상기기 실행하기 : SDK 4.0.X 아이스크림 샌드위치 버전
가상기기에서 jQuery Mobile 폰갭 데모 앱 실험하기
안드로이드 실물 단말기에서 실험하기
안드로이드 SDK 버전 변경 : 구 버전으로 다운그레이드
실물 단말기에서 jQuery Mobile 폰갭 데모 앱 실험하기
DDMS의 실물 단말기 화면 캡처
실물 단말기 폰갭 데모 : 로컬 데이터베이스(Storage)
실물 단말기 폰갭 데모 : 연락처(Contacts)
실물 단말기 폰갭 데모 : GPS 위치 감지 센서(Geolocation)
실물 단말기 폰갭 데모 : 대화상자(Notification)
실물 단말기 폰갭 데모 : 방위 센서(Compass)

3.2 아이폰용 웹앱 프로젝트
Xcode 폰갭 플러그인 설치
폰갭 프로젝트 생성
프로젝트에 www 폴더 추가
웹 통신을 위한 화이트리스트 등록 : PhoneGap.plist
웹앱 소스 등록 : jQuery Mobile 폰갭 데모 소스
가상기기에서 실험하기

3.3 윈도우폰용 웹앱 프로젝트
Visual Studio 폰갭 템플릿 설치
폰갭 프로젝트 생성
가상기기에서 실험하기
웹앱 소스 등록 : jQuery Mobile 폰갭 데모 소스
신규 소스의 Content 설정
Viewport 교정

4장 jQuery Mobile의 기초

4.1 jQuery Mobile의 기본 구조
프레임웍의 주요 파일들
아이콘 라이브러리의 작동 원리

4.2 jQuery Mobile의 디자인 솔루션 둘러보기
jQuery Mobile을 지원하는 플랫폼
개발용 HTML5 웹브라우저
jQuery Mobile 공식 매뉴얼 및 데모 보기

4.3 jQuery Mobile의 특징

5장 스마트 페이지의 기본 구성

5.1 스마트 페이지의 기본 형식
5.2 뷰포트 설정
5.3 jQuery Mobile 프레임웍 호출

6장 상단 툴바 : 머리말 영역

6.1 기본형 머리말 영역
6.2 머리말 영역의 버튼 주무르기
머리말 영역 버튼 1개일 때와 꼬리말 영역의 하단 고정
머리말 버튼 아이콘
머리말 영역과 버튼에 별도 테마 설정
1개의 머리말 버튼 오른쪽 배치
2개의 머리말 버튼 양쪽 끝 배치와 버튼 아이콘만 출력
백 버튼 링크 처리
머리말 영역의 내비게이션 바

7장 하단 툴바 : 꼬리말 영역

7.1 꼬리말 영역 기본형
7.2 꼬리말 영역의 버튼들
꼬리말 일반 버튼
꼬리말 그룹 버튼
7.3 꼬리말 영역의 내비게이션 바
7.4 페이지 풀 스크린과 꼬리말 숨김
7.5 꼬리말 영역의 선택 메뉴와 화면 전환 효과

8장 스마트 페이지 레이아웃

8.1 싱글형 페이지
8.2 멀티형 페이지
8.3 자동 분할형 페이지 : splitview 플러그인
웹브라우저 실험
아이폰 실험
아이패드 실험
안드로이드폰 실험
jQuery Mobile Splitview 플러그인 다운로드
소스 분석


9장 스마트 페이지 링크 처리법

9.1 Ajax 링크 방식
앵커(Anchor) 링크 방식
로컬 HTML 파일 링크
대화상자 앵커 링크 방식
대화상자 파일 링크 방식

9.2 풀 페이지(Full-Page) 링크 방식 : Ajax 사용하지 않음
외부 도메인 링크
외부 HTML 파일 링크
target 링크
return false 링크

9.3 외부 프로그램 링크
이메일 링크
전화번호 링크
SMS 문자 링크
지도 링크

9.4 백(Back) 버튼 링크
9.5 샘플 소스 분석

10장 data-url의 기능과 특성의 이해

10.1 페이지 아이디가 있는 경우
10.2 페이지 아이디가 없는 경우
10.3 data-url 속성을 폴더로 정의하는 경우
10.4 data-url 속성을 페이지로 정의하는 경우
10.5 웹앱에서의 실험
안드로이드 실험
아이폰 실험

11장 화면 전환 애니메이션

11.1 기본 화면 전환 효과
화면 전환 효과 사용안함 : none
슬라이드 : slide
슬라이드업 : slideup
슬라이드다운 : slidedown
팝 : pop
페이드 : fade
플립 : flip250
턴 : turn 251
플로우 : flow 253

11.2 화면 전환 효과 역순
11.3 개발자 정의 화면 전환 효과
기본 화면 전환 효과
기본 대화상자 전환 효과
CSS형 화면 전환 효과

11.4 전체 소스 살펴보기
11.5 웹앱에서의 특성
아이폰 실험
안드로이드 실험

12장 스마트 대화상자

12.1 기본 대화상자
12.2 대화상자 전환 효과
12.3 대화상자 테마 적용
12.4 대화상자 오버레이 테마

12.5 마법사형 대화상자
마법사 작성 원리
마법사 실행 실험

12.6 선택형 대화상자
12.7 전체 소스 살펴보기
12.8 웹앱에서의 특성
안드로이드 실험
아이폰 실험

13장 스마트 버튼

13.1 버튼 속성
13.2 버튼 기본 아이콘
13.3 버튼 아이콘의 위치
13.4 기본 버튼 아이콘 : 아이콘만 출력과 그룹 버튼
13.5 나만의 버튼 아이콘
13.6 버튼 모양 비교
13.7 목록 버튼과 기본 활성 설정
13.8 폼 버튼
13.9 버튼과 자바스크립트
13.10 전체 소스 살펴보기
13.11 웹앱에서의 특성
안드로이드 실험
아이패드 실험

14장 스마트 콘텐트 레이아웃

14.1 HTML 기본 마크업 스타일
헤드 태그 스타일 : 「h」
「a」, 「p」, 「pre」, 「span」, 「div」 태그 스타일
목록형 태그 스타일
테이블형 태그 스타일
샘플 소스 살펴보기

14.2 그리드 레이아웃
「div」 그리드
「fieldset」 그리드
다행 그리드 + height
다양한 그리드 조합 + ui-bar 스타일
그리드 안의 그리드 상속
꼬리말에 그리드 활용
샘플 소스 살펴보기

14.3 접펼식 레이아웃 : Collapsible
접펼식 기본형
기본 펼침 설정
아이콘 위치 설정
테마 설정 : 머리만
테마 설정 : 머리와 내용 모두
테마 설정 : 머리와 내용을 달리 설정
계층형 접펼식
아코디언 레이아웃
샘플 소스 살펴보기

14.4 바디 테마
바디 테마 설정
바디 테마 설정 사례
샘플 소스 살펴보기


15장 스마트 폼

15.1 스마트 폼의 기본 형식
기본형, 미니형, 네이티브형 폼의 기본 형식
라벨 숨기기
그리드 버튼 그룹
컨트롤 그룹
폼 객체 비활성화
샘플 소스 살펴보기

15.2 스마트 폼 객체들
스마트 입력상자
스마트 체크박스
스마트 라디오 버튼
특수 입력상자 : 검색어(search), 레인지(range)

15.3 스마트 선택상자
기본형 선택 옵션
스마트형 선택 옵션
플레이스홀더(placeholder) 선택 옵션
그룹형 선택 옵션
선택상자 그룹 컨트롤과 테마 적용
특수 선택상자 : 슬라이더(slider)
샘플 소스 살펴보기

16장 스마트 리스트

16.1 기본형 목록
16.2 번호 목록
16.3 계층형 목록과 읽기전용 아이템
16.4 구분자 목록
16.5 건수 표시

16.6 목록 테마와 아이템 아이콘
목록 구분자, 목록 아이템, 목록 건수 테마
목록 아이템 테마
링크 아이템과 읽기전용 아이템의 스타일 비교
목록 아이템의 링크 아이콘 변경
목록 아이템 아이콘 링크 분리

16.7 섬네일과 아이콘 이미지
16.8 다양한 목록 아이템 포맷
16.9 검색 필터바
16.10 샘플 소스 살펴보기

17장 테마롤러와 디자인 빌더

17.1 테마롤러(ThemeRoller)
jQuery Mobile 테마롤러

17.2 나만의 테마 만들기
기존 테마 가져오기
기본 테마 미리보기
신규 테마 추가하기
나만의 테마 다운받기
나만의 테마 샘플 소스 실험하기

17.3 스마트 디자인 빌더 codiqa
jQuery Mobile을 위한 UI 빌더 codiqa
17.4 codiqa로 디자인하기
머리말 영역과 꼬리말 영역 추가하기
꼬리말 영역에 내비게이션 바 추가하기
머리말 영역에 백 버튼 추가하기
내용 영역에 문자열 추가하기
내용 영역에 이미지 추가하기
내용 영역에 접펼식 목록 추가하기
내용 영역에 그리드 추가하기
내용 영역에 리스트뷰 추가하기
내용 영역에 폼 객체 추가하기
HTML 소스 다운받고 실험하기

18장 jQuery Mobile의 기본 환경 설정

18.1 mobileinit 이벤트
18.2 기본 환경 설정 옵션들

19장 jQuery Mobile 이벤트 작성법

19.1 bind() 메소드
19.2 live() 메소드
19.3 bind()와 live(), delegate(), on() 메소드의 통합성
19.4 on()과 off() 메소드
19.5 페이지 이벤트들

19.6 페이지 로드 이벤트
pagebeforeload 이벤트
pageload 이벤트
pageloadfailed 이벤트

19.7 페이지 변경 이벤트
pagebeforechange 이벤트
pagechange 이벤트
pagechangefailed 이벤트

19.8 페이지 전환 이벤트
pagebeforehide 이벤트
pagehide 이벤트
pagebeforeshow 이벤트
pageshow 이벤트

19.9 페이지 초기화 이벤트
pagebeforecreate 이벤트
pagecreate 이벤트
pageinit 이벤트

19.10 페이지 비활성 이벤트
pageremove 이벤트

20장 $.mobile 객체

20.1 페이지 관련 메소드와 속성
$.mobile.changePage() 메소드
$.mobile.loadPage() 메소드
$.mobile.showPageLoadingMsg() 메소드
$.mobile.hidePageLoadingMsg() 메소드
$.mobile.activePage 속성

20.2 고정 툴바 관련 메소드
$.mobile.fixedToolbars.show() 메소드
$.mobile.fixedToolbars.hide() 메소드

20.3 경로 관련 메소드
$.mobile.path.parseUrl() 메소드
$.mobile.path.makePathAbsolute() 메소드
$.mobile.path.makeUrlAbsolute() 메소드
$.mobile.path.isSameDomain() 메소드
$.mobile.path.isRelativeUrl() 메소드
$.mobile.path.isAbsoluteUrl() 메소드
$.mobile.base 속성

20.4 스크롤 관련 메소드
$.mobile.silentScroll() 메소드