jquery mobile은 비동기 방식이므로 페이지를 로딩하는 이벤트와 로딩하기 전 후 이벤트를 구별합니다. jquery에서는 보통 ready 메소드를 사용하여 jquery(douvument).read(); 또는 약식으로 $(function(){}); 으로 사용하기도 합니다.

 

 

 

 

 

pagebeforehide

a 페이지에서 b 페이지로 이동하기 전에 a 페이지에서 발생하는 이벤트 입니다. ui.nextPage는 이동할 페이지 b 이며 b가 없을 경우에는 빈 jquery 객체입니다.

 

pagebeforeshow

a 페이지에서 b 페이지로 이동하기 전에 b 페이지에서 발생하는 이벤트 입니다. ui.prevPage는 이동 시작 페이지 a 이며 a가 없을 경우에는 빈 jquery 객체입니다.

 

pagehide

전환 시작 페이지 a 에서 전환이 끝난 후 발생합니다. ui.nextPage는 전환대상 페이지의 jquery 객체이며 전환 대상 페지이가 없을 경우는 빈 객체입니다.

 

pageshow

전환 대상 페이지 b 에서 전환이 끝난 후 발생합니다. ui.prevPage는 전환 시작 페이지의 jquery 객체이며 전환 시작 페이지가 없을 경우는 빈 객체입니다.

 

 

 



 

 

이벤트를 사용하려면 적당한 이벤트 리스너를 사용해야 합니다.

jquery.bind(), jquery.delegate(), jquery.on() 을 써서 사용할 수 있습니다.

 

보통은 bind를 사용해도 무방하지만 비동기로 불러온 페이지에는 delegate나 on을 사용해야 합니다.

 

<!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>
<script type="text/javascript">
$(function(){
    $("#page1").bind("pagebeforehide",function(event, ui){
        alert("1페이지에서 2페이지로 전환 전에 1페이지에서 작동합니다.");
    });
    
    $("#page2").bind("pagebeforeshow",function(event, ui){
        alert("1페이지에서 2페이지로 전환 전에 2페이지에서 작동합니다.");
    });
    
    $("#page1").bind("pagehide",function(event, ui){
        alert("1페이지에서 2페이지로 전환이 끝난 후에 1페이지에서 작동합니다.");
    });
    
    $("#page2").bind("pageshow",function(event, ui){
        alert("1페이지에서 2페이지로 전환이 끝난 후에 2페이지에서 작동합니다.");
    });
    
    ///////////////////////////////////////////////////////////////////////////
    
    $("#page2").bind("pagebeforehide",function(event, ui){
        alert("2페이지에서 1페이지로 전환 전에 2페이지에서 작동합니다.");
    });
    
    $("#page1").bind("pagebeforeshow",function(event, ui){
        alert("2페이지에서 1페이지로 전환 전에 1페이지에서 작동합니다.");
    });
    
    $("#page2").bind("pagehide",function(event, ui){
        alert("2페이지에서 1페이지로 전환이 끝난 후에 2페이지에서 작동합니다.");
    });
    
    $("#page1").bind("pageshow",function(event, ui){
        alert("2페이지에서 1페이지로 전환이 끝난 후에 1페이지에서 작동합니다.");
    });
    
    ///////////////////////////////////////////////////////////////////////////
 
});
</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">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="#page1">go page1</a></p>
    </div>
    <footer data-role="footer"><h1>cofs</h1></footer>
</section>
 
</body>
</html>
cs

 

pageEvent.html 을 만들고 실습해 봅니다.

 

해당 이벤트가 어느시점에 발생하는지 알아야 페이지 이동 시 선 작업이나 후 작업을 자유롭게 할 수 있습니다.

외부 페이지를 불러 오는 경우도 마찬가지이며 앞 강좌에서 만든 externalPage.html을 활용하여 실습하는 방법도 추천해 봅니다.

 

 

 

 

 

 

 

 

 

 

by 개발자 CofS 2016.03.11 09:47
  • Favicon of https://shiftkey.tistory.com BlogIcon Shift Key 2017.05.08 10:25 신고 ADDR EDIT/DEL REPLY

    안녕하세요, 글 읽고 댓글 남겨 보아요..
    특정 페이지를 불러올때 화면을 가로 모드로 변경시켜버리고 싶은데..방법 없을까요!?(기본은 세로모드 입니다)
    -webkit rotate(90reg) 이 방식을 써보긴했는데..강제로 변경하니 가로, 세로 길이가 안맞더라구요..

    • Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS 2017.05.08 11:03 신고 EDIT/DEL

      음 글쎄요...

      이런 경우가 없었네요

      그래도 잠깐 고민을 해 보았는데 이 방법이 해결책일지 잘 모르겠네요

      일단 -webkit-transform:rotate(90deg) 같이 css로 화면을 강제 회전시킨거 같네요

      그랬을 경우 화면의 사이즈는 고정한 체 화면만 회전되어 가로, 세로 길이가 안맞고 버튼이나 특정 영역이 화면 밖으로 벗어나는거 같네요

      이럴 경우에는 화면이 회전 된 이후 가로 세로 창 크기를 구해서 페이지의 가로 세로 크기와 맞춰주면 일단 화면이 깨지거나 하는 것은 해결될듯해요

      모바일 환경에서는 직접 테스트해보지 못해서 정확이 어떤 결과가 나올지는 모르겠네요 ㄷㄷ;;;

      근데 분명 더 좋은방법이 있으리라 생각합니다 ㅎㅎ;;;;

    • Favicon of https://shiftkey.tistory.com BlogIcon Shift Key 2017.05.08 12:51 신고 EDIT/DEL

      댓글 감사합니다^^
      맞습니다....-webkit-transform:rotate(90deg) 같이 css로 화면을 강제 회전 시켜버렸는데..여기서 resize()라는 메서드를 사용해야할까 찾아보고있었네요.......ㅠㅠ회전 된 이후의 크기를 구해서 body의 width, height를 강제 입력시켜보려합니다ㅠㅠ

    • Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS 2017.05.08 12:54 신고 EDIT/DEL

      잘 적용되길 바래요 ㅎㅎ
      더 좋은방법이 있으면 댓글 남겨주세요 ^^!!

    • Favicon of https://shiftkey.tistory.com BlogIcon Shift Key 2017.05.08 13:00 신고 EDIT/DEL

      감사합니다^^네~~

    • Favicon of https://shiftkey.tistory.com BlogIcon Shift Key 2017.05.10 10:55 신고 EDIT/DEL

      ㅠㅠ 결국 갖은 시도를 하다..네이티브 코드로 해결보았네요.....

    • Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS 2017.05.10 11:03 신고 EDIT/DEL

      특정 화면이나 url 일 경우 네이티브로 화면을 회전시키셨다는 말씀이시죠 ?ㅎㅎ
      고생하셨습니다 ㅎㅎ