jQuery Mobile 12

jQuery Mobile의 메서드

여기서는 jQuery Mobile 과 관련된 메서드를 살펴봅니다. jQuery Mobile에서 자주 사용하는 메서드는 아래의 표와 같습니다.

jQuery Mobile 메서드

jQuery Mobile 메서드
메서드 이름 설명
$.mobile.changePage(url, options) 페이지를 이동합니다.
$.mobile.loadPage(url, options) 페이지를 불어옵니다.
$.mobile.showPageLoadingMsg() 로딩 메시지를 출력합니다.
$.mobile.hidePageLoadingMsg() 로딩 메시지를 제거합니다.

jQuery Mobile의 페이지 이동 메서드를 알아봅시다. FirstPage, SecondPage라는 페이지명으로 두 개의 페이지를 준비합니다.
FirstPage.html 페이지는 아래의 코드처럼 구성합니다. 페이지를 만들고 페이지를 이동할 수 있는 버튼을 만들었습니다. 여기서는 메서드를 사용해 페이지를 이동할 것으므로 a 태그의 기본 이벤트를 제거할 것입니다.

FirstPage.html : body 태그 구성

							<body>
								<div data-role="page">
									<div data-role="header">
										<h1>MOBILE</h1>
									</div>
									<div data-role="content">
									<h1>Here is First PAGE</h1>
										<a data-role="button" href="31-48.htm">Move To Second PAGE</a>
									</div>
								</div>
							</body>	
						

SecondPage.html 파일은 아래의 소스코드처럼 구성합니다. SecondPage.html은 그냥 두 번째 페이지라는 것만 표시합니다.

SecondPage.html : body 태그 구성

							<body>
								<div data-role="page">
									<div data-role="header">
										<h1>MOBILE</h1>
									</div>
									<div data-role="content">
										<h1>Here is Second PAGE</h1>
									</div>
								</div>
							</body>
						

이제, FirstPage.html 에서 아래의 소스코드처럼 자바스크립트를 입력합니다. 아래의 소스코드를 보면 document 객체의 pagecreate 이벤트에 연결했습니다. pagecreate 이벤트는 jQuery Mobile이 지원하는 이벤트이며 페이지가 모두 만들어졌을 때 실행됩니다.
소스코드는 첫 번째 페이지가 완선되면 a 태그에 이벤트를 연결하고 SecondPage.html을 매개 변수로 loadPage() 메서드를 실행합니다.

FirstPage.html : $.mobile.loadPage() 메서드

							$(document).bind('pagecreate', function () {
								$('a').click(function () {
									// 변수를 선언합니다.
									var href = $(this).attr('href');

									// 페이지를 이동합니다.
									$.mobile.loadPage(href);

									// 기본 이벤트를 제거합니다.
									return false;
								});
							});
						


코드를 실행하고 버튼을 눌러도 아무 반응이 없을 것입니다.

loadPage() 메서드는 페이지를 직접적으로 이동하는 게 아니라 페이지를 불러오기만 합니다. jQuery Mobile은 기본적으로 Ajax를 사용해서 페이지를 이동합니다. 따라서 페이지를 이동한다는 것은 페이지를 현재 페이지에 Ajax를 사용해 로드한 후 현재 페이지 내에서 페이지를 이동하는 것입니다. loadPage() 메서드는 이 과정 주 Ajax를 사용해 로드하는 부분까지만 실행합니다. 따라서 요소 검사를 사용해 보면 매개 변수로 넣은 페이지가 현재 페이지에 추가된 것을 볼 수 있습니다.

반면에 changePage() 메서드는 Ajax를 사용하여 페이지를 로드한 후에 이동까지 수행합니다. 따라서 아래의 소스코드처럼 작성하면 페이지 이동까지 일어납니다.

FirstPage.html : $.mobile.changePage() 메서드

							$(document).bind('pagecreate', function () {
								$('a').click(function () {
									// 변수를 선언합니다.
									var href = $(this).attr('href');

									// 페이지를 이동합니다.
									$.mobile.changePage(href);

									// 기본 이벤트를 제거합니다.
									return false;
								});
							});
						


지금 사용한 SecondPage.html 파일의 용량이 너무 작으므로 로딩 메시지를 살펴보기 힘듭니다. 페이지가 이동할 때 jQuery Mobile 페이지는 자동으로 로딩 메시지를 출력합니다. 만약 로딩 메시지를 강제로 보여주고 싶을 때는 아래의 코드처럼 showPageLoadingMsg() 메서드를 사용합니다.

FirstPage.html : $.mobile.showPageLoadingMsg() 메서드

							$(document).bind('pagecreate', function () {
								$('a').click(function () {

									// 페이지를 이동합니다.
									$.mobile.showPageLoadingMsg();

									// 기본 이벤트를 제거합니다.
									return false;
								});
							});
						


로딩 메시지에 원하는 글자를 입력하고 싶으면 아래의 코드처럼 LoadingMessage 속성에 문자열을 입력합니다. 아래의 코드에서는 로딩 메시지에 문자열 "이동합니다."를 입력합니다.

FirstPage.html : $.mobile.showPageLoadingMsg() 메서드

							$(document).bind('pagecreate', function () {
								$('a').click(function () {

									// 페이지를 이동합니다.
									$.mobile.loadingMessage = '이동합니다.';
									$.mobile.showPageLoadingMsg();

									// 기본 이벤트를 제거합니다.
									return false;
								});
							});
						


hidePageLoading() 메서드는 별도로 업급하지 않습니다. 같은 내용이므로 로딩 메시지를 5초 후에 닫는 예제를 직접 만들어 보세요. setTimeout() 함수를 사용하면 구현할 수 있습니다.