Index
3. jQuery Mobile 페이지를 구성하는 4가지 영역
4. jQuery Mobile 시작 HTML 파일과 다른 HTML 페이지간 호출
5. jQuery Mobile 의 단일 HTML 모델에 대한 이해
6. 페이지간 이동에 <a>태그 대신 jQuery Mobile에서 제공하는 $.mobile.changePage() 메소드 사용
jQuery Mobile 은 시작 HTML 페이지에서 다른 HTML 페이지를 호출하면 호출된 페이지의 내용이 시작 HTML 에 자동으로 통합된다. 따라서, 뷰포트 설정, 바로가기 아이콘 설정, jQuery Mobile 라이브러리 로딩 설정은 시작 HTML 페이지에서만 작성하면 된다. 단, 이것이 가능하기 위해서는 다른 페이지를 호출할 때 <a> 태그를 이용해서 호출해야 한다.
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 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 data-role="page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
Home
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
javascript 코드 상에서 페이지 이동을 할 경우에는 $.mobile.changePge() 메소드를 이용한다.
'프로그램 > jQuery Mobile' 카테고리의 다른 글
| 06. 페이지간 이동에 <a>태그 대신 jQuery Mobile에서 제공하는 $.mobile.changePage() 메소드 사용 (0) | 2013.12.01 |
|---|---|
| 05. jQuery Mobile 의 단일 HTML 모델에 대한 이해 (0) | 2013.11.30 |
| 03. jQuery Mobile 페이지를 구성하는 4가지 영역 (0) | 2013.11.28 |
| 02. jQuery Mobile 웹앱 파일의 기본 구조 (0) | 2013.11.27 |
| 01. jQuery Mobile ? (0) | 2013.11.23 |
