제가 이번에 새로 가게되는 회사는 Kurogo와 JQuery Mobile 을 기반으로 개발한다고 하네요.
JQuery Mobile 보다는 Sencha Touch 쪽으로 공부를 해 왔는데..
일단 JQuery Mobile 쪽으로 Focus를 좀 맞춰야 겠습니다.
JQuery Mobile을 소개하는 파워포인트가 있어서 그 문서를 한번 훑어 보겠습니다.
원본은 여기에 있습니다.
JQuery Mobile Framework 소개
Mark Dalgleish - @markdalgleish
* JQuery Mobile 이란?
- JQuery를 사용하는 Mobile framework (obviously).
- 강력한 cross-browser, cross-platform.
- Native 와 유사한 웹 앱 생성
- 마크업 기반 코딩, 최소화 한 코딩
- Focused on progressive enhancement, graceful degradation.
* Target Platform
- iOS, Android, Windows Mobile
- Blackberry, Symbian, webOS
- Firefox Mobile (Fennec), Opera Mobile / Mini
- Meego, bada, Maemo...
- Phonegap!
* Basic Page Elements
- data-role 어트리뷰트와 DIV를 사용해 정의하는 Custom elements
- 최소한 하나의 data-role="page" element 필요
- 페이지 안에 최소 한개의 data-role = "content" 엘리먼트 필요
- 클래스들은 자동적으로 추가 됨
- Form elements 와 lists 들은 자동적으로 업데이트가 적용 됨
* Basic Page Markup
<!doctype html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="jquery.mobile.css" />
<script src="jquery.js"></script>
<script src="jquery.mobile.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
* Virtual Pages
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div data-role="content">
<a href="#page2" data-role="button">Go to Page 2</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div data-role="content">
<a href="#page1" data-role="button">Go to Page 1</a>
</div>
</div>
* Separate Pages with AJAX Loading<div data-role="page">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div data-role="content">
<a href="page2.html" data-role="button">Go to Page 2</a>
</div>
</div>
* Fixed Footer Navigation
<div data-role="footer" data-id="myfooter" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="footer.html" class="ui-btn-active">One</a></li>
<li><a href="footer2.html">Two</a></li>
<li><a href="footer3.html">Three</a></li>
</ul>
</div>
</div>
// Second page
<div data-role="footer" data-id="myfooter" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="footer.html">One</a></li>
<li><a href="footer2.html" class="ui-btn-active">Two</a></li>
<li><a href="footer3.html">Three</a></li>
</ul>
</div>
</div>
// Third page
<div data-role="footer" data-id="myfooter" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="footer.html">One</a></li>
<li><a href="footer2.html">Two</a></li>
<li><a href="footer3.html" class="ui-btn-active">Three</a></li>
</ul>
</div>
</div>
* AJAX Loading In Depth
- 모든 페이지가 JQuery Mobile 표준에 맞아야 한다.
- AJAX를 지원하려면 transition과 함께 DOM에 맞게 페이지들이 구성되어야 한다. 그렇지 않으면 일반 페이지가 로드된다.
- 페이지 로드가 실패하면 유저는 friendly 한 에러메세지를 받게 된다.
- 같은 도메인의 모바일페이지가 아닌 페이지로 링크할 때는 rel="external"을 이용한다.
- 다른 도메인으로 링크되는것은 자동적으로 감지되고 일반적인 로드와 동일하게 작업을 수행한다.
* Form Elements
- 일반적인 Form element들은 모바일 usability에 따라 자동적으로 그에 맞게끔 적용된다.
- 모든 컨트롤들은 Native와 마찬가지로 gracefully degrade 된다.
- 디폴트 세팅은 필요하면개발자가 바꿀 수 있다.
* Form Element Markup
<div data-role="fieldcontain">
<label for="textbox">Textbox:</label>
<input type="text" name="textbox" id="textbox" value="" />
</div>
<div data-role="fieldcontain">
<label for="textarea">Textarea:</label>
<textarea name="textarea" id="textarea" value=""></textarea>
</div>
<div data-role="fieldcontain">
<label for="search">Search:</label>
<input type="search" name="search" id="search" value="" />
</div>
<div data-role="fieldcontain">
<label for="slider">Slider:</label>
<select name="slider" id="slider" data-role="slider">
<option value="0">Off</option>
<option value="1">On</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="range">Range:</label>
<input type="range" name="range" value="0" min="0" max="10" />
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Checklist:</legend>
<input type="checkbox" name="checkbox1" id="checkbox1" />
<label for="checkbox1">HTML</label>
<input type="checkbox" name="checkbox2" id="checkbox2" />
<label for="checkbox2">CSS</label>
<input type="checkbox" name="checkbox3" id="checkbox3" />
<label for="checkbox3">JavaScript</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Horizontal Checklist:</legend>
<input type="checkbox" name="checkbox4" id="checkbox4" />
<label for="checkbox4">Tea</label>
<input type="checkbox" name="checkbox5" id="checkbox5" />
<label for="checkbox5">Coffee</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Radio Buttons:</legend>
<input type="radio" name="radio1" id="radio1a" value="a" />
<label for="radio1a">HTML5</label>
<input type="radio" name="radio1" id="radio1b" value="b" />
<label for="radio1b">Flash</label>
<input type="radio" name="radio1" id="radio1c" value="c" />
<label for="radio1c">Silverlight</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Horizontal Radio Buttons:</legend>
<input type="radio" name="radio2" id="radio2a" value="a" />
<label for="radio2a">Tea</label>
<input type="radio" name="radio2" id="radio2b" value="b" />
<label for="radio2b">Coffee</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="select1" class="select">Standard Select:</label>
<select name="select1" id="select1">
<option value="1">HTML5</option>
<option value="2">Flash</option>
<option value="3">Silverlight</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="select2" class="select">Custom Select:</label>
<select name="select2" id="select2" data-native-menu="false">
<option value="1">HTML5</option>
<option value="2">Flash</option>
<option value="3">Silverlight</option>
</select>
</div>
<button name="button" name="button">Button</button>
<button type="submit" name="submit">Submit</button>
* List View Markup
<h4>Basic List View</h4>
<ul data-role="listview" data-inset="true">
<li>HTML</li>
<li>JavaScript</li>
<li>CSS</li>
</ul>
<h4>Linked List View</h4>
<ul data-role="listview" data-inset="true">
<li><a href="target.html">HTML</a></li>
<li><a href="target.html">JavaScript</a></li>
<li><a href="target.html">CSS</a></li>
</ul>
<h4>Ordered List View</h4>
<ol data-role="listview" data-inset="true">
<li><a href="target.html">HTML</a></li>
<li><a href="target.html">JavaScript</a></li>
<li><a href="target.html">CSS</a></li>
</ol>
<h4>Nested List View</h4>
<ul data-role="listview" data-inset="true">
<li>
iOS
<ul data-role="listview" data-inset="true">
<li><a href="target.html">v2.2.1</a></li>
<li><a href="target.html">v3.1.3, v3.2</a></li>
<li><a href="target.html">v4.0</a></li>
</ul>
</li>
<li>
Android
<ul data-role="listview" data-inset="true">
<li><a href="target.html">v1.5, v1.6</a></li>
<li><a href="target.html">v2.1</a></li>
<li><a href="target.html">v2.2</a></li>
</ul>
</li>
<li>
Windows Mobile
<ul data-role="listview" data-inset="true">
<li><a href="target.html">v6.1</a></li>
<li><a href="target.html">v6.5.1</a></li>
<li><a href="target.html">v7.0</a></li>
</ul>
</li>
</ul>
<h4>Searchable List View</h4>
<ul data-role="listview" data-inset="true" data-filter="true">
<li><a href="target.html">HTML</a></li>
<li><a href="target.html">JavaScript</a></li>
<li><a href="target.html">CSS</a></li>
</ul>
<h4>Split Button List View</h4>
<ul data-role="listview" data-inset="true">
<li>
<a href="target.html">HTML</a>
<a href="options.html" data-icon="gear">Options</a>
</li>
<li>
<a href="target.html">JavaScript</a>
<a href="options.html" data-icon="gear">Options</a>
</li>
<li>
<a href="target.html">CSS</a>
<a href="options.html" data-icon="gear">Options</a>
</li>
</ul>
<h4>Thumbnail List View</h4>
<ul data-role="listview">
<li>
<a href="target.html">
<img src="thumbnail1.jpg" />
<h3>Miles Davis</h3>
<p>Kind of Blue<p>
</a>
</li>
<li>
<a href="target.html">
<img src="thumbnail2.jpg" />
<h3>Cannonball Adderley</h3>
<p>Somethin' Else</p>
</a>
</li>
<li>
<a href="target.html">
<img src="thumbnail3.jpg" />
<h3>Charles Mingus</h3>
<p>The Black Saint and the Sinner Lady</p>
</a>
</li>
</ul>
* So where's the JavaScript?
Oh yeah, I almost forgot.
* New Events
- User events: tap, taphold, swipe, swipeleft, swiperight, orientationchange, scrollstart, scrollstop.
- Page events: pagebeforeshow, pagebeforehide, pageshow, pagehide.
- $(document).ready()?: pagebeforecreate, pagecreate.
* New Functions!
- $.mobile.changePage(options)
- $.fn.listview(), $.fn.selectmenu() etc...
- $.fn.listview('refresh'), $.fn.selectmenu('refresh') etc...
- $.fn.jqmData(), $.fn.jqmRemoveData(), and $.fn.jqmHasData()
- $.mobile.pageLoading(bool)
Show or, if bool is false, hide loading indicator. - $.mobile.silentScroll(y)
- $.mobile.media() - Run cross-browser media queries!
* Responsive Layout HTML Classes
- .portrait and .landscape classes.
- .min-width-x and .max-width-x classes
(x == 320, 480, 768 and 1024) - Create custom width breakpoints with $.mobile.addResolutionBreakpoints()
* Now What?
- 이 문서에서 JQuery Mobile을 모두 커버하지는 못했습니다.
- jquerymobile.com 로 가서 전체 Doc 문서를 보세요.
- 샘플들을 카피하고 직접 이것 저것 시도하세요.
- 트위터에서 @jquerymobile 를 팔로우해서 최신소식을 계속 들으세요.
- 이 문서는 markdalgleish.com/presentations/jquerymobile 에서 보실 수 있습니다.
* 만약 관심이 있으시면...
- 이 프리젠테이션은 저의 새 JQuery 플러그인인 Fathom.js 로 만들어 졌습니다.
- 코드는 GitHub at github.com/markdalgleish/fathom 에서 받으실 수 있습니다.
- 프로젝트 페이지는 markdalgleish.com/projects/fathom 에서 확인하세요.
- 한번 해 보시고 저한테 조언을 보내 주세요.
======= o ====== o ======= o ======= o ======
나름대로 성의있게 잘 정리된 문서 같습니다.
이 문서를 보고 그 다음에 JQuery Mobile 웹사이트에 가서 DOC를 훑어보고 출근해야겠습니다.
앞으로 JQuery Mobile 관련 글들을 많이 올리게 될 것 같네요.
'jQuery Mobile > JQM News' 카테고리의 다른 글
| jQuery Conference Asia 2012 동영상 (0) | 2012.12.12 |
|---|---|
| jQuery Conference Asia 2012 이벤트 당첨자 발표 (0) | 2012.11.07 |
| [행사홍보] jQuery Conference Asia 2012 (0) | 2012.10.31 |
| [행사홍보] jQuery Conference Asia 2012 - Nov 12, 2012 (0) | 2012.10.24 |
| jQuery Mobile 시작하시는 분들을 위한 10가지 팁과 예제들... (0) | 2012.07.30 |
| jQuery UI Touch Punch - jQuery UI 에서 Touch 를 지원합니다.- (0) | 2012.05.31 |