모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다.
두 개의 페이지를 만들고 첫 번째 페이지에서 두 번째 페이지로 전환하는 예제이다. <div> 태그 대신 section과 header와 footer를 사용하였다. 개인적으로 블랙색상이 마음에 들어 테마 "b"로 설정하였다.
먼저 data-role을 page로 정의한 section 2개를 만든다.
<section id="page1" data-role="page">
</section>
<section id="page2" data-role="page">
</section>
첫 번째 페이지에서 <a href="" 에 삽(#)과 함께 페이지 id를 입력하면 그 페이지로 링크가 연결된다.
<a href="#page2">href="#page2">두번째 페이지로 이동</a>
아래는 전체 코드이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js" ></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js" ></script>
</head>
<body>
<section id="page1" data-role="page" data-theme="b">
<header data-role="header">
<h1>페이지 이동 1</h1>
</header>
<div class="content" data-role="content">
<p>첫번째 페이지</p>
<p>
<a href="#page2">두번째 페이지로 이동</a>
</p>
</div>
<footer data-role="footer">
<h2>주한길</h2>
</footer>
</section>
<section id="page2" data-role="page" data-theme="b">
<header data-role="header">
<h1>페이지 이동 2</h1>
</header>
<div class="content" data-role="content">
<p>두번째 페이지</p>
<p>
<a href="#page1">첫번째 페이지로 이동</a>
</p>
</div>
<footer data-role="footer">
<h2>주한길</h2>
</footer>
</section>
</body>
</html>
결과화면
위의 화면에서 링크를 클릭하면 아래의 페이지가 표시된다.
jQuery Mobile에서 알아둘 속성
data-role="page | header | content | footer"
data-theme="a | b | c | ..."
728x90
'■ Front-End ■ > jQuery Mobile' 카테고리의 다른 글
| [jQuery 모바일] 버튼을 그룹으로 묶어보자 (0) | 2023.02.11 |
|---|---|
| [jQuery 모바일] 다양한 모양의 버튼을 만들어보자 (0) | 2023.02.11 |
| [jQuery 모바일] 다이얼로그 화면으로 팝업 (0) | 2023.02.11 |
| [jQuery 모바일] 다양한 전환효과를 주며 페이지를 이동 (0) | 2023.02.11 |
| [jQuery 모바일] 안녕, 제이쿼리 모바일 (Hello, jQuery Mobile) (0) | 2023.02.11 |
댓글