[jQuery Mobile] defaultPageTransition
<!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 type="text/javascript">
$(document).on('mobileinit', function(event){
$.extend($.mobile, {
defaultPageTransition : "slide"
});
console.log(event.type);
});
//페이지 초기화 이벤트 발생시
$(document).on({
pagebeforecreate : function(event){console.log(event.type);},
pagecreate : function(event){console.log(event.type);},
pageinit : function(event){console.log(event.type);}
});
//페이지 변경 이벤트 발생 시
$(document).on({
pagebeforechange : function(event){ console.log(event.type); },
pagechange : function(event){ console.log(event.type);},
pagechangefailed : function(event){ console.log(event.type);}
});
//페이지 전환 이벤트 발생 시
$(document).on({
pagebeforeshow: function(event){console.log(event.type);},
pageshow: function(event){console.log(event.type);},
pagebeforehide : function(event){console.log(event.type);},
pagehide : function(event){console.log(event.type);}
});
//페이지 로드 이벤트 발생 시
$(document).on({
pagebeforeload : function(event){ console.log(event.type);},
pageload : function(event){ console.log(event.type);},
pageloadfailed : function(event){ console.log(event.type);}
});
</script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!--
[페이지 변경 이벤트 : pagebeforechange, pagechange, pagechangefailed ]
pagebeforechange : 페이지가 로딩되거나 트랜지션 하기 전에 발생하는 이벤트
다음 페이지에 정보를 가지고 있으며, 다음 페이지 정보를 변경하거나 이벤트를 중지할 수 있다.
pagechange : 페이지가 로드돼서 DOM에 추가되어 초기화가 완료된 이후나,
트랜지션이 완전히 종료된 다음에 호출되는 이벤트
트랜지션 관련 이벤트(show/hide)는 pagechange전에 호출된다.
-->
</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>첫번째 페이지</p>
<a data-role="button" href="#second">두번째 페이지로</a>
<a data-role="button" href="jMobile08_1.html">세번째 페이지로..</a>
</div><!-- main -->
<div data-role="footer" data-position="fixed">
<h3>footer</h3>
</div><!-- footer -->
</div><!-- page1 -->
<div data-role="page" id="second">
<div data-role="header" data-position="fixed">
<h3>events</h3>
</div>
<div role="main" class="ui-content">
<p>두번째 페이지</p>
<a data-role="button" href="#aPage">첫번째 페이지로..</a>
</div>
</div>
</body>
</html>