jQuery Mobile 홈페이지
1. 설정하기
Head 태그 내부에 위와 같이 삽입한다.
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- 모바일 디바이스 설정 -->
<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><!-- 제이쿼리모바일 연결 -->
2. 전체 페이지 소스
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제이쿼리 모바일</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- 모바일 디바이스 설정 -->
<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>
<div data-role="page"><!-- page -->
<div data-role="header">
<h2>Title</h2>
<a href="#leftpanel" class="ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">leftpanel</a>
</div><!--header -->
<div data-role="panel" id="leftpanel" data-position="left" data-display="overlay" data-theme="a" class="ui-panel ui-panel-position-left ui-panel-display-overlay ui-body-a ui-panel-animate ui-panel-open">
<div class="ui-panel-inner">
<a data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-notext" style="margin-top:-10px; margin-left:-10px;margin-bottom:20px;"></a>
<ul data-role="listview" class="ui-listview">
<li class="ui-first-child">
<a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">블로그</a>
</li>
<li>
<a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">menu2</a>
</li>
<li>
<a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">menu3</a>
</li>
</ul>
</div><!-- ui-panel-inner -->
</div><!-- end of menu-->
<div data-role="content"> 내용
</div><!-- end of content -->
<div data-role="footer">footer</div><!- footer -->
</div><!-- end of page -->
</body>
</html>
3. 페이지 구조
<div> 태그로 블록을 설정하고 data-role 로 역할을 설정한다.
1) Page 안에 data-role을 header, panel content, footer 로 구성
2) panel은 모바일 메뉴를 설정하기 위한 숨겨진 패널이다.
header 내부에 위와 같이 a 태그를 설정하고 href 에 숨겨질 패널의 ID를 설정(#leftpanel)한다.
4. 결과
