jquery mobile 강좌 6 [ 페이지 전환 애니메이션 / 화면 전환 / 애니메이션 /changePage / data-transition / data-direction ]
2016. 3. 15. 09:33ㆍlanguage/jquery mobile
jquery mobile은 페이지를 이동하거나 대화상자를 표시할 때 애니메이션을 제공합니다.
a 태그에 data-transition 속성을 이용하여 적용합니다.
transition 속성은 다음과 같습니다.
fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none
위 속성들은 페이지 전환에 사용 가능하며 팝업이나 툴팁에는 일부 속성만 사용 가능합니다.
data-direction="reverse" 속성을 사용하면 애니메이션이 반대로 실행되도록 합니다.
자동으로 생성된 버튼이나 대화상자는 jquery mobile에서 자동으로 역방향 애니메이션이 실행되도록 합니다.
예제소스입니다.
|
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>jquery mobile</title>
<link rel="stylesheet" href="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css">
<script src="./jquery/jquery-1.11.0.js"></script>
<script src="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>1 page</p>
<p><a href="#page2" data-rel="dialog" data-transition="pop">go page2</a></p>
</div>
<footer data-role="footer"><h1>cofs</h1></footer>
</section>
<section id="page2" data-role="page">
<header data-role="header" data-add-back-btn="true"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>2 page</p>
<p><a href="#page3" data-transition="turn">go page3</a></p>
</div>
<footer data-role="footer"><h1>cofs</h1></footer>
</section>
<section id="page3" data-role="page">
<header data-role="header" data-add-back-btn="true"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>3 page</p>
<p><a href="#page1" data-transition="slideup">go page1</a></p>
</div>
<footer data-role="footer"><h1>cofs</h1></footer>
</section>
</body>
</html> |
cs |
일부 애니메이션은 jquery mobile css 에 class 로 정의되어있어서 class를 토글하는 것만으로도 애니메이션을 표현할 수 있습니다.
다음 예제는 class를 토글하여 애니메이션을 동작합니다.
|
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>jquery mobile</title>
<link rel="stylesheet" href="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css">
<script src="./jquery/jquery-1.11.0.js"></script>
<script src="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>CSS3 Animations</h1></header>
<div class="content" data-role="content">
<p id="slidingTest">Show/Hide Test 클릭해보세요</p>
<div id="textEl" class="slide out">Test 가나다라마바사</div>
</div>
<footer data-role="footer"><h1>cofs</h1></footer>
</section>
<script type="text/javascript">
$(function(){
$("#slidingTest").click(function(){
$("#textEl").toggleClass("reverse out in");
});
});
</script>
</body>
</html> |
cs |
애니메이션으로 원하는 결과를 얻고 싶다면 실제로 여러 속성을 바꿔가면서 실험해보는 것이 좋습니다.
단, 애니메이션은 시각적으로 좋기는 하지만 잘못 사용한다면 접근성이나 사용성 등에서 좋지않은 결과를 가져올 수 있습니다.
'language > jquery mobile' 카테고리의 다른 글
| jquery mobile 강좌 11 [ 목록 뷰 / listview / form 태그 적용 / 입력 폼 만들기 ] (5) (0) | 2016.03.16 |
|---|---|
| jquery mobile 강좌 10 [ 목록 뷰 / listview / 아코디언 / collapsibleset / accordion ] (4) (0) | 2016.03.16 |
| jquery mobile 강좌 9 [ 목록 뷰 / listview / 말풍선 count bubbles / 아이콘 icon / 썸네일 / thumbnails] (3) (0) | 2016.03.16 |
| jquery mobile 강좌 8 [ 목록 뷰 / listview / 버튼 나누기 / 검색 만들기 ] (2) (0) | 2016.03.15 |
| jquery mobile 강좌 7 [ 목록 뷰 / listview 목록 만들기 ] (1) (0) | 2016.03.15 |
| jquery mobile 강좌 5 [ 페이지 이동 / changePage ] (15) | 2016.03.11 |
| jquery mobile 강좌 4 [ 대화상자, 다이얼로그 팝업 ] (0) | 2016.03.11 |
| jquery mobile 강좌 3 [ 페이지 이벤트 / event ] (7) | 2016.03.11 |
| jquery mobile 강좌 2 [ 페이지 이동 및 뒤로가기 ] (8) | 2016.03.10 |
| jquery mobile 강좌 1 [ jquery mobile 기본 설정 및 화면 만들기 ] (4) | 2016.03.10 |