참고
이번 튜토리얼은 아래의 자료를 참고로 작성되었다.
- http://jquerymobile.com/demos (공식레퍼런스)
- http://jquerymobile.com/demos/1.1.0/docs/about/getting-started.html (Quick start)
- http://codiqa.com/ (live로 jQuery mobile의 UI를 제작할 수 있는 웹서비스)
예제
아래는 jQuery mobile의 기본골격을 보여준다.
<!-- jQuery Mobile은 HTML5에 최적화 되어 있기 때문에 doctype으로 HTML5를 사용한다 -->
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<!-- 모바일 디바이스를 위한 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery mobile에서 사용하는 css, javascript. 아래 3개의 리소스를 로드해야 함 -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<!-- data-role는 jQuery mobile에서 해당 엘리먼트가 어떤 UI인지를 지정한다. 아래 page는 이 엘리먼트가 가장 큰 단위인 페이지임을 의미한다. -->
<div data-role="page">
<!-- 제목과 글로벌 메뉴를 표시하는 엘리먼트를 지정 -->
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<!-- 컨텐츠가 표시되는 영역을 지정 -->
<div data-role="content">
<p>Hello world</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
jQuery Mobile의 기본
doctype은 HTML5의 것을 사용한다.
<!DOCTYPE html>
모바일 환경을 위한 화면 정책을 지정한다. 사용자가 zoom 기능을 이용하지 못하게 하고, 장치의 스크린폭의 사이즈에 따라서 화면을 표시한다.
<meta name="viewport" content="width=device-width, initial-scale=1">
head에 다음과 같은 파일을 인클루드 한다. 이 파일은 http://jquerymobile.com/download/ 를 통해서 다운받을수도 있고, CDN을 이용할수도 있다.
- jquery.mobile.css
- jquery.mobile.js
- jquery.js
모든 페이지는 body 태그 안쪽에 속성이 data-role="page"인 엘리먼트로 시작된다.
data-role="content" 인 엘리먼트 안에 컨텐츠를 추가한다. 예를들어 list-view를 추가하고 싶다면 아래와 같이 한다.
<div data-role="content"> <ul data-role="listview" data-inset="true" data-filter="true"> <li><a href="#">Acura</a></li> <li><a href="#">Audi</a></li> <li><a href="#">BMW</a></li> <li><a href="#">Cadillac</a></li> <li><a href="#">Ferrari</a></li> </ul> </div>
아래와 같은 UI가 표시된다.
jQuery mobile은 form 엘리먼트를 모바일에 맞는 UI로 자동으로 바꿔준다. 아래의 예제는 form 엘리먼트를 웹페이지에 삽입하는 방법을 보여준다.
<form> <label for="slider-0">Input slider:</label> <input type="range" name="slider" id="slider-0" value="25" min="0" max="100" /> </form>
버튼을 추가하려면 아래와 a 태그를 사용하고 data-role의 값으로 button을 부여한다. 버튼에 아이콘을 부가하려면 data-icon 속성을 이용한다.
<a href="#" data-role="button" data-icon="star">Star button</a>
