■ jQuery Mobile의 페이지 이동
jQuery Mobile은 a 태그를 눌러 이동할 대상 페이지를 다음과 같이 세가지로 구분한다.
01. 페이지 이동을 위한 첫번째 메인 페이지를 만드록 jQuery Mobile을 사용하기 위한 구성요소를 추가한 페이지를 만든다.
content 내부의 첫 번째 링크는 외부 페이지로 링크하는 것이고, 두 번째링크는 로컬 페이지로 이동한다.
main_page.php
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Mobile</h1>
</div>
<div data-role="content">
<a href="http://wickedmiso.com/" data-role="button">External Link</a> <!-- 외부 페이지 이동 -->
<a href="./other_page.php" data-role="button">Local Link</a> <!-- 로컬 페이지 이동 -->
</div>
<div data-role="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
|
02. 두 번째 페이지로 이동됐음을 화면에 표시하려면 두 번째 페이지를 구성한다.
이동하는 페이지에는 head 태그 안에 jQuery Mobile을 위한 구성을 별도로 하지 않았다.
other_page.php |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
</head>
<body>
<div data-role="page">
<div data-role="header" data-add-back-btn="true">
<h1>Mobile</h1>
</div>
<div data-role="content">
<h1>Hello Wicked Miso</h1>
</div>
<div data-role="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
|
03. 아래와 같이 페이지가 이동하는 것을 확인 할 수 있다.
■ jQuery Mobile 로컬 페이지 이동간 Ajax 사용 금지
01. 로컬 페이지로 이동할 때 Ajax를 사용하고 싶지 않다면 rel 속성을 external로 입력한다.
main_page.php
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Mobile</h1>
</div>
<div data-role="content">
<a href="http://wickedmiso.com/" data-role="button">External Link</a>
<a href="./other_page.php" data-role="button" rel="external">Local Link</a>
</div>
<div data-role="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
|
02. 이렇게 이렵하면 아래 그림과 같이 로컬 페이지로 이동한다.
