6*1
<!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("pagebeforecreate","#main", function(e){
console.log(e.type);
});
$(document).on("pagecreate", "#main",function(e){
console.log(e.type);
});
$(document).on("pageinit", "#main", function(e){
console.log(e.type);
});
$(document).on("pageremove", "#main", function(e){
console.log(e.type);
});
// inpage
$(document).on("pagebeforecreate","#inpage", function(e){
console.log(e.type);
});
$(document).on("pagecreate", "#inpage",function(e){
console.log(e.type);
});
$(document).on("pageinit", "#inpage", function(e){
console.log(e.type);
});
$(document).on("pageremove", "#inpage", function(e){
console.log(e.type);
});
//external page
$(document).on("pagebeforecreate","#externalPage", function(e){
console.log(e.type);
});
$(document).on("pagecreate", "#externalPage",function(e){
console.log(e.type);
});
$(document).on("pageinit", "#externalPage", function(e){
console.log(e.type);
});
$(document).on("pageremove", "#externalPage", function(e){
console.log(e.type);
});
</script>
<!--
[Page 초기화 이벤트]
Page Create 이벤트 : Page 컨테이너가 최초로 생성되는 시점을 전후로 해서 발생하는 이벤트(pagebeforeCreate, pagecreate)에 의해서 초기화 되고 나면, pageinit이벤틀 발생시킨다. DOM이 제거될 시에는 pageremove이벤트가 발생한다.
첫페이지 : pagebeforecreate >>> pagecreate >>>pageinit (새로고침을 하기전까지는 다시 실행되지 않는다.)
첫페이지 안에 있는 페이지 : pagebeforecreate >>> pagecreate >>> pageinit
외부파일의 페이지 : pagebeforecreate >>> pagecreate >>> pageinit
-->
</head>
<body>
<div data-role="page" id="main">
<div data-role="header" data-position="fixed" id="header">
<h3>Page Event</h3>
</div><!-- header -->
<div role="main" class="ui-content">
메인 페이지
<a href="#inpage" data-role="button">go to inpage</a>
<a href="jMobile06_2.html" data-role="button">go to external Page</a>
<div id ="div1" class="ui-body"></div>
</div><!-- main -->
<div data-role="footer" data-position="fixed">
<h3>footer</h3>
</div><!-- footer -->
</div><!-- page1 -->
<div data-role="page" id="inpage">
<div data-role="header" data-position="fixed">
<h3>inPage</h3>
</div>
<div role="main" class="ui-content">
<div id="div2" class="ui-body"></div>
</div>
<a data-rel = "back" class="ui-btn ui-corner-all ui-btn-b">메인으로..</a>
</div>
</body>
</html>
6*2
<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>
<div id="div1" class="ui-body"></div>
</div>
</div>
'기존카테고리 > 하이브리드앱' 카테고리의 다른 글
| [jQuery Mobile] 세션스토리지, 로컬스토리지 (0) | 2017.11.03 |
|---|---|
| [jQuery Mobile] pagebeforehide (0) | 2017.11.03 |
| [jQuery Mobile] pagebeforeload 등 초기화 이벤트 (0) | 2017.11.03 |
| [jQuery Mobile] $.mobile 객체 (0) | 2017.11.03 |
| [jQuery Mobile] mobileinit 정리 (0) | 2017.11.02 |