jQuery Mobile Beta 3 released

어제 베타3 버젼이 나왔습니다.

위에 글에 의하면 이번버젼이 베타버젼의 마지막 릴리즈라고 합니다.

다음달쯤에는 RC1 버젼을 계획하고 있다고 하네요.

이제 정식 런칭할 시기가 얼마 남지 않은 것 같습니다. 멋지게 변모하길 기대하면서~^^

이번에 변경된 내용을 간단하게 살펴 보겠습니다.

1. pushState : ajax기반의 깔끔한 url

그동안 페이지 이동시 url에 보여지던 해쉬 페이지명이 사라졌습니다. 기술적으로는 history.replacestate() 함수를 이용하여 hashchange-based navigation model에서 pushState 기능을 제공한다고 되어있네요. 이 기능은 기존 브라우저들 뿐만아니라 안드로이드 허니콤과 곧 출시될 ISO5의 브라우저에서도 지원된다고 합니다. 이 기능이 불필요할때는  pushStateEnabled 글로벌 옵션의 설정을 false로 변경할 수 있는데,  아래와 같이 설정하여 기능을 끌수 있습니다.

$.mobile.pushStateEnabled = false;

2. beforechangepage 이벤트 : 동적 페이지

일반적으로 클릭이나  $.mobile.changePage() 함수를 통해 페이지 이동이 발생하게 되는데요.

동적인 페이지를 보여주기 위해 서버로부터 JSON이나 js객체와 같은 데이터를 받아서 처리해야 할 경우가 있습니다.

이때, 페이지 이벤트인 pagebeforechange, pagechange, pagechangefailed 이벤트를 이용해서 보다 유연하게 동작하도록 할 수 있습니다.(기존에 있던 페이지 이벤트의 이름이 변경되었네요) 이 이벤트들은 페이지의 부모 컨테이너인 $.mobile.pageContainer로 부터 발생하게 된다고 합니다. 

샘플 페이지에서 확인해 보실수 있습니다.

3. IOS5 : 고정 툴바와 페이지 전환

IOS5에서 overflow:auto 와 position:fixed 기능이 제대로 작동하면서 날라다니는 툴바와 페이지 전환시 스크롤이 튀는 현상이 없어졌다고 합니다.

이번 베타3에서 기본 스크롤 동작을 위해 글로벌 옵션으로 touchOverflowEnabled 기능을 추가했는데, 현재는 디폴트로 off 되어 있고 다음 버젼에서 사용가능하다고 하네요.

 

4. 애니메이션

키프레임 기반의 애니메이션 처리에 대한 논의가 있었나 봅니다. transition 기반으로 변경해보려고 시도했는데 그도 여의치 않았다고 하네요. 그래서, 시간이 좀더 걸릴것 같다고 합니다.

5. 기타

 - 페이지 이벤트의 이름 변경 및 changPage 에 fromPage옵션과 dataUrl옵션이 추가 되었습니다.

 - lastScroll을 복원하여 이전 페이지로 돌아갔을 때 최종 스크롤 부분을 기억하고 보여집니다.

 

현재 버젼을 사용하기 위한 CDN 입니다.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />

<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>

출처:http://jquerymobile.com/blog/2011/09/08/jquery-mobile-beta-3-released/