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

최근에 받은 트랙백

글 보관함

calendar

1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        


지난달 12일에 'jQuery Conference Asia 2012' 행사가 인크로스 주최로 열렸었습니다.


인크로스에서 초대권을 협찬해 주셔서 이 블로그 방문자 분 중 한분을 추첨해서 전달해 드렸는데요.


그 행사 동영상이 Vimeo 에 올라 왔습니다.


관심 있으신 분들은 이 동영상을 보시면 많은 도움이 될 겁니다.




jQuery Conference Asia 2012 - Session 1 from DaVinci on Vimeo.


jQuery Conference Asia 2012 - Session 2 from DaVinci on Vimeo.


jQuery Conference Asia 2012 - Session 3 from DaVinci on Vimeo.


jQuery Conference Asia 2012 - Session 4 from DaVinci on Vimeo.


jQuery Conference Asia 2012 - Session 5 from DaVinci on Vimeo.


jQuery Conference Asia 2012 - Session 7 from DaVinci on Vimeo.


jQuery Conference Asia 2012 - Session 8 from DaVinci on Vimeo.


jQuery Conference Asia 2012 - Session 9 from DaVinci on Vimeo.


jQuery Conference Asia 2012 - Session 10 from DaVinci on Vimeo.


jQuery Conference Asia 2012 from Lanio on Vimeo.


저작자 표시 비영리 동일 조건 변경 허락
신고


안녕하세요?



지난 주 월요일(10/29) 부터 11/06 (화) 까지 진행된 jQuery Conference Asia 2012 이벤트가 마무리 됐습니다.



참여해 주신분께 감사드립니다.


추첨은 제 직장 동료인 Akshay 가 해 주었습니다.


점심시간에 짬을 내서 추첨 해 준 Akshay 에게도 감사드립니다.






당첨되신 분은 조연성님입니다.


조연성님께는 이번 jQuery Conference Asia 2012 행사에 무료로 참가할 수 있는 기회를 드립니다.

제가 이번 행사를 주최하는 인크로스의 담당자 분께 조연성님의 이메일 주소를 알려드리면 담당자분이 Contact 을 할 겁니다.


아쉽게 추첨되지 못하신 분들께는 죄송합니다.

저도 행사에 참가하지 못해서 행사 후에 관련 자료를 받기로 했거든요.


이번에 참여하셨다가 추첨되지 못하신 분 들께도 이 자료 공유해 드릴께요.





이번 jQuery Conference Asia 2012 행사는 11월 12일 월요일에 서울 역삼동 르네상스 호텔에서 개최됩니다.


자세한 소식은 위 링크를 따라 가시거나 아래 파일을 다운 받아서 열어보시면 알 수 있습니다.


join_auth.html


관심있는 분들의 많은 참여 바랍니다.

감사합니다.



저작자 표시 비영리 동일 조건 변경 허락
신고


jQuery Conference Asia 2012



벌써 11월 이군요.

여기는 허리케인 Sandy 가 지나간 뒤에 아주 많은 피해가 보도되고 있네요.


지금 사는 로드아일랜드 지역은 다행히 거의 피해가 없지만 몇달 전까지 살던 뉴저지 Bergen County 지역에 피해가 아주 심한 것 같습니다.


거기 계신 한인분들 모두 별 탈 없으셨으면 합니다.


이제 11일 남았네요.

jQuery Conference Asia 2012  행사가 11월 12일에 하니까요.


미국에서 프로젝트 진행하면서 회의 때 이곳 친구들이 알려주는 이런 저런 정보와 기술들을 배우는게 아주 재밌습니다.


그리고 그런 정보와 기술들을 최대한 이 블로그에 정리를 해서 되도록 많은 분들과 공유를 하려고 노력하고 있습니다.


이번에 인크로스사에서 미국의 유명한 분들을 초대해서 최신기술과 전망에 대한 콘퍼런스를 진행한다고 하니 여건되시는 분들 많은 참여 추천 드립니다.


일자는 2012년 11월 12일 08:30~18시까지이고 장소는 서울 르네상스 호텔 3층 다이아몬드 홀 입니다.


참가 등록은 www.jqueryasia.com 으로 하시면 되구요.


감사하게도 인크로스사에서 저희 블로그 이용자 분들 중 한분께 초청장을 협찬하시기로 하셨습니다.


필요하신 분은 제게 이메일(douggy.park@yahoo.com) 을 주시면 추첨해서 한분께 초청장을 드리겠습니다.


자세한 사항은 여기 를 참조해 주세요.


아래는 자세한 행사 내용 입니다.

join_auth.html










저작자 표시 비영리 동일 조건 변경 허락
신고


인크로스사에서 11월 12일 jQuery Conference 2012 Asia 라는 행사를 진행한답니다.

공식 홈페이지도 있는데요.

http://www.jqueryasia.com/


위 링크 따라 가시면 자세한 사항을 보실 수 있을 겁니다.


참가비가 있는 행사네요. 35만원이요.


좀 부담이 되는 돈일 수 있겠네요.


회사에서 보내 주실 수 있는 분들은 좋은 기회일 겁니다.

개인적으로라도 저 금액을 지불하고 참가하고 싶으신 분들도 계실 수 있겠죠.


인크로스 사에서 홍보 부탁 메일이 와서 아래 그 내용을 포스팅할께요.

관심있는 분들의 참여 바랍니다.








저작자 표시 비영리 동일 조건 변경 허락
신고


10 handy jQuery mobile tips and snippets to get you started



새로운 기술은 가끔 처음 시작하는게 제일 어려울 수가 있는법이죠.

그런분들을 위해서 여기 jQuery Mobile library와 관련된 팁이나 트릭 그리고 관련된 간단한 샘플들을 여기 모아봤습니다.

처음 시작하시는 분들이 아실 필요가 없는 부분들은 과감히 건너 뛰었어요.


1. A full basic page

가장 기본이 되는 페이지의 full mark-up 입니다. 간단한 single page를 표현하시려면 여기 있는 코드가 가장 기본이 되는 겁니다.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
 <div data-role="header">
  <h1>Header</h1>
 </div>
 <div data-role="content">
  <p>Content goes here</p>
 </div>
 <div data-role="footer">
  <h4>Footer</h4>
 </div>
</div>
</body>
</html>



2. Where to add traditional jQuery calls


처음 시작할 때 모바일 플러그인이 trigger 되기 전에 뭔가 해야 되는게 있다는 걸 알게 됐습니다. 기본 jQuery 를 사용하고 싶었거든요.

그러면 모바일 plug-in을 참조하기 이전에 jQuery call을 넣어주시면 됩니다. 그러면 jQuery Mobile 보다 jQuery command가 먼저 실행이 되겠죠. 아래에 그 패턴이 있습니다.


<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script> $(document).ready(function() { // Your jQuery commands go here before the mobile reference }); </script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>




3. Disable AJAX navigation for all links at once


AJAX navigation은 아주 멋지죠. 그런데 가끔 이 기능을 disable 시킬 필요가 있을 때가 있어요. 이럴 때 AJAX navigation을 사용하지 말도록 할 수 가 있습니다.

헤더부분에서 jQuery mobile library를 reference 한 후 에 아래 코딩을 추가해 보세요.

jQuery mobile library가 먼저 load 되 있어야 합니다. 그러니까 반드시 그 다음에 넣어야 합니다.


<script> $(document).ready(function() { // disable ajax nav $.mobile.ajaxLinksEnabled = false; }); </script>




4. Stop some key items from being truncated


jQuery Mobile library의 기능 중 하나는 내용이 길면 알아서 UI element에 맞춰서 잘라준다는 겁니다.

그런데 두가지 경우에 이런 기능이 좀 불편해 질 때가 있더라구요. 첫번째는 full text를 보고 싶을 때구요. 두번째는 footer text 입니다. 이런것들에서 내용이 잘려서 "..."로 표시되면 좀 그렇죠.

이 두가지 경우에는 디폴트로 아래와 같은 CSS를 오버라이드 해 주세요.


For list items:

body .ui-li .ui-li-desc {
 white-space: normal;
 }

For footer content:

body .ui-footer .ui-title {
 white-space: normal;
 }

5. Use media queries to target devices

작업을 하면서 구현해야 할 것 중에 하나가 각 device 별로 어떻게 따로따로 CSS를 구현하느냐 입니다. 예를 들어 아이패드에서는 2개의 컬럼 레이아웃을 쓰고 싶고 스마트폰에서는 한개의 컬럼 레이아웃을 써야 할 때가 있잖아요.

이것을 구현하려면 media queries 를 사용하시면 됩니다.

이 미디어쿼리를 이용해서 각 스크린 사이즈 별 CSS를 구현하실 수 있습니다. 


아래 링크를 보시면 두개의 아주 훌륭한 아티클이 있습니다. 참조하세요.


6. Target platforms with jQuery


특정 디바이스에 특정 CSS를 실행해야 할 때가 있죠. 그리고 오직 jQuery 만 사용해야 될 떄가 있습니다. 여기 some code from Snipplr에서 가져온 코드가 있는데요. jQuery 로 유저 디바이스에 맞게 jQuery의 segment portion들을 쉽게 사용할 수 있도록 하는 방법입니다.

 var deviceAgent = navigator.userAgent.toLowerCase();
 var agentID = deviceAgent.match(/(iphone|ipod|ipad|android)/);
 if(agentID.indexOf("iphone")>=0){
  alert("iphone");
 }
 if(agentID.indexOf("ipod")>=0){
  alert("ipod");
 }
 if(agentID.indexOf("ipad")>=0){
  alert("ipad");
 }
 if(agentID.indexOf("android")>=0){
  alert("android");
 }

7. Use full paths for the targets of form action attributes

One quirk of the library seems to be its difficulty in finding target pages to post forms to… that is, unless you use the full path from the root of the website.

For example, I’ve found that this form tag never finds its target:

<form action=" form-handler.php " method="get" >

Whereas a full path like this works as expected:

<form action="/current-directory/form-handler.php" method="get" >

Also, be sure that the results from the form handler produce a full, valid jQuery mobile page, as shown in tip #1.


8. Create pop-up dialogs

jQuery Mobile library의 좋은 기능 중 하나는 built-in pop-up하고 dialog box 기능이죠. 정말 간단하고 쉽게 이용할 수 있습니다. 기본적으로 data-rel="dialog" 를 붙여주면 됩니다.

두가지만 기억하세요. 첫번째로 target page는 반드시 full-blown jQuery mobile page라야 합니다.

두번째는 제대로 작동을 하도록 하려면은 full separate page라야 한다는 겁니다.

<a href="#pop.html" data-rel="dialog">Pop up!</a> 

9. A “Cancel” + “Save” button combo


두개의 버튼을 나란히 넣어야 할 때가 있죠? 이럴 경우는 fieldset tag를 쓰시면 편리합니다.

그리고 두개의 버튼을 다른 theme으로 표현할 수도 있습니다.

이 코드는 여기에 있는겁니다. 자주 이용하기 때문에 저같은 경우는 따로 보관해 뒀다가 쓰고 있습니다.

<fieldset>
 <div><button type="submit" data-theme="c">Cancel</button></div>
 <div><button type="submit" data-theme="b">Submit</button></div>
</fieldset>

10. Create a column structure on your own


다양한 디바이스를 위한 single page structure에 대해 위에서 미디어 쿼리와 columns를 사용하는 방법을 위에서 알려 드렸죠.

다행히 웹 개발자들이 컬럼들을 어떻게 사용하는지에 대해 이전에 많이 만들어 놨었습니다. 이 기능들을 미디어쿼리와 같이 섞어쓰면 편하겠죠. 우리는 다양한 스크린사이즈에 맞게 다양한 structure를 쉽게 setup 할 수 있습니다.


Position Is Everything 은 이것을 하는데 가장 쉬운 방법을 알려 줍니다.







저작자 표시 비영리 동일 조건 변경 허락
신고


jQuery Mobile이 아니고 jQuery UI 에서 Touch 이벤트를 지원한다고 합니다. 


jQuery UI Touch Punch


Touch Event Support for jQuery UI


아이패드 (iPad), 아이폰 (iPhone), 안드로이드 (Android) 와 기타 touch-enabled 모바일 디바이스에서 테스트 됐음


jQuery UI Touch Punch는 jQuery UI 유저 인터페이스 라이브러리를 사용하는 site에서 touch event를 사용할 수 있도록 한 하찮은것입니다.


Visit the official Touch Punch website.


현재 jQuery UI 유저 인터페이스 라이브러리는 touch event를 사용하는 것을 지원하지 않고 있습니다. 그 의미는 데스크탑에서 그럴듯하게 잘 만들어서 테스트 된 것도 touch-enabled 모바일 디바이스에서는 별로 유용하지 않다는 것을 말합니다. 왜냐하면 jQuery UI 는 마우스 이벤트 (mouseover, mousemove and mouseout)를 listen 하고 있지 touch event(touchstart, touchmove and touchend)를 Listen 하고 있지 않기 때문입니다.


그래서 jQuery UI Touch Punch가 나온 겁니다.Touch Punch는 simulated events를 사용해서 mouse event를 touch event로 매핑합니다. 간단히 페이지에 script를 include 시키면 touch 이벤트가 각각의 상응하는 mouse 이벤트로 변환될 겁니다.


제가 말했듯이 Touch Punch는 하찮은 것입니다. 그냥 jQuery UI의 몇개의 core 기능을 touch event로 매핑하는  duck punches 일 뿐입니다. Touch Punch는 jQuery UI의 interaction과 widget 을 implement 해서 사용합니다. 그래도 사용하시려고 하면 잘 작동을 안하고 오류가 나고 할 겁니다. 이러한 이슈들을 어떻게 알아내고 어떻게 고칠지에 대해 아래 글을 통해서 미리 익혀 두세요.


이 코드는 MIT나 GPL 버전 두개의 licenced 돼 있습니다. 그렇기 때문에 Free 입니다. 수정하시고 배포하셔도 됩니다. 다만 이 Touch Punch를 패키지나 플러그인으로 사용하시면 Original software에서 밝혀 주시고 또  Touch Punch website에 링크도 걸어 주세요.



Using Touch Punch is as easy as 1, 2…


아래대로 하시면 jQuery UI 앱에서 touch 이벤트를 사용하실 수 있습니다.:

  1. Include jQuery and jQuery UI on your page.

    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
    
  2. Include Touch Punch after jQuery UI and before its first use.

    Please note that if you are using jQuery UI's components, Touch Punch must be included after jquery.ui.mouse.js, as Touch Punch modifies its behavior.

    <script src="jquery.ui.touch-punch.min.js"></script>
    
  3. There is no 3. Just use jQuery UI as expected and watch it work at the touch of a finger.

    <script>$('#widget').draggable();</script>
    

Tested on iPad, iPhone, Android and other touch-enabled mobile devices.


Download the Code

jQuery UI Touch Punch plugin 은 아래 두개의 버전이 있습니다. 다운받아서 사용하세요.



저작자 표시 비영리 동일 조건 변경 허락
신고

JQuery Mobile 훑어 보기

2012.04.30 10: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 관련 글들을 많이 올리게 될 것 같네요.


저작자 표시 비영리 동일 조건 변경 허락
신고
이전 1 다음