jQuery Mobile 11

jQuery Mobile의 초기화 이벤트와 페이지 관련 이벤트

명색이 자바스크립트를 다루는 부분에서 앞선 10개의 페이지에 걸쳐 자바스크립트 코드를 하나도 입력하지 않았습니다. 사실, 대부분 jQuery Mobile이 모든 것을 자동으로 만들어주므로 신경 쓰지 않아도 됩니다. 하지만, 이제부터 조금이나마 코드를 입력해 봅시다.

jQuery Mobile에는 여러 가지 이벤트가 있습니다. jQuery Mobile의 가장 기본 이벤트는 mobileinit 입니다. mobileinit 이벤트는 jQuery Mobile 페이지가 형성되면서 실행됩니다. 주의할 점은 jQuery Mobile과 관련된 자바스크립트 파일을 읽을 때 실행하는 이벤트이므로 아래의 예제 코드처럼 jQueryMobile.js 파일을 추가하기 전에 사용해야 합니다.

							<script src="http://code.jquery.com/jquery-1.7.js"></script>
							<script>
								$(document).bind('mobileinit', function () {
									alert('Mobile Init..!');
								});
							</script>
							<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>		
						

일반적으로 mobileinit 이벤트가 발생할 때 mobile 페이지의 기본 설정을 바꿉니다. 예를 들어, 뒤로 가기 버튼을 따로 입력하지 않고 자동으로 생성하고 싶을 때는 아래의 소스코드처럼 입력합니다.

							$(document).bind('mobileinit', function () {
								$.mobile.page.prototype.options.addBackBtn = true;
							});
						

이러한 방식으로 모든 옵션을 강제적으로 설정할 수 있습니다. jQuery Mobile의 설정과 관련된 메서드는 모두 mobileinit 이벤트 핸들러 안에서 실행해야 함을 기억해 주세요.

이제 jQuery Mobile의 페이지 관련 이벤트를 알아보겠습니다. jQuery Mobile은 아래 표의 페이지 관련 이벤트를 제공합니다.



jQuery Mobile의 페이지 관련 이벤트

jQuery Mobile의 페이지 관련 이벤트
이벤트 이름 설명
pagebeforecreate 페이지를 생성하기 바로 전에 실행합니다.
pagecreate 페이지를 생성하고 실행합니다.
pagebeforechange 페이지를 이동하기 바로 전에 실행합니다.
pagechange 페이지를 이동하고 실행합니다.
pagechangefailed 페이지 이동이 실패했을 때 실행합니다.

이벤트가 굉장히 많으므로 어떤 순서로 실행하는지 아는 것이 굉장히ㅣ 중요합니다. 아래의 소스코드처럼 코드를 입력해 직접 알아봅시다.bind() 메서드를 사용해 pagebeforecreate, pagecreate, pagebeforechange, pagechange 이벤트를 연결했습니다.

							<head>
								<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
								<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
								<style>
									
								</style>
								<script src="http://code.jquery.com/jquery-1.7.js"></script>
								<script>
									$(document).bind('mobileinit', function () {
										alert('MOBILE INIT');
									});

									$(document).bind({
										pagebeforecreate: function () { alert('PAGE BEFORE CREATE'); },
										pagecreate: function () { alert('PAGE CREATE'); },
										pagebeforechange: function () { alert('PAGE BEFORE CHANGE'); },
										pagechange: function () { alert('PAGE CHANGE'); }
									});
								</script>
								<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
							</head>
							<body>
								<!-- 첫 번째 페이지 -->
								<div data-role="page">
									<div data-role="header">
										<h1>FIRST</h1>
									</div>
									<div data-role="content">
										<a href="#second_page" data-role="button">To Second Page</a>
									</div>
								</div>
								<!-- 두 번째 페이지 -->
								<div data-role="page" id="second_page" data-add-back-btn="true">
									<div data-role="header">
										<h1>SECOND</h1>
									</div>
									<div data-role="content"></div>
								</div>
							</body>
						


코드를 실행하면 페이지가 이동할 때 pagebeforechange, pagebeforecreate, pagecreate, pagechange 이벤트가 순서대로 실행됩니다. "한번 페이지를 만들었으니 다음 이동부터는 생성과 관련된 이벤트를 실행하지 않겠지?"라고 생각할 수 있는데요. 페이지를 이동할 때는 무조건 이 네가지 메서드를 모두 실행합니다. 따라서 페이지 관련 이벤트에서 이벤트를 연결하면 이벤트가 중첩될 수 있으므로 주의하세요.