06. 페이지간 이동에 <a>태그 대신 jQuery Mobile에서 제공하는 $.mobile.changePage() 메소드 사용

Index

4. jQuery Mobile 시작 HTML 파일과 다른 HTML 페이지간 호출

5. jQuery Mobile 의 단일 HTML 모델에 대한 이해

6. 페이지간 이동에 <a>태그 대신 jQuery Mobile에서 제공하는 $.mobile.changePage() 메소드 사용

7. jQuery Mobile 에서 페이지 트랜지션

8. jQuery Mobile 페이지(data-role="page")

 

 

jQuery Mobile 에서 페이지간 이동은 <a> 태그 말고 jQuery Mobile에서 제공하는 메소드인 $.mobile.changePage() 메소드를 이용할 수 있다. $.mobile.changePage() 메소드는 <script> 태그 안에서 사용된다.

 

 

$.mobile.changePage( to [, options])

jQuery.mobile.changePage( to [, options])

 

to

페이지 ID 또는 페이지명이 온다.

 

options

json 객체({})로 작성한다.

속성값은 다음과 같다. 

allowSamePageTransition (default: false) 

By default, changePage() ignores requests to change to the current active page. Setting this option to true, allows the request to execute. Developers should note that some of the page transitions assume that the fromPage and toPage of a changePage request are different, so they may not animate as expected. Developers are responsible for either providing a proper transition, or turning it off for this specific case.

changeHash (default: true)

hash 데이터 업데이트 여부를 결정한다.

Decides if the hash in the location bar should be updated. This has the effect of creating a new browser history entry. It also means that, if set to false, the incoming page will replace the current page in the browser history, so the page from which the user is navigating away will not be reachable via the browser's "Back" button.

data (default: undefined)

URL페이지를 Ajax 요청하는 경우, 해당 페이지에 전달할 데이타

dataUrl (default: undefined)

The URL to use when updating the browser location upon changePage completion. If not specified, the value of the data-url attribute of the page element is used.

pageContainer (default: $.mobile.pageContainer)

Specifies the element that should contain the page.

reloadPage (default: false)

Forces a reload of a page, even if it is already in the DOM of the page container.
Used only when the 'to' argument of changePage() is a URL.

reverse (default: false)

Decides what direction the transition will run when showing the page.

role (default:undefined)

The data-role value to be used when displaying the page. By default this is undefined which means rely on the value of the @data-role attribute defined on the element.

showLoadMsg (default: true)

외부 페이지를 읽어들일때 로딩메시지를 표시할지 여부를 결정

transition (default: $.mobile.defaultPageTransition)

요청한 페이지를 표시할때 이동효과(애니메이션)를 선택한다.

type (default: "get")

changePage() 의 첫번째 인자가 URL인 경우 해당 페이지 요청방법("get", "post")을 결정한다.

 

 

예1) id가 "second" 인 페이지를 표시한다.

<div id="second" data-role="page> </div>

 

$.mobile.changePage("#second");

 

 

예2) 페이지명이 "second.php" 인 외부 파일을 읽어들여 표시한다.

$.mobile.changePage("second.php");

 

예3) 페이지가 변경될때 위로 올라가는 효과가 발생한다.

$.mobile.changePage("second.php", { transition: "slideup", changeHash: false });

 

예4) 페이지를 호출할때 id값이 "search"인 폼태그 객체의 값을 post 방식으로 전달한다.

<form id="search">

    <input type="text" name="choice" id="choice" value="jQuery Mobile" />

</form>

 

$.mobile.changePage("second.php", { type: "post", data: $("form#search").serialize(), changeHash: false });

 

예5) 페이지를 get 방식으로 호출할때 data 속성에 할당된 변수/값을 전달한다.

$.mobile.changePage("second.php", { data : { fname : "홍", lname : "길동" } });