본문 바로가기
jQuery/jQueryMobile

[jQueryMobile] 페이지 관련 이벤트

사악미소 2016. 10. 26. 17:34
반응형




■ jQuery Mobile 페이지 관련 이벤트



jQuery Mobile은 페이지 관련 이벤트가 제공된다. 이벤트가 굉장히 많으므로 어떤 순서로 실행하는지 아는것은 중요하다.


이벤트 이름

설   명

 pagebeforecreate

 · 페이지를 생성하기 바로 전에 실행합니다.

 pagecreate

 · 페이지를 생성하고 실행합니다.

 pagebeforechange

 · 페이지를 이동하기 바로 전에 실행합니다.

 pagechange

 · 페이지를 이동하고 실행합니다.

 pagechangefailed

 · 페이지 이동이 실패했을 때 실행합니다.



01. 아래코드는 bind( ) 메서드를 사용해 pagebeforecreate, pagecreate, pagebeforechange, pagechange 이벤트를 연결한다.

 page_event.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>
<script>
    jQuery(document).bind({
          pagebeforecreate:function() { alert('PAGE BEFORE CREATE'); }
        , pagecreate:function() { alert('PAGE CREATE'); }
        , pagebeforechange:function() { alert('PAGE BEFORE CHANGE'); }
        , pagechange:function() { alert('PAGE CHANGE'); }
    });
</script>
</head>
<body>
<div data-role="page">
    <!-- 첫 번째 페이지 -->
    <div data-role="header" data-position="fixed">
        <h1>FIRST</h1>
    </div>
    <div data-role="content">
        <a href="#second_page" data-role="button">To Second Page</a>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>FOOTER</h1>
    </div>
</div>
<div data-role="page" id="second_page" data-position="fixed">
    <!-- 두 번째 페이지 -->
    <div data-role="header" data-add-back-btn="true">
        <h1>FIRST</h1>
    </div>
    <div data-role="content"></div>
    <div data-role="footer" data-position="fixed">
        <h1>FOOTER</h1>
    </div>
</div>
</div>
</body>
</html>




02. 코드를 실행하면 페이지가 생성되거나 이동할 때 pagebeforechange, pagebeforecreate, pagecreate, pagechange

   이벤트가 순서대로 실행되는 것을 확인 할 수 있다.

※ 페이지를 이동할 때는 무조건 이 네가지 메서드를 모두 실행한다.

   따라서 페이지 관련 이벤트에서 이벤트를 연결하면 이벤트가 중첩될 수 있으므로 주의가 필요하다.





반응형
저작자표시

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

[jQueryMobile] jQueryMobile의 초기화 이벤트  (0) 2016.10.26
[jQueryMobile] jQuery Mobile 테마  (0) 2016.10.25
[jQueryMobile] jQuery Mobile 탭 바  (0) 2016.10.25
[jQueryMobile] jQuery Mobile 툴바  (0) 2016.10.25
[jQueryMobile] 레이아웃 구성하기  (0) 2016.10.25

'jQuery/jQueryMobile' Related Articles

티스토리툴바