Jquery 모바일: 이전 페이지로 이동
Jquery 모바일: Preview Page
1. data-direction="reverse"
링크 상의 경로로 이전 페이지로 이동하는 것처럼 화면 전환을 한다.
<a href="#page1" data-role="button" data-transition="slide" data-direction="reverse">이전 페이지로 이동</a>
data-direction의 값을 reverse로 하면 data-trasition에서 주어진 값의 반대로 화면 전환 방식이 동작하게 된다.
2. data-rel="back"과의 차이점
1) <a href="#page2" data-rel="back">
data-rel=”back” 속성을 사용하면 앵커 태그에 명시되어 있는 링크 경로는 무시되어지고 이전 페이지로 돌아간다.
2) <a href="#page2" data-direction="reverse">
data-direction="reverse" 속성을 사용하면 앵커 태그에 있는 링크 경로로 가면서 이전 페이지로 돌아가는 듯한 페이지 전환 효과를 보여준다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- 첫번째 페이지 -->
<section id="page1" data-role="page">
<header data-role="header">
<h1>JQuery Mobile 1</h1>
</header>
<div class="content" data-role="content">
<p>첫번째 페이지</p>
<a href="#page2" data-role="button" data-transition="slide">두번째 페이지로 이동</a>
<a href="#page3" data-role="button" data-transition="slide">세번째 페이지로 이동</a>
</div>
<footer data-role="footer">
<h2>ⓒcopyright 2016</h2>
</footer>
</section>
<!-- 2번째 페이지 -->
<section id="page2" data-role="page">
<header data-role="header">
<h1>JQuery Mobile 2</h1>
</header>
<div class="content" data-role="content">
<p>두번째 페이지</p>
<a href="#page1" data-role="button" data-transition="slide" data-direction="reverse">첫번째 페이지로 이동</a>
<a href="#page3" data-role="button" data-transition="slide">세번째 페이지로 이동</a>
</div>
<footer data-role="footer">
<h2>ⓒcopyright 2016</h2>
</footer>
</section>
<!-- 3번째 페이지 -->
<section id="page3" data-role="page">
<header data-role="header">
<h1>JQuery Mobile 3</h1>
</header>
<div class="content" data-role="content">
<p>3번째 페이지</p>
<a href="#page1" data-role="button" data-transition="slide" data-direction="reverse">첫번째 페이지로 이동</a>
</div>
<footer data-role="footer">
<h2>ⓒcopyright 2016</h2>
</footer>
</section>
</body>
</html>
