■ mobileinit 를 이용한 이벤트
jQuery Mobile의 mobileinit 이벤트는 페이지가 형성될때 실행된다. 이때 주의할 점은 jQuery Mobile과 관련된 자바 스크립트 파일을 읽을 때 실행하는 이벤트이므로 mobileinit 이벤트가 실행된 이후에 jQueryMobile.js파일이 추가되어야 한다.
01. mobileinit 이벤트의 실행 방법은 아래와 같다.
mobileinit_event.php
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
jQuery(document).bind('mobileinit', function() {
alert("Mobile Init!!");
});
</script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>MOBILE</h1>
</div>
<div data-role="content">
<h1>Hello Wicked</h1>
</div>
<div data-role="footer" data-position="fixed">
<h1>FOOTER</h1>
</div>
</div>
</div>
</body>
</html>
|
02. 출력결과는 아래와 같다.
■ 뒤로가기 버튼 자동으로 생성하기
01. 일반적으로 mobileinit 이벤트가 발생할 때 mobile 페이지의 기본 설정을 바꾼다.
아래와 같이 뒤로 가기 버튼을 따로 입력하지 않고 자동으로 생성하여 사용할 수 도 있다.
mobileinit_back.php
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
jQuery(document).bind('mobileinit', function() {
jQuery.mobile.page.prototype.options.addBackBtn = true;
});
</script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<!-- 첫 번째 페이지 -->
<div data-role="header" data-position="fixed">
<h1>FIRST</h1>
</div>
<div data-role="content">
<a href="#second_page" data-role="button">To Second Page</a>
</div>
<div data-role="footer" data-position="fixed">
<h1>FOOTER</h1>
</div>
</div>
<div data-role="page" id="second_page" data-position="fixed">
<!-- 두 번째 페이지 -->
<div data-role="header" data-add-back-btn="true">
<h1>FIRST</h1>
</div>
<div data-role="content"></div>
<div data-role="footer" data-position="fixed">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
|
02. 출력결과는 아래와 같다.
위와같은 방식으로 모든 옵션을 강제적으로 설정할 수 있다.
jQuery Mobile의 설정과 관련된 메서드는 모두 mobileinit 이벤트 핸들러 안에서 실행해야 함을 기억하자.
