본문 바로가기
jQuery/jQueryMobile

[jQueyrMobile] 다이얼로그(알림) 창 띄우기

사악미소 2016. 10. 21. 14:52
반응형




■  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. 그럼 아래와 같이 팝업창이 띄어진 모습을 확인 할 수 있다.





반응형
저작자표시

'jQuery > jQueryMobile' 카테고리의 다른 글

[jQueyrMobile] 아이콘 사용하기  (0) 2016.10.21
[jQueyrMobile] 리스트 구분자 사용 및 그룹화  (0) 2016.10.21
[jQueyrMobile] 페이지 이동간 슬라이드 애니메이션  (0) 2016.10.21
[jQueryMobile] 내부 페이지 이동 및 Back 버튼 추가  (0) 2016.10.21
[jQueryMobile] jQuery Mobile 설정하기.  (0) 2016.10.20

'jQuery/jQueryMobile' Related Articles

티스토리툴바