<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>제이쿼리 모바일 연습</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="http://code.jquery.com/jquery.min.js"></script>
</script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(document).on("pagebeforehide", "#aPage", function(event, ui){
console.log("pagebeforehide이벤트발생: A page에서"+ui.nextPage.attr('id')+"페이지 이동전에 a page에서 동작한다.");
});
$(document).on("pagebeforeshow", "#bPage", function(event, ui){
console.log("pagebeforeshow이벤트발생:"+ ui.prevPage.attr('id')+"에서 b페이지로 전환 전에 b 페이지에서 동작한다.");
});
$(document).on("pagebeforeshow", "#externalPage", function(event, ui){
console.log("pagebeforeshow이벤트발생:"+ ui.prevPage.attr('id')+"에서 외부페이지로 전환 전에 외부페이지에서 동작한다.");
});
$(document).on("pagehide", "#aPage", function(event, ui){
console.log("pagehide이벤트발생: a페이지에서 "+ui.nextPage.attr('id') +"전환 후에 a페이지에서 동작한다.");
});
$(document).on("pageshow", "#bPage", function(event, ui){
console.log("pageshow이벤트발생: "+ui.prevPage.attr('id')+"에서 b페이지로 전환 후에 b페이지에서 동작한다.");
});
$(document).on("pageshow", "#externalPage", function(event, ui){
console.log("pageshow이벤트발생: "+ui.prevPage.attr('id')+"에서 외부페이지로 전환 후에 외부페이지에서 동작한다.");
});
//////////////////////////////
$(document).on("pagebeforehide", "#bPage", function(event, ui){
console.log("pagebeforehide이벤트발생: b page에서"+ui.nextPage.attr('id')+"페이지 이동전에 b page에서 동작한다.");
});
$(document).on("pagebeforehide", "#externalPage", function(event, ui){
console.log("pagebeforehide이벤트발생:" +ui.prevPage.attr('id')+" 에서"+ui.nextPage.attr('id')+"페이지 이동전에 "+ui.prevPage.attr('id')+"에서 동작한다.");
});
$(document).on("pagebeforeshow", "#aPage", function(event, ui){
console.log("pagebeforeshow이벤트발생:"+ ui.prevPage.attr('id')+"에서 a페이지로 전환 전에 a 페이지에서 동작한다.");
});
$(document).on("pagehide", "#bPage", function(event, ui){
console.log("pagehide이벤트발생: b페이지에서 "+ui.nextPage.attr('id') +"전환 후에 b페이지에서 동작한다.");
});
$(document).on("pagehide", "#externalPage", function(event, ui){
console.log("pagehide이벤트발생: "+ ui.prevPage.attr('id')+"에서 "+ui.nextPage.attr('id') +"전환 후에"+ ui.prevPage.attr('id')+"에서 동작한다.");
});
$(document).on("pageshow", "#aPage", function(event, ui){
console.log("pageshow이벤트발생: "+ui.prevPage.attr('id')+"에서 a페이지로 전환 후에 a페이지에서 동작한다.");
});
</script>
<!--
[페이지 전환 이벤트 : Page Show Hide 이벤트]
a페이지에서 b페이지로 이동을 할 때 순서
A pagebeforehide >>> B pagebeforeshow >>> A pagehide >>> B pageshow
위의 순서는 동일파일내에서 페이지 이동하는 경우와 외부파일 페이지 이동하는 경우에도 동일하게 적용된다.
pagehide이벤트에 전달되는 객체는 ui객체이며, 이 ui 객체에는 prevPage속성이 있다.
pageshow이벤트에 전달되는 객체 ui는 nextPage속성이 있다.
따라서, prevPage, nextPage속성을 이용하여 이동 이전페이지의 정보와 이동 이후페이지의 정보를 얻을 수 있다.
-->
</head>
<body>
<div data-role="page" id="aPage">
<div data-role="header" data-position="fixed" id="header">
<h3>Page Event</h3>
</div><!-- header -->
<div role="main" class="ui-content">
<p>A 페이지</p>
<a data-role="button" href="#bPage">go B 페이지</a>
<a data-role="button" href="jMobile07_1.html">go to 외부 페이지로..</a>
</div><!-- main -->
<div data-role="footer" data-position="fixed">
<h3>footer</h3>
</div><!-- footer -->
</div><!-- page1 -->
<div data-role="page" id="bPage">
<div data-role="header" data-position="fixed">
<h3>inPage</h3>
</div>
<div role="main" class="ui-content">
<p>B 페이지</p>
<a data-role="button" href="#aPage">go A 페이지</a>
</div>
</div>
</body>
</html>
7-1
<div data-role="page" id="externalPage">
<div data-role="header" data-position="fixed">
<h3>External Page</h3>
</div>
<div role="main" class="ui-content">
<a data-rel = "back" class="ui-btn ui-corner-all ui-btn-b">A페이지로..</a>
<div id="div1" class="ui-body"></div>
</div>
</div>
'기존카테고리 > 하이브리드앱' 카테고리의 다른 글
| [jQuery Mobile] GeoLocation (0) | 2017.11.03 |
|---|---|
| [jQuery Mobile] 세션스토리지, 로컬스토리지 (0) | 2017.11.03 |
| [jQuery Mobile] pagebeforecreate (0) | 2017.11.03 |
| [jQuery Mobile] pagebeforeload 등 초기화 이벤트 (0) | 2017.11.03 |
| [jQuery Mobile] $.mobile 객체 (0) | 2017.11.03 |