1. mobileinit 이벤트
위와 같이 중간에 넣어야 한다.
2. 기본 환경 설정
3. 페이지 초기화 이벤트 (pagebeforecreate, pagecreate, pageinit)
4. 페이지 변경 이벤트 (pagebeforechange, page change, pagechangefailed)
5. 페이지 전환 이벤트 (pagebeforeshow, pagebeforehide, pageshow, pagehide)
6. 페이지 로드 이벤트(pagebeforeload, pageload, pageloadfailed)
7. tap, taphold 이벤트
8. swipe, swipeleft, swiperight 이벤트
9. orientationchange 이벤트
18-01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>18-01</title>
<link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" />
<script src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
// mobileinit 이벤트가 발생할 경우의 처리
$(document).on('mobileinit', function(event) {
// 기본 화면 전환이 fade인 것을 slide로 변경합니다.
//extend를 이용해서 쓸수있다.
$.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>
<!--mobile 자바스크립트를 참조하기 전에 반드시 해야한다. -->
<script src="js/jquery.mobile-1.3.2.js"></script>
</head>
<body>
<div data-role="page" id="first">
<div data-role="header" data-position="fixed">
<h3>Events</h3>
</div>
<div data-role="content">
<p>첫번째 페이지</p>
<div>
<a href="#second" data-role="button">두 번째 페이지로</a>
<a href="18-02.html" data-role="button">세 번째 페이지(외부)로</a>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h4>© 2014 T academy</h4>
</div>
</div>
<div data-role="page" id="second" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h3>Events</h3>
</div>
<div data-role="content">
<p>두 번째 페이지</p>
</div>
<div data-role="footer" data-position="fixed">
<h4>© 2014 T academy</h4>
</div>
</div>
</body>
</html>
18-02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>18-03</title>
</head>
<body>
<div data-role="page" id="third" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h3>Events</h3>
</div>
<div data-role="content">
<p>세 번째 페이지(외부)</p>
</div>
<div data-role="footer" data-position="fixed">
<h4>© 2014 T academy</h4>
</div>
</div>
</body>
</html>
출력화면
아래 콘솔화면에 뜨는 것을 볼 수 있다.
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 생활코딩 Javascript 정리 - 자바스크립트 개념 및 HTML에서 자바스크립트 로드하기 (0) | 2017.06.17 |
|---|---|
| window.location 객체 (0) | 2016.05.05 |
| 자바스크립트 - apply와 call 차이점 (0) | 2015.02.03 |
| Javascript - jQuery Mobile 유틸리티 (0) | 2015.02.02 |
| Javascript - jQuery Mobile 컴포넌트 - 컨텐트 서식 적용, 테마롤러 사용법 (0) | 2015.02.02 |
| Javascript - jQuery Mobile 컴포넌트 - 폼 (0) | 2015.01.30 |
| Javascript - jQuery Mobile 컴포넌트 - 리스트뷰 (0) | 2015.01.30 |
| Javascript - jQuery Mobile 컴포넌트 - 페이지, 버튼, 툴바 (0) | 2015.01.29 |