Index
3. jQuery Mobile 페이지를 구성하는 4가지 영역
4. jQuery Mobile 시작 HTML 파일과 다른 HTML 페이지간 호출
5. jQuery Mobile 의 단일 HTML 모델에 대한 이해
6. 페이지간 이동에 <a>태그 대신 jQuery Mobile에서 제공하는 $.mobile.changePage() 메소드 사용
jQuery Mobile 은 단일 HTML 모델 방식을 사용해서 네이티브 앱과 비슷한 애니메이션 효과를 줌으로써 페이지 이동이 자연스럽게 이루어지도록 한다.
단일 HTML 모델은 모든 웹앱 페이지를 DOM안에 통합한 모델이다. jQuery Mobile 에서 페이지의 이동은 물리적 HTML파일 간의 이동이 아니라 DOM 내부에서 페이지 객체 간의 이동을 의미한다. jQuery Mobile 에서 페이지는 <div data-role="page"> 로 표현한다.
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,
user-scalable=no" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div id="index" data-role="page">
<div data-role="header">
<h1>Index</h1>
</div>
<div data-role="content">
<a href="#home" data-role="button">Home</a>
</div>
</div>
<div id="home" data-role="page">
<div data-role="header">
<h1>Header</h1>
<a href="#" data-rel="back" data-icon="arrow-l">Prev</a>
</div>
<div data-role="content">
Home
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
하나의 HTML 페이지 안에서 여러개의 page를 정의할때는 각각의 페이지를 구분할 수 있는 id 값을 지정해야 한다. 위 index.html 소스에는 id가 "index", "home" 인 두개의 페이지가 존재한다. 예제는 index 페이지에서 home 페이지로 이동하고 다시 index 페이지로 돌아오는 것이다. jQuery Mobile 은 첫번째 정의된 page를 웹앱의 시작 페이지로 지정한다. 위 소스를 보면 id가 "index" 인 페이지가 웹앱의 시작 페이지가 된다.
이러한 코딩 방식은 간단한 형태의 웹앱을 표현할때는 문제가 없지만, 대부분의 웹앱은 많은 페이지와 각각의 페이지를 제어하는 javascript코드를 포함하게 된다. 이런경우, 초기 페이지 로딩속도가 길어지고 페이지가 복잡해 개발 및 디버깅에 어려움이 생길 수 있다. 이 것을 극복하는 방법은 각각의 페이지를 개별적인 HTML 파일로 분리해서 개발하는 방식이다.
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,
user-scalable=no" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div id="index" data-role="page">
<div data-role="header">
<h1>Index</h1>
</div>
<div data-role="content">
<a href="home.html" data-role="button">Home</a>
</div>
</div>
</body>
</html>
home.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div id="home" data-role="page">
<div data-role="header">
<h1>Header</h1>
<a href="#" data-rel="back" data-icon="arrow-l">Prev</a>
</div>
<div data-role="content">
Home
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
두개의 페이지가 물리적으로 두개의 HTML 파일로 분리가 되어도 페이지 호출 시, jQuery Mobile 은 외부 파일 링크를 ajax 통신으로 읽어들여서 DOM 객체에 포함시켜서 단일 HTML 모델로 만든다.
jQuery Mobile은 홈페이지에 다른 페이지를 모두 DOM 객체에 포함시키는 것이 아니라 현재 페이지만 포함시키고 새로운 페이지로 이동하면 현재 페이지를 DOM객체에서 제거하고 새로운 페이지를 포함시킨다. 홈페이지로 돌아가면 포함시켰던 페이지 객체를 모두 제거하고 최초 홈페이지에 있던 페이지 정보만 갖는다.
jQuery Mobile은 홈 페이지에서 다른 페이지를 호출할때 홈 페이지의 DOM 안에 포함시키기 때문에 각각의 페이지를 각각의 HTML 파일로 작성할 때 홈페이지를 제외한 나머지 페이지에는 뷰포트 설정, 바로가기 아이콘, jQuery Mobile 라이브러리 로딩 소스 등은 작성할 필요가 없다. 소스가 있다해도 페이지가 DOM 에 포함될 때 버려진다. 단, 문자셋을 정의하는 meta 태그는 포함시켜주어야 한글이 깨지지 않는다.
'프로그램 > jQuery Mobile' 카테고리의 다른 글
| 07. jQuery Mobile 에서 페이지 트랜지션 (0) | 2013.12.02 |
|---|---|
| 06. 페이지간 이동에 <a>태그 대신 jQuery Mobile에서 제공하는 $.mobile.changePage() 메소드 사용 (0) | 2013.12.01 |
| 04. jQuery Mobile 시작 HTML 파일과 다른 HTML 페이지간 호출 (2) | 2013.11.29 |
| 03. jQuery Mobile 페이지를 구성하는 4가지 영역 (0) | 2013.11.28 |
| 02. jQuery Mobile 웹앱 파일의 기본 구조 (0) | 2013.11.27 |
