아래 Quick start guide에서는 몇가지 예제가 나옵니다.
이 Quick start guide를 하기전에 이 섹션에서 나온 이 예제들을 한 파일로 모아 놓은 샘플을 먼저 정리합니다.
이 코드와 그 결과물을 한번 보시고 튜토리얼을 보시고 다시 이 예제를 이렇게 저렇게 수정해 보시면 만이 도움이 될 겁니다.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Hello world</p>
<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>
<form>
<label for="slider-0">Input slider:</label>
<input type="range" name="slider" id="slider-0" value="25" min="0" max="100" />
</form>
<p>
<a href="#" data-role="button" data-icon="star">Star button</a> <p>
<a href="#" data-role="button" data-icon="star" data-theme="a">Button a</a> <p>
<a href="#" data-role="button" data-icon="star" data-theme="b">Button b</a> <p>
<a href="#" data-role="button" data-icon="star" data-theme="c">Button c</a> <p>
<a href="#" data-role="button" data-icon="star" data-theme="d">Button d</a> <p>
<a href="#" data-role="button" data-icon="star" data-theme="e">Button e</a> <p>
</div><!-- /content -->
<div data-role="footer">
<h1>Footer</h>
</div>
</div><!-- /page -->
</body>
<html>
Quick start guide
Getting Started with jQuery Mobile
JQuery Mobile은 Touch friendly UI widget들을 제공합니다. 그리고 AJAX navigation system을 제공해 animated 된 화면 전환효과를 줄 수 있도록 합니다.
Create a basic page template
익숙한 텍스트 에디터를 여시고 페이지 탬플릿을 복사해 넣으세요. 그것을 저장하신 후 웹 브라우저로 열어보세요. 이제 여러분은 모바일 개발자가 됐습니다.
이 탬플릿 안에는 무엇이 있는지 볼까요? head 안에 meta viewport 태그가 화면 width를 디바이스의 width 만큼 설정했습니다. 그 다음엔 css 파일과 java script 파일을 링크를 걸어 JQuery Mobile을 사용할 수 있도록 했습니다. JQuery Mobile 1.1. 은 JQuery core의 1.6.4 와 1.7.1 버전 과 같이 사용될 수 있습니다.
body에서는 div를 사용했고 data-role이 page로 설정됐습니다. 이것은 page를 감싸기 위해 사용된 겁니다. 그리고 header bar (data-role="header") 와 content region (data-role="content") 는 이 페이지 안에 추가 됐습니다. 이 data- 어트리뷰트는 JQuery Mobile에서 미리 만들어진 widget을 사용하기 위해 사용되는 기본 마크업 입니다.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<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>
Add your content
Content container안에 여러분은 standard HTML 엘리먼트를 넣을 수 있습니다. (headings, lists, paragraphs 등등). 그리고 JQuery Mobile stylesheet 다음에 추가로 스타일쉬트를 넣어서 custom layout을 생성할 수 있습니다.
Make a listview
JQuery Mobile에는 다양한 리스트뷰가 있습니다. data-role="listview"를 추가하기만 하면 사용하실 수 있습니다. 아래 listview 라는 role을 갖는 간단한 linked list가 있습니다. 여기에 data-inset="true"를 추가함으로서 inset 모듈처럼 보이도록 만들겁니다. 그리고 data-filter="true" 어트리뷰트를 넣어서 다이나믹 검색 필터를 추가했습니다.
<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>
Add a slider
JQuery Mobile Framework은 form elements 모두를 포함하고 있습니다. 이 엘리먼트들은 touch-friendly styled 위젯들로 자동적으로 구현해 줍니다. 아래에 HTML5에 새로 등장한 slider 를 사용하는 방법이 있습니다.
<form>
<label for="slider-0">Input slider:</label>
<input type="range" name="slider" id="slider-0" value="25" min="0" max="100" />
</form>
Make a button
버튼을 만드는 것은 몇가지 방법이 있습니다. 그 중에서 링크가 걸려있는 버튼을 한번 봅시다. link로 시작해서 data-role="button" 속성을 추가했습니다. 여기에 data-icon 속성을 사용해서 아이콘도 넣을 수 있습니다. 옵션으로 data-iconpos 속성을 이용해서 그 위치도 설정할 수 있습니다.
<a href="#" data-role="button" data-icon="star">Star button</a>
Play with theme swatches
JQuery Mobile에는 theme framework를 통해 26개 세트의 toolbar,content와 button color 를 지원합니다. 이것을 "swatch"라고 합니다. 간단히 data-theme="e" 속성을 추가하세요. 그리고 이 페이지의 아무 위젯이나 넣으세요. (page, header, list, input for the slider, 노란 button) a-e 까지 디폴트로 제공하는 theme을 넣어 보세요.
page에 이 theme swatch를 넣어보세요. 그리고 그 안에 있는 위젯들이 자동적으로 그것을 상속받는 것을 확인해 보세요. (header는 상속하지않고 디폴트인 a를 사용합니다.)
<a href="#" data-role="button" data-icon="star" data-theme="a">Button</a>
custom theme을 만들고 싶다면 drag and drop을 해서 만드는 ThemeRoller 를 사용하세요. 그리고 그 custom theme을 다운 받으시면 됩니다.
Go forth and build stuff
지금까지 보신건 그냥 수박 겉핥기 입니다. 더 많은 훌륭한 기능들이 JQuery Mobile 안에 있습니다. 이러한 기능들을 아주 간단히 이용할 수 있죠. linking pages, animated 페이지 전환, dialog 구현하기 등을 잘 보세요. 기본적으로 JQuery Mobile에서 제공하는 기능을 사용하기 위해 data- 속성을 잘 이용하세요.
좀 더 복잡한 부분으로는 global configuration, events, methods 등이 있습니다. 이것들을 하신 다음에 scripting pages, generating dynamic pages, building PhoneGap apps 등을 보세요.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| JQuery Mobile - Dynamically Injecting Pages (0) | 2012.06.28 |
|---|---|
| JQuery Mobile - Ajax, hashes & history 02 - (0) | 2012.06.27 |
| JQuery Mobile - Ajax, hashes & history 01 - (0) | 2012.06.26 |
| JQuery Mobile Tutorial : Components 05 - Prefetching & caching pages - (2) | 2012.05.16 |
| JQuery Mobile Tutorial : Components 04 - Dialogs - (0) | 2012.05.04 |
| JQuery Mobile Tutorial : Components 03 - Page transitions - (0) | 2012.05.04 |
| JQuery Mobile Tutorial : Components 02 (0) | 2012.05.04 |
| JQuery Mobile Tutorial : Components 01 -Pages & Dialogs- (0) | 2012.05.03 |
| JQuery Mobile Tutorial : Overview - 03 - (0) | 2012.05.02 |
| JQuery Mobile Tutorial : Overview - 01 - (1) | 2012.05.02 |