■ jQueyr Mobile 다이얼로그(알림) 창 띄우기
jQuery Mobile에서 data-rel 속성에 dialog를 입력하면 다이얼로그 형태로 페이지가 전환된다.
이 경우에도 data-transition 속성을 사용하여 슬라이드 애니메이션 효과를 줄수 있다.
01. data-rel을 이용한 다이얼로그 창 뜨위기 코드는 아래와 같다.
inside_move_data_rel.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-rel="dialog">DIALOG SLIDE</a></li>
<li><a href="#second_page" data-rel="dialog" data-transition="pop">DIALOG POP</a></li>
<li><a href="#second_page" data-rel="dialog" data-transition="slidedown">DIALOG SLIDEDOWN</a></li>
<li><a href="#second_page" data-rel="dialog" data-transition="flip">DIALOG 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">
<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. 그럼 아래와 같이 팝업창이 띄어진 모습을 확인 할 수 있다.
