다양한 페이지 전환 효과 , data-transition , data-rel=“back”
Slide 효과
왼쪽에서 오른쪽으로 움직이는 효과입니다. 좌우의 공간적인 느낌을 활용하므로 대분류에서 소분류로 넘어가는 메뉴 간의 이동 시 활용하면 좋습니다. 사용법은 <a> 태그를 사용할 때 “data-transition” 특성에 전환 효과에 해당하는 이름을 넣어주면 됩니다.
<a href=“sub_t.html” data-transition=“slide”>Slide효과</a>
위 예는 Slide 효과를 위해서 data-transition=“slide” 특성값을 지정한 경우입니다. 그러면 좌우로 움직이는 효과가 만들어 집니다.
[Back] 단추를 사용하면 자동으로 반대 방향으로 전환 효과가 이뤄집니다. [Back] 단추에서 자동으로 전환 효과가 돌아가는 기능을 사용하려면 다음처럼 data-rel=“back”을 입력해 주어야 합니다.
<a href=“main_html” data-rel=“back”> 돌아가기</a>
위 예처럼 왼쪽에서 오른쪽으로 전환이 발생한 후에 다시 돌아갈 때 위의 경우처럼 data-rel=“back” 으로 해주면 data-transition=“slide”를 다시 입력하지 않아도 자동으로 반대 방향 전환 효과를 만들어 줍니다. 또한 data-rel=“back” 은 href 에 지정한 maint_t.html 주소는 사용하지 않고 스택 히스토리에 기억된 이전 화면 주소로 이동시킵니다.
Slide up 과 Slide Down 효과
Slide up 효과는 아래에서 위로 올라가는 효과입니다. 반대로 Slide Down 효과는 위에서 아래로 내려오는 효과입니다. 페이지를 넘기 듯이 연결성이 있는 글을 보여주고자 할 때 활용하면 좋습니다.
data-transition에 각각 “ slideup” 과 slidedown 을 입력하면 됩니다.
Fade 효과
두 개의 화면이 서로 오버랩 되면서 점점 연결 후의 화면으로 뚜렷하게 나타나는 효과입니다.
부드러운 느낌의 변화를 주므로 연속적인 그림을 보여줄 때 사용하면 좋습니다.
<a href=“sub_t.html” data-transition=“fade” > Fade 효과 </a>
Pop효과
원근감을 사용하여 가운데에서 점차 펼쳐지면서 나타나는 효과입니다. 대화상자처럼 팝업 메뉴 형태로 표시하고자 할 때 활용하면 좋습니다.
data-transition 에 “pop”을 입력합니다.
<a href=“sub_t.html” data-transition=“pop” >Pop 효과 </a>
308 쪽에서 대화상자를 만들 때 자동으로 이 효과가 적용되어 나타나는 것을 볼 수 있었습니다. 하지만 [Back] 단추를 누르면 Slide 효과로 바뀌기 때문에 쌍을 이루지 못해
어색했을 겁니다. 이 문제는 자동으로 전환 효과에 맡기지 말고 대화상자를 띄울 때 data-transition=“pop” 특성값을 직접 지정해 주면 됩니다.
<a href=“sub.html” data-rel=“dialog” data-transition=“pop” > 대화상자로 열기 </a>
Flip 효과
종이의 앞뒷면을 직접 뒤집는 듯한 느낌을 주는 효과입니다. 강렬한 효과를 주므로 분위기를
크게 전환해야 할 때 사용하면 좋습니다.
<a href=“sub_t.htmml” data-transition=“flip” > Flip 효과 </a>
하지만 이 효과는 아이폰에서는 정상적으로 동작하지만 오래된 안드로이폰에서는 제대로 동작하지 않을 수 있습니다. 이에 대한 JQuery Mobile 의 공식적인 설명에 따르면 안드로이드는 3D CSS 기능이 부족하기 때문이라고 합니다. 안드로이드폰에서 적용할 때 유의하세요.
main_t.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header" data-theme="b">
<h1>장면전환 효과입니다. </h1>
</div>
<div data-role="content" >
<ul data-role="listview">
<li><a href="sub_t.html" data-transition="slide">Slide효과</a></li>
<li><a href="sub_t.html" data-transition="slideup">SlideUp효과</a></li>
<li><a href="sub_t.html" data-transition="slidedown">SlideDown효과</a></li>
<li><a href="sub_t.html" data-transition="pop">Pop효과</a></li>
<li><a href="sub_t.html" data-transition="fade">Fade효과</a></li>
<li><a href="sub_t.html" data-transition="flip">Flip효과</a></li>
</ul>
</div>
<div data-role="footer">
<h4>Footer입니다.</h4>
</div>
</div>
</body>
</html>
sub_t.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>장면전환효과</h1>
</div>
<div data-role="content">
<a href="main_t.html" data-role="button" data-rel="back" data-icon="back">돌아가기</a>
</div>
<div data-role="footer">
<h4>Footer 입니다. </h4>
</div>
</div>
</body>
</html>
표
| 장면전환 효과 | 사용방법 | 효과방식 |
| fade | data-transition="fade" | 두 화면이 오버랩되며 점점 뚜렷하게 나타나는 효과입니다. |
| pop | data-transition="pop" | 원근감을 이용해서 점점 펼쳐지면서 나타나는 효과입니다. |
| flip | data-transition="flip" | 종이를 뒤집는 듯한 느낌의 효과입니다. 중심점이 가운데입니다. |
| turn | data-transition="turn" | 종이를 뒤집는 느낌의 효과입니다. 중심점이 가장자리에 있습니다. |
| flow | data-transition="flow " | 일정 거리만큼 먼거리의 원근감을 준 후에 좌우로 이동되는 효과입니다. |
| slide | data-transition="slide" | 좌에서 우, 또는 우에서 좌의 방향으로 이동하는 효과입니다. |
| slidefade | data-transition="slidefade" | slide 와 fade 효과가 동시에 발생합니다. |
| slideup | data-transition="slideup" | 아래에서 위로 올라가는 효과입니다. |
| slidedown | data-transition="slidedown" | 위에서 아래로 내려오는 효과 입니다. |
| none | data-transition="none" | 장면전화 효과를 강제로 사용하지 않을 때 이요합니다. |
* 아이콘
- 돌아가기 아이콘, 새로고침, 화살표 모양
http://demos.jquerymobile.com/1.4.3/icons/
미션 모바일 웹 메뉴 만들기
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style type="text/css">
/* 모든 엘리먼트의 여백 없앰*/
* {
margin: 0px
padding: 0px
}
/* 블릿(작은점) 없앰*/
ul { list-style-type: none }
/* li 엘리먼트가 가로로 표시되게 바꿈 */
li { display: inline }
a:link, a:visited {
/* 배경: 빨강색, 글자 : 흰색, 링크 밑줄 없앰*/
background-color: #FF0000
color: #FFFFFF
text-decoration: none
float: left /* 링크 사이에 떨어진 틈을 서로 붙임 */
text-align: center
width: 24% /* 메뉴가 4개 이므로 25%씩 맞춰야 하나 구분선 1px 고려*/
border-right-style: solid
border-right-width: 1px /* 메뉴 항목간에 구분선 1px 흰색 그림*/
border-right-color: #FFFFFF
padding-top: 0.5em
padding-bottom: 0.5em
}
/* 터치, 후버 시 색상 바꿈*/
a:hover,a:active {
background-color: #FFFFFF
color: #F00
}
</style>
</head>
<body>
<ul>
<li><a href="#">뉴스</a></li>
<li><a href="#">스포츠</a></li>
<li><a href="#">날씨</a></li>
<li><a href="#">증권</a></li>
</ul>
</body>
</html>
결과 =>
http://braverokmc2.dothome.co.kr/junho/ex10/menu.htm
댓글 ( 4)
댓글 남기기