jQuery Mobile 10

jQuery Mobile의 페이지 이동

jQuery Mobile의 위젯을 모두 살펴 보았습니다. 이전에 같은 HTML 페이지 안에서 id 속성을 이용해 jQuery Mobile 페이지를 이동하는 방법을 알아보았습니다. 여기서는 같은 HTML 페이지 내의 이동이 아니라 다른 파일의 페이지로 이동하는 방법을 살펴봅니다.
jQuery Mobile은 a 태그를 눌러 이동할 대상 페이지를 다음과 같이 세가지로 구분합니다.

  1. ◈ 내부 페이지: 같은 HTML 페이지 안에 존재하는 페이지
  2. ◈ 외부 페이지: 다른 도메인에 존재하는 페이지
  3. ◈ 로컬 페이지: 같은 도메인에 존재하는 페이지

jQuery Mobile은 a 태그를 클릭해 이동할 때 페이지의 종류에 따라 다른 형태로 페이지를 이동합니다. 지금부터 차이를 알아봅시다. 폴더를 생성하고 폴너 내부에 HTML 페이지를 두개 만듭니다.
ex. MainPage.html / OtherPage.html

우선, MainPage.html 파일입니다. jQuery Mobile을 사용하기 위한 구성 요소를 추가하고, 페이지를 만들었습니다. content 내부의 첫 번째 링크는 외부 페이지로 링크하는 것이고, 두 번째 링크는 내부 페이지로 링크합니다.

MainPage.html: HTML 페이지 구성

							<!DOCTYPE html>
							<html>
							<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>

								</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>Mobile</h1>
									</div>
									<div data-role="content">
										<a href="http://hanb.co.kr" data-role="button">External Link</a>
										<a href="31-42.htm" data-role="button">Local Link</a>
									</div>
								</div>
							</body>
							</html>
						


두 번째 페이지로 이동됐음을 화면에 표시하려고 두 번째 페이지를 구성했습니다. 이동하는 페이지에는 head 태그 안에 jQuery Mobile을 위한 구성을 별도로 하지 않았습니다.

OtherPage.html: HTML 페이지 구성

							<!DOCTYPE html>
							<html>
							<head>

							</head>
							<body>
								<div data-role="page" data-add-back-btn="true">
									<div data-role="header">
										<h1>Mobile</h1>
									</div>
									<div data-role="content">
										<h1>Hello Second Page</h1>
									</div>
								</body>
							</html>
						

실행하고 각 버튼을 누르면 페이지가 전환됩니다. 외부 페이지는 일반 링크로 취급되고, 로컬 페이지는 자동으로 Ajax가 수행돼 대상 HTML 페이지의 body 태그를 현재 HTML 페이지에 추가한 후 이동합니다.

로컬 페이지로 이동할 때 Ajax를 사용하고 싶지 않다면 rel 속성을 external로 입력합니다.

							<a href="OtherPage.html" data-role="button" rel="external">Local Link</a>
						

이렇게 입력하면 외부 페이지처럼 이동합니다.

이렇게, a 태그를 사용해서 웹 페이지로 이동하는 것 이외에도 메일 기능과 전화 기능을 사용할 수 있습니다. 아래의 예제 코드처럼 a 태그의 href 속성에 "mailto: 메일", 또는 "tel:전화번호"를 입력하면 스마트폰의 내장 메일 기능이나 전화 기능을 이용할 수 있습니다.

							 <a href="mailto:rintiantta@naver.com "data-role="button">Mail Link</a>
							<a href="mailto:rintiantta@naver.com?subject=Hello&body=World..!" data-role="button">Mail Link</a>
							<a href="tel:010-0000-0000" data-role="button">Phone Link</a>
						


href 속성에 mailto와 함께 입력할 수 있는 속성은 아래의 표와 같습니다.

mailto의 속성

mailto의 속성
속성 이름 설명
cc 참조
bcc 숨은 참조
subject 제목
body 내용

메일 버튼을 누르면 기본으로 저장된 메일 기능으로 이동합니다.

페이지 이동과 관련된 내용을 모두 살펴보았습니다. 물론, 코드로도 쉽게 페이지를 이동할 수 있습니다. 다음 페이지에서 알아봅니다.