■ jQueyr Mobile 내부 페이지 이동
jQueyr Mobile에서 페이지를 이동하려면 여러개의 페이지를 생성하고 a 태그의 href 속성에 이동할 페이지의 id를 입력해야 한다.
01. 페이지 이동을 위한 예제 코드는 아래와 같다.
inside_move.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" id="first_page">
<div data-role="header">
<h1>Mobile</h1>
</div>
<div data-role="center">
<ul data-role="listview">
<li><a href="#second_page">List Item 1</a></li>
<li><a href="#second_page">List Item 2</a></li>
<li><a href="#second_page">List Item 3</a></li>
<li><a href="#second_page">List Item 4</a></li>
<li><a href="#second_page">List Item 5</a></li>
</ul>
</div>
<div data-role="footer">
<h1>FOOTER</h1>
</div>
</div>
<!-- 두 번째 페이지 -->
<div data-role="page" id="second_page">
<div data-role="header">
<h1>Other Page</h1>
</div>
<div data-role="content">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div data-role="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
|
02. 그럼 아래와 같은 출력 결과에서 하나의 행을 클릭하면
03. 다음 행으로 이동한 모습을 확인 할 수 있다.
■ jQueyr Mobile 내부 페이지 Back 버튼 생성
jQuery Mobile에서 아이폰처럼 뒤로 가기 버튼을 만들고 싶으면 아래와 같이 data-add-back-btn을 ture로 설정해야 한다.
01. 위 페이지 이동 예제 코드에서 heardr 영역에 data-add-back-btn을 ture로 설정함으로서 상단 Back버튼을 만들 수 있다.
inside_move_back_btn.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" id="first_page">
<div data-role="header">
<h1>Mobile</h1>
</div>
<div data-role="center">
<ul data-role="listview">
<li><a href="#second_page">List Item 1</a></li>
<li><a href="second_page">List Item 2</a></li>
<li><a href="second_page">List Item 3</a></li>
<li><a href="second_page">List Item 4</a></li>
<li><a href="second_page">List Item 5</a></li>
</ul>
</div>
<div data-role="footer">
<h1>FOOTER</h1>
</div>
</div>
<!-- 두 번째 페이지 -->
<div data-role="page" id="second_page">
<div data-role="header" data-add-back-btn="true">
<h1>Other Page</h1>
</div>
<div data-role="content">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div data-role="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
|
02. 그럼 아래와 같은 출력 결과에서 하나의 행을 클릭하면
03. 페이지가 이동하고 이동한 페이지 header 영역 좌측에 Back 버튼이 생성된 모습을 확인 할 수 있다.
Back 버튼을 쿠르면 맨처음 시작 페이로 자동적으로 이동한다.
