반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

'jQuery Mobile'에 해당되는 글 161

  1. 2012.04.29 JQuery Mobile 훑어 보기

JQuery Mobile 훑어 보기

2012. 4. 29. 18:19 | Posted by 솔웅


제가 이번에 새로 가게되는 회사는 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?



* 만약 관심이 있으시면...

======= o ====== o ======= o ======= o ======


나름대로 성의있게 잘 정리된 문서 같습니다.

이 문서를 보고 그 다음에 JQuery Mobile 웹사이트에 가서 DOC를 훑어보고 출근해야겠습니다.

앞으로 JQuery Mobile 관련 글들을 많이 올리게 될 것 같네요.


반응형

Comment