안녕하세요!!
이전 포스팅에서 jQuery Mobile의 페이지에 대해서 간략히 설명을 드렸었습니다. 내용이 너무 길어질듯해서 이렇게 단락을 잘라서 설명을 드리는점 양해 바랍니다.
아래 설명하는 내용은 페이지 이동입니다. 일단 소스를 보면서 설명드립니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>나의 모바일 홈페이지</h1>
</div>
<div data-role="content">
<p>첫 번째 페이지입니다!!</p>
<a href="#pagetwo">두 번째 페이지</a>
</div>
<div data-role="footer">
<h1>Copyright by makand123. All Rights Reserved.</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>나의 모바일 홈페이지</h1>
</div>
<div data-role="content">
<p>두 번째 페이지입니다!!</p>
<a href="#pageone">첫 번째 페이지</a>
</div>
<div data-role="footer">
<h1>Copyright by makand123. All Rights Reserved.</h1>
</div>
</div>
</body>
</html>
// 위 구문을 보면 <body>...</body> 의 내용안에 <div data-role="page" id="pageone">과 <div data-role="page" id="pagetwo"> 이렇게 두개의 내용이 들어 있는것을 확인할 수 있습니다. 그리고 안의 내용은 header, content, footer 로 이루어져 있습니다. 페이지 이동은 보통 두 개의 파일로 이루어 지는데 그것과 다르게 하나의 파일에 두개의 페이지 내용을 틀리게 하여 적용하였습니다. 중요한 부분은 위 구문에서 붉은 글씨로 되어 있는 부분입니다. id에 pageone, pagetwo 라는 값을 넣어서 href 로 이동을 시키게 됩니다. 화면은 아래 이미지 처럼 나옵니다.
// 첫 번째 페이지에서 "두 번째 페이지" 버튼을 클릭하면 위와 같이 두 번째 페이지로 넘어오게 되며, 마찬가지로 두 번째 페이지에서 "첫번째 페이지" 버튼을 클릭하면 다시 첫 번째 페이지로 이동합니다.
두 번째 설명드릴 내용은 팝업창 입니다. 간단하게 모바일 화면에서 팝업창이 뜨는것을 볼 수 있습니다. 아래 소스를 보며 설명드리겠습니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>나의 모바일 홈페이지</h1>
</div>
<div data-role="content">
<p>환영합니다!!</p>
<a href="#pagetwo" data-rel="dialog">팝업창</a>
</div>
<div data-role="footer">
<h1>Copyright by makand123. All Rights Reserved.</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>상단</h1>
</div>
<div data-role="content">
<p>이곳에 내용을 적는 부분입니다.</p>
<a href="#pageone">첫 페이지로</a>
</div>
<div data-role="footer">
<h1>하단</h1>
</div>
</div>
</body>
</html>
// 팝업도 마찬가지로 한 페이지에서 이루어 집니다. 그리고 위 구문중 붉은 글씨로 되어 있는 곳을 보면 data-rel="dialog" 라고 되어 있는것을 확인할 수 있는데 dialog라는 부분이 사실상 팝업창을 띄워주는 역할을 하게 됩니다. 보여지는 화면은 아래와 같습니다.
이처럼 간단한 구문을 이용하여 페이지를 컨트롤할 수 있는것이 jQuery Mobile 의 장점입니다. 직접 소스를 만들어서 모바일 화면에서 테스트 해보시기 바랍니다.
그럼 오늘도 즐거운 하루 보내시고 즐거운 프로그래밍 되시길 바랍니다.
'jQuery Mobile > JM Tutorial' 카테고리의 다른 글
| jQuery Mobile 툴바(toolbars) (0) | 2013.11.11 |
|---|---|
| jQuery Mobile 버튼 (0) | 2013.10.31 |
| jQuery Mobile 페이지 (0) | 2013.10.25 |
| jQuery Mobile 인스톨(Install) (0) | 2013.10.21 |
| jQuery Mobile 소개 (2) | 2013.10.18 |
