jQuery Mobile 페이지 이동

jQuery Mobile 5일차.

-jQuery Mobile 페이지 이동과 효과.

Page 이동

1. 기본 페이지 구조.

기본적으로 단일 페이지 구조에 최적화 되어 있다. 즉, 하나의 HTML 파일에 모든 콘텐츠를 정의하거나 페이지 내에 서로간의 영역을 구분해 교체하는 방식으로 페이지 이동을 처리한다. 이렇게 하면 전체 적으로 스타일을 일관되게 적용할 수 잇고 페이지 이동에 따른 애니메이션 효과를 원할히 처리할 수 있어 웹앱의 으로서의 특징을 살릴수 있다.

jQuery mobile application은 data-role="page" 속성이 지정된 영역을 하나의 페이지로 간주하고 이 영역 단위로 브라우저에 표시한다.

2. 내부 링크 페이지 이동.

기본 페이지 구조에서도 말했듯이, jQuery Mobile은 page영역을 하나의 화면으로 여긴다. 때문에 한페이지 정의 여러화면을 대상으로 내부적으로 이동할 수 있게 내부 링크를 지원한다.

내부 링크를 사용하기 위해서는 일단 하나의 HTML 파일에 여러 page를 정의해 놓고 서로 교체하는 방식으로 페이지 이동을 처리한다.

이동할 page를 식별하기 위해서 ID를 부여하고 이 값으로 링크를 연결하는 방식을 취한다.

3. 외부 링크 페이지 이동.

외부 링크란 건 내부 링크와는 달리 하나의 HTML에서 다른 HTML 파일로의 페이지 이동을 말한다. 솔직히 jQM이 단일 페이지에 특화되어 있어도 HTML파일 하나로는 솔직히 관리도 힘들고 구현하기도 너무 힘들다. JQM에서는 자동적으로 외부링크 이동을 Ajax 통신으로 처리를 하고, 통신의 결과를 기존 페이지에 통합하는 방식으로 처리해서 내부 링크 페이지 이동과 유사하게 동작하도록 만들어져 있단다.

<a href="xxx.html"> </a> 이런식으로 앵커태그를 사용하여, 기존 HTML에서의 링크 작업과 같은 방식으로 동작하게 된다. 물론 다른 HTML파일들은 JQM의 양식에 맞게 작성이 되어 있어야한다.

4. 외부 사이트 이동 과 링크 옵션

위에는 모드 동일 사이트 내의 링크들에 대한 이야기이고, 외부 사이트로의 링크의 경우에는 JQM의 페이지 이동 매커니즘이 적용안된다. JQM은 HTML 링크 타입을 모두 지원하며, Ajax 기반의 처리외의 방식을 지원하기 위해 몇개의 옵션을 지원한다.

rel="external" , data-ajax="false", target="_blank" 3가지 방법 모두 앵커 태그에 덧붙여서 사용을 하시면 되고, 이런 방법들은 페이지 제어권이 완전히 넘어가 새로고침되는 방식으로 동작을 하게 된다.

외부 사이트가 JQM의 방식을 따르지 않는다면 꼭 사용을 하여야하는 방법같다.

5. 기능 링크

기능 링크는 이메일이나 전화 번호에 대한 링크를 말한다. 다들 스마트폰이나 태블릿 pc 등에서 경험을 해보았겠지만 전화번호를 누르면 전화가 걸어진다 던지, 메일 주소를 누르면 메일을 쓸수 있도록 동작을 한다던지의 행동을 하게 만드는 것들이다. 이 기능들은 JQM이 지원하는게 아니라 모바일 기기들이 알아서 고맙게 지원해주는 기능들이다.

TIp.

1. 링크를 이용하여 page를 구성하면 자동으로 back 버튼이 header 부분에 생성이 된다. data-backbtn="false" 속성을 header에 추가하면 자동 생성이 안된다.

2. jQM은 페이지 이동시 기존 js 객체인 location.hash값도 함께 업데이트하므로 브라우저 자체 back 기능도 잘 동작이된다.

페이지 이동 API 와 애니메이션 효과.

1. 페이지 이동

스크립트 영역에서의 page 이동을 처리하기 위해 JQM에서는 mobile 객체의 changePage() 메서드를 제공해준다.

내부: $.mobile.changePage("#OtherPage","slide","reverse");

외부: $.mobile.changePage("#Other.html","slide","reverse");

2. 애니메이션 효과

Page Transition 이라고 하며 , 총 6개의 CSS 기반 Transition이 제공된다. 페이지 링크를 정의하는 애커 테그에 data-transition 속성을 지정하면 ok !!.

효과의 종류

slide: 왼쪽으로 미끄러지듯 이동 (default).

slideup: 위쪽으로 미끄러지듯 이동.

slidedown: 아래쪽으로 미끄러지듯 이동.

pop: 팝업 형태로 새 페이지가 두둥.

fade: 기존 페이지가 희미해지면서 새 페이지가 두둥.

flip: 새 페이지가 트리플 악셀 . 두둥.

반대 방향으로 Transition 효과를 주고 싶으면 data-direction="reverse" 속성을 주면 ok.