jquery mobile 강좌 3 [ 페이지 이벤트 / event ]

2016. 3. 11. 09:47language/jquery mobile

 

 

 

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을 활용하여 실습하는 방법도 추천해 봅니다.