■ jQueyr Mobile 페이지 이동간 슬라이드 애니메이션
jQuery Mobile은 기본적으로 왼쪽 슬라이드 방식으로 페이지간 이동이 이루어지지만. data-transition 속성 값을
지정함으로서 슬라이드 애니메이션을 교체할 수 있다.
slide
|
· 기본값이 되는 왼쪽 슬라이드 애니메이션 · data-transition을 지정하지 않아도 해당 방식으로 전환된다.
|
slideup
|
· 다음 페이지가 화면 아래에서 위로 올라온다.
|
slidedown
|
· 다음 페이지가 화면 위에서 아래로 내려온다.
|
pop
|
· 다음페이지가 가운데서 부터 커지면서 전환된다.
|
fade
|
· 첫번째 페이지가 흐려지면서 다음 페이지로 전환된다.
|
flip
|
· 첫번째 페이지가 뒤집히면서 다음페이지로 전환된다.
|
01. data-transition의 각 속성을 적용한 코드는 아래와 같다.
inside_move_data_transition.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" data-transition="slide">SLIDE</a></li>
<li><a href="#second_page" data-transition="slideup">SLIDE UP</a></li>
<li><a href="#second_page" data-transition="slidedown">SLIDE DOWN</a></li>
<li><a href="#second_page" data-transition="pop">POP</a></li>
<li><a href="#second_page" data-transition="fade">FADE</a></li>
<li><a href="#second_page" data-transition="flip">FLIP</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. 출력결과는 아래와 같다 각각 버튼을 눌러서, 작동여부를 확인해 보자.
