$.mobile.loadPage (url, options) method 는 $.mobile.changePage (toPage, options) method 에 의해 내부적으로(internally) 사용됩니다. 이것은 설정된 URL의 HTML 페이지를 수집(retrieves) 하고 메모리 내에 해당 윈도우를 load 합니다. 현재 보여지고 있는 윈도우는 바뀌지 않습니다. 그냥 다음 페이지를 내부적으로 다음 윈도우에 넣어서 메모리에 담아두고 있는거죠.
jQuery
Mobile은 우리가 이 메소드를 사용하면 현재 display 되는 HTML 과 Load 되는 HTML 을 각각 분리할 수 있도록 처리해 줍니다. 이 메소드를 사용하면 예를 들어 pre-load 윈도우들의 경우 유저의 요구가 있었을 때 기다리는 시간 없이 즉시 표시해 줄 수 있도록 해 줍니다. jQuery Mobile 은 data-prefetch
attribute를 통해서 이런 작업을 합니다.
$.mobile.loadPage (url, options) method parameters
|
Parameter |
Signification |
|
url |
Specifies the URL of the page you want to load into memory. |
|
options. |
jQuery class object indicating the element within which the new window will be displayed. Default $.mobile.pageContainer. |
|
options. |
The
data option is an object or a string, corresponding to transmitted
parameters. |
|
options. |
Method describing how to transmit parameters ("post" or "get"). The default is "get". |
|
options. |
If true, specifies to reload the window in the DOM, each viewing the page. Default false (the window is loaded into the DOM at the first display and is used as is). |
Simulating the data-prefetch attribute using the $.mobile.loadPage ()
링크 내에 data-prefetch
attribute 가 설정 되면 jQuery Mobile은 그 링크의 href
attribute 에 해당하는 HTML 페이지를 백그라운드로 로딩합니다. 이 작업을 하기 위해 jQuery Mobile은 $.mobile.loadPage
() method를 이용해서 메모리에 해당 윈도우를 저장하는 것이죠.
아래에 $.mobile.loadPage
() method를 사용해서 윈도우를 preload 하는 예제를 보시겠습니다.
Preload a window with $.mobile.loadPage () method
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<p> Window content 1 </p>
<a href=# id=link1> Goto window 2 </a>
</div>
</div>
</body>
</html>
<script>
$("#home").bind ("pagecreate", function ()
{
$.mobile.loadPage ("index2.html");
});
$("#link1").bind ("click", function (event)
{
$.mobile.changePage ("index2.html");
});
</script>
index2.html file containing the second window
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content=text/html;charset=iso-8859-1 />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=win2 data-add-back-btn=true data-dom-cache=true>
<div data-role=header>
<h1>Window 2</h1>
</div>
<div data-role=content>
<p> Window content 2</p>
</div>
</div>
</body>
</html>
convention181.html
두번째 윈도우는 index2.html 파일을 포함하게 됩니다. 일단 첫번째 윈도우가 생성되면 (pagecreate event) 곧바로 두번째 윈도우가 DOM tree 에 include 되겠죠.
일단 두번째 윈도우가 로드되면 유저가 링크를 클릭하면 $.mobile.changePage
() method를 사용해서 두번째 윈도우를 display 할 겁니다.
이 때 유저는 jQuery Mobile의 waiting message (Loading) 를 보지 않아도 됩니다. 왜냐하면 그 페이지가 이미 DOM 에 있으니까요. 두번째 윈도우에서 data-dom-cache=true
attribute를 세팅해서 DOM 내에 두번째 윈도우가 계속 머물러 있게 됩니다. 그러면 첫번째 윈도우에서 링크를 클릭하면 곧바로 두번째 윈도우가 display 되는 겁니다.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| content 부분 customize 하기 (0) | 2012.10.21 |
|---|---|
| window (화면) 들의 event 들 관리하기 (0) | 2012.10.20 |
| 다른 메소드들과 프로퍼티들 보기 (0) | 2012.10.19 |
| Dialog windows 사용하기 (0) | 2012.10.17 |
| 윈도우 생성 과정 이해하기 (0) | 2012.10.16 |
| $.mogile.changePage(toPage,options) method 로 페이지 이동하기 (0) | 2012.10.13 |
| 링크 관련 jQuery Mobile 내부 flow 알아보기 2 (0) | 2012.10.09 |
| 링크 관련 jQuery Mobile 내부 flow 알아보기 1 (0) | 2012.10.08 |
| 두개의 이벤트 하나로 다루기, jQuery Mobile built in Components (0) | 2012.10.04 |
| 컴포넌트에 이벤트 생성하고 사용하기 (0) | 2012.10.04 |