4. Jquery Mobile 기초 – 페이지 이동

(1) 단일 HTML 모델

Jquert Mobile 은 하나의 DOM 구조를 유지한다. 모든 종류의 링크는 AJAX 로 처리되어

JQuery Object 안에 DOM을 추가하는 방식으로 동작한다. 결국 하나의 DOM 으로 동작한다.

(2) 외부 페이지

<a href = “” 의 대상은 여러가지가 있을 수 있다.

– javascript

– element ID

– html Page 이다.

동일 도메인의 다른 html PAge를 호출하는 경우 Ajax 통신을 통해 대상 html 의 DOM 오브젝트만

추출하면 메인 DOM 에 추가한다.

(3) 다른 웹앱 실행

완전히 다른 종류의 APP 을 실행하고자 하는 경우 , AJAX 방식을 사용하면 안된다.

기본적으로 Jquery-mobile 은 링크 테그를 AJX 로 처리하기 때문에 AJAX 를 사용하지 않도록

<a hfref=”” data-ajax=”false”> 을 선언하여 페이지를 호출해야 한다.

(4) 데이터 링크

– matilto : 메일 보내기

– tel : 전화 걸기

– geo : 지도 APP 열기

– Android 의 경우 암묵적 호출을 통해 개별적인 APP 도 호출이 가능하다.

<div data-role=”content”>
<a href=”mailto:blueskii@naver.com” data-role=”button”>Email Link</a>
<a href=”tel:010-123-1234″ data-role=”button”>Phone Link</a>
<a href=”geo:37.480349,126.882507?z=16″ data-role=”button”>Maps Link</a>
</div>

(5) 페이지 트랜지션

– data-transition 에 화면 전환 효과를 지정할 수 있다.

– 참조 :

<div data-role=”content”>
<a href=”#secondPage” data-role=”button” data-transition=”slide”>Slide</a>
<a href=”#secondPage” data-role=”button” data-transition=”slideup”>Slide Up</a>
<a href=”#secondPage” data-role=”button” data-transition=”slidedown”>Slide Down</a>
<a href=”#secondPage” data-role=”button” data-transition=”pop”>Pop</a>
<a href=”#secondPage” data-role=”button” data-transition=”fade”>Fade</a>
<a href=”#secondPage” data-role=”button” data-transition=”flip”>Flip</a>
<a href=”#secondPage” data-role=”button” data-transition=”slide” data-direction=”reverse”>Slide Reverse</a>
</div>

(7) Javasctipt 페이지 이동

참조 : http://jquerymobile.com/demos/1.2.0/#/demos/1.2.0/docs/api/methods.html

[예제] $ -> Jquery , $.mobile ->Jquery-mobile Tag , ChangePage -> 페이지 전환

Arg1 : 주소 , Arg2 : Option (http://jquerymobile.com/demos/1.2.0/#/demos/1.2.0/docs/api/methods.html -> $.mobile.changePage() 참조)

<script type=”text/javascript”>
function changePage() {
$.mobile.changePage(“06_changepage_second.html”, {
transition:”slideup”,
reverse:true
});
}

<div data-role=”content”>
<a href=”javascript:changePage()” data-role=”button”>Second Page</a>
</div>
</script>