jQuery mobile 을 이용하여 화면 프레임을 구성하면 비교적 깔끔하게 보이는 걸 알 수 있다.
먼저 구글에서 jQeury mobile 을 검색하여 https://jquerymobile.com/ 로 접속한다.
데모를 눌러서 가장 최신버전의 안정적 버전 데모를 눌러 jQuery mobile의 기본적인 기능을 익힌다.
index.html 파일을 아래와 같이 변경해보자.
header, content, footer 영역으로 나누어 구성한다.
header 와 footer 영역을 고정하는 것은 data-position="fixed" 를 추가하면 된다.
sub.html 파일에서 헤더 영역을 <div data-role="header" data-theme="f" data-position="fixed" data-add-back-btn="true">와 같이 수정해보면 백버튼이 생기고 누르면 뒤로 가기가 되는 걸 확인할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<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.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b" data-position="fixed">
<a href="#" data-icon="back">이전</a>
<h1>Header</h1>
<a href="#" data-icon="home" data-iconpos="notext" data-theme="b">홈</a>
</div>
<div data-role="content">
<ul data-role="listview" >
<li data-role="list-divider"> 내부 도메인</li>
<li><a href="sub.html" data-transition="slide">내부 페이지</a></li>
<li><a href="sub.html" data-rel="dialog" data-icon="grid">다이어로그 페이지</a></li>
<li data-role="list-divider"> 외부 도메인</li>
<li><a href="sub.html" rel="external" data-transition="slide">외부링크 사용 내부페이지 열기</a></li>
</ul>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
<h2>Footer</h2>
</div>
</div>
</body>
</html> |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<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.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header" data-theme="f" data-position="fixed">
<h1>Sub 페이지</h1>
</div>
<div data-role="content">
<h1>페이지 링크 연습</h1>
<p>다양한 종류의 링크 연습</p>
<a href="#" data-role="button" data-rel="back" data-icon="back" data-theme="a" >돌아가기</a>
</div>
<div data-role="footer" data-theme="d" data-position="fixed">
<h2>Footer</h2>
</div>
</div>
</body>
</html> |
