JQuery Mobile Tutorial : Components 01 -Pages & Dialogs-
2012. 5. 3. 21:57 |
오늘은 jQuery Mobile DOC의 Components 부분을 정리하겠습니다.
Components 섹션에는 아래와 같은 6개의 주제가 있습니다.
-Pages & dialogs
- Toolbars
- Buttons
- Content formatting
- Form elements
- List views
그리고 첫번째 Pages & Dialog 부분은 아래 메뉴로 구성돼 있습니다.
- Anatomy of a page
Single page template
Multi-page template
- Page titles
- Linking pages
- Dialogs
- Prefetching @ caching pages
- Ajax, hashes & history
- Dynamically injection pages
- Scripting pages
- PhoneGap apps
- touchOverflow feature
- Theming pages
그럼 첫번째 주제인 Anatomy of a page를 정리하겠습니다.
JQuery Mobile은 back button history support, animated 된 화면 전환 그리고 Dialog 같은 페이지를 포현하기 위한 간단한 툴들과 함께 external page들의 자동 AJAX page loading 을 지원합니다.
Anatomy of a page
JQuery Mobile 의 "page" structure는 single 페이지나 페이지 내의 local internal linked "pages"를 모두 지원합니다.
이 모델의 goal은 개발자들이 웹사이트를 손쉽게 생성할 수 있도록 하는 겁니다. 간단하게 특별한 configuration 없이 보기 좋은 화면과 native 와 유사한 화면 등 일반 HTTP 가 할 수 없는 일을 JQuery Mobile이 지원하는 겁니다.
Mobile page structure
JQuery Mobile site는 반드시 HTML5의 doctype으로부터 시작해야 합니다. 이렇게 해야 이 프레임워크의 모든 기능을 사용하실 수 있습니다. (구형버전의 브라우저가 있는 구형 디바이스는 HTML5가 적용이 안되며 이 브라우저에서는 그냥 HTML5의 doctype을 무시하고 진행하게 됩니다. 그리고 다른 다양한 custom 속성들도 적용안되고 그냥 무시할 겁니다.)
head 에서는 jQuery,jQuery Mobile 그리고 Mobile theme CSS 를 참조합니다. 이것들을 참조하면서 JQuery Mobile 이 지원하는 모든 기능을 사용할 수 있게 됩니다. jQuery Mobile 1.1 은 1.6.4와 1.7.1 버전의 jQuery core를 모두 지원합니다. 가장 효과적인 퍼포먼스를 위해서는jQuery CDN을 link 해서 사용할 것을 권장합니다.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</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>
...content goes here...
</body>
</html>
Viewport meta tag
위의 소스를 보면 head 안에 meta viewport 태그가 있는 것을 보실 수 있을 겁니다. 이것은 브라우저의 page zoom과 dimension을 display 하기 위한 것입니다. 이것이 없으면 대부분의 모바일 브라우저에서는 900픽셀 정도의 virtual 페이지를 사용하게 될 겁니다. (이것은 데스크탑에는 어느정도 맞겠지만 모바일에서는 표현하기가 너무 클 럽니다.) 이 viewport 속성을 content="width=device-width, initial-scale=1"로 세팅하면 스크린의 크기에 맞춰서 width 가 display 될 겁니다.
<meta name="viewport" content="width=device-width, initial-scale=1">
이 세팅은 유저가 페이지를 zoom 하는 것을 막지는 않습니다. 이것과 관련해서 iOS에서는 작은 이슈가 있습니다. 이 viewport 세팅으로는 화면의 orientation이 바뀔 때 제대로 딱 맞게 동작을 하지 않습니다. 이 이슈는 조만간 해결 될 것이라고 기대합니다. 만약에 zoom 기능을 막으려면 viewport 에서 설정을 할 수가 있습니다.
Inside the body: Pages
<body> 태그 안에는 각각이 view 나 "page" 는 element를 통해서 정의 됩니다. (대개 div를 사용합니다.) 그리고 data-role="page"라는 속성을 사용합니다
. 페이지에서 사용할 수 있는 가능한 속성들을 보시려면 data-attribute reference를 보세요.
<div data-role="page">
...
</div>
"page" 콘테이너 안에는 일반적인 HTML markup 이 사용될 수 있습니다. 특히 jQuery Mobile에서는 "page" 내부에는 data-role이 header, content, footer로 정위된 div들이 들어가게 됩니다.
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
Putting it together: Basic single page template
위에서 설명한 모든 것을 모아 놓은 예제를 보여드리겠습니다. 이것은 여러분이 프로젝트를 하게 되면 반드시 사용해야 되는 표준 탬플릿 입니다.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</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>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
이 화면은 jQuery Mobile에서 제공하는 Single Page Template 화면입니다.
Multi-page template structure
하나의 HTML 문서는 여러개의 "pages"를 가지고 있을 수 있습니다. 이것은 data-role 을 page로 한 여러개의 div를 사용해서 함께 로드되게 됩니다. 각각의 'page' 단위들은 unique 한 id 가 필요합니다. (id="foo") 이것은 pages들 끼리 내부적으로 링크 연결되는데 사용됩니다. (href="foo") 그 링크가 클릭되면 프레임워크는 내부 page의 ID를 찾게 됩니다. 그리고 그 페이지를 보여줍니다.
아래에는 2개의 페이지가 있는 예제 입니다. 각각의 페이지에는 id가 있고 이 페이지들은 div를 이용해서 나눠져 있습니다. 여기서 사용되는 ID는 오직 internal page linking 지원에만 필요하다는 것을 염두에 두세요. 각각의 페이지들이 각각의 HTML 문서에 나눠져서 있다면 이 ID는 없어도 되는 option 입니다.
<body>
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Foo</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#bar">bar</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
<h1>Bar</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link
that references my ID is beeing clicked.</p>
<p><a href="#foo">Back to foo</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
위 화면은 jQuery Mobile 에서 제공하는 Multi page template 화면입니다.
PLEASE NOTE : 모든 Ajax 'pages'의 네비게이션 히스토리를 track 하기 위해 hash를 사용합니다. anchor로 가기 위한 deep link (index.html#foo)는 JQuery Mogile 의 page 기능에서는 현재 가능하지 않습니다. 왜냐하면 프레임워크는 그 ID로 content를 위한 scrolling의 native behavior 대신에 #foo 의 ID를 찾게 될 겁이기 때문입니다.
Conventiions, not requirements
위에 예제는 jQuery Mobile을 사용해 표준 웹 앱 만들기를 위해 권장되는 접근법에 대한 아웃라인 구조입니다. 이 프레임워크는 document structure가 아주
flexible 합니다. page, header, content, footer data- role emements 들은 optional 하고 기본 포맷과 구조를 제공하는데 아주 도움을 많이 줍
니다. auto-initialization 을 위해 사용되는 page wrapper는 single page documents에서는 option 입니다. 그렇기 때문에 특별히 필요한 markup
이 없습니다. custom layout을 사용하는 웹 페이지에서는 이런 모둔 구조적인 elements들은 생략될 수 있습니다. 그리고 Ajax 네비게이션과 모든 위젯들은 그냥 그들
나름대로의 표준구조로 이용 될 수 있습니다. multi page setup을 위해서는 markup안에 page wrapper가 있어야 된다는 것도 잊지 마세요.
여기까지가 Components 내의 Anatomy of a page, Single page template, Multi-page template 내용을 정리한 겁니다.
다음은 Page titles 섹션부터 정리하겠습니다.
'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 : Overview - 03 - (0) | 2012.05.02 |
| JQuery Mobile Tutorial : Overview - 02 - (0) | 2012.05.02 |
| JQuery Mobile Tutorial : Overview - 01 - (1) | 2012.05.02 |