$.mogile.changePage(toPage,options) method 로 페이지 이동하기
2012. 10. 13. 05:44 |
$.mogile.changePage(toPage,options) method
이전 글에서 HTML 페이지내에서 링크를 거는 간단한 방법을 보여드렸습니다. 이 링크는 두개의 윈도우간의 transition을 가능하게 하죠. 그 윈도우가 같은 HTML 페이지 안에 있던 아니면 다른 HTML 안에 있던 상관없습니다.
이 두개의 윈도우간 transition을 좀 manage 하고 싶은 경우에 어떻게 할까요? jQuery Mobile 은 이를 위해 $.mobile.changePage
(toPage, options)를 제공하고 있습니다. 이름에서 알 수 있듯이 이것은 $.mobile
object 상에 정의된 changePage
() 메소드 입니다.
toPage
parameter (required)는 여러분이 display 하기를 원하는 윈도우나 페이지를 말하는 겁니다. options
parameter (optional)는 이 윈도우를 display 하기 위해 사용되는 옵션들을 가리키는 객체입니다.
$.mobile.changePage (toPage, options) method parameters
|
Parameter |
Signification |
|
toPage |
Indicates
the window or the URL of the page you want displayed. |
|
options. |
One of the values slide, slideup, slidedown, pop, fade or flip, corresponding to the transition effect between the two windows (slide by default). See details below. |
|
options. |
If true, specifies to reverse the direction of the transition effect. Default false. |
|
options. |
Indicates whether the URL in the address bar should be changed to reflect the URL of the new page or window displayed (if changeHash is true, default), or must retain the old value (if changeHash is false). |
|
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). This option is only used if the argument toPage refers to a URL (the window is loaded by jQuery Mobile with Ajax). |
|
options. |
Boolean indicating to display the message saying that an HTML page is being loaded. The message is described in $.mobile.loadingMessage ("loading" by default). |
Possible values of the data-transition attribute
|
data-transition |
Signification |
|
slide |
Moving from one window to another by a horizontal movement from right to left. This is the default. |
|
slideup |
The second window appears at the bottom, gradually covering the first. |
|
slidedown |
The second window appears at the top, gradually covering the first. |
|
pop |
The second window is the center of the first, widening to cover it. |
|
fade |
The first window disappears by reducing its opacity (from 1 to 0), while the second appears through an increase in opacity (from 0 to 1). |
|
flip |
The second window appears with a rotation effect on a vertical axis, and by removing the first window. |
링크를 클릭했을 때 $.mobile.changePage ()과 jQuery Mobile 이 만든 href attribute 사이에는 어떤 일이 일어 날까요? 어떤게 더 우선일까요?
헛갈릴 필요가 없는게요 jQuery Mobile은 자바스크립트 코드에서 어떤 일이 발생할 때는 <a>
link의 href
attribute에 "#"
value를 할당하라고 하거든요. 링크 내의 href="#"는 jQuery Mobile에게 일반적인 프로세스로 진행하지 않을거라고 얘기하는 거거든요. (그러니까 이럴 경우에는 자바스크립트 내에 있는 우리의 코드가 우선으로 적용되게 되는 겁니다.)
$.mobile.changePage
(toPage, options) method를 사용한 아래 샘플들을 보세요.
Display a window in the same HTML page
하나의 HTML 페이지에 두개의 윈도우가 있다고 가정하죠. 첫번째 윈도우에서 두번째 윈도우로 움직이고 싶구요 이것을 $.mobile.changePage () method를 사용해서 링크를 관리할 겁니다. (링크의 href attribute를 사용하는 대신에요.)
Use the $. Mobile.changePage () method to display a window in the same HTML page
<!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>
<div data-role=page id=win2 data-add-back-btn=true>
<div data-role=header>
<h1>Window 2</h1>
</div>
<div data-role=content>
<p> Window content 2 </p>
</div>
</div>
</body>
</html>
<script>
$("#link1").bind ("click", function (event)
{
$.mobile.changePage ($("#win2"));
});
</script>
Window
2 에는 win2 라는 id 가 있습니다. 이것은 jQuery class 객체 $("#win2")로 다뤄질 수 있습니다. link attributes의 href="#" 와 click event (instead of
vclick)의 용도를 잘 생각해 보세요. (이 이벤트는 link 에 position 돼 있어서 click 을 사용한 겁니다. 자세한 내용은 이전 글을 보세요.)
Display a window in another HTML page
이제는 두번째 윈도우가 다른 HTML 페이지에 있을 경우입니다. 두번째 윈도우를 보기위해 $.mobile.changePage
() method를 사용합니다. 이 메소드의 첫번째 파라미터로 HTML 페이지의 URL 을 넣습니다.
Use the $.mobile.changePage () method to display a window in a new HTML page
<!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>
<div data-role=page id=win2 data-add-back-btn=true>
<div data-role=header>
<h1>Window 2</h1>
</div>
<div data-role=content>
<p> Window content 2 </p>
</div>
</div>
</body>
</html>
<script>
$("#link1").bind ("click", function (event)
{
$.mobile.changePage ("index2.html");
});
</script>
Index2.html file
<!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>
<div data-role=header>
<h1>Window 2</h1>
</div>
<div data-role=content>
<p> Window content 2</p>
</div>
</div>
</body>
</html>
결과는 이전 예제와 거의 같습니다. 첫번째 링크에서는 약간 다를겁니다. 왜냐하면 처음에는 그 HTML 페이지가 로드되지 않았을 것이기 때문에요. 아마 속도가 느리면 두번째 윈도우가 열릴 때까지 Loading 이라는 메세지가 뜰 겁니다.
만약 index2.html file안에 여러개의 윈도우가 있다면? 이럴 경우에는 첫번째 윈도우면 DOM 에 적재 됩니다. 다른 윈도우들은 접근하지 못하는 상황이 됩니다.
Transmit data when displaying the window
만약에 첫번째 윈도우가 두번째 윈도우에 어떤 정보를 전달해야 될 경우를 가정해 보죠. 이것은 $.mobile.changePage
() call의 data
option을 사용하게 됩니다. 이렇게 되면 두번째 윈도우에 파라미터를 전달할 수가 있습니다.
Use the $.mobile.changePage () method to transmit information
<!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>
$("#link1").bind ("click", function (event)
{
$.mobile.changePage ("action.php",
{
data : { fname : "Eric", lname : "Sarrion" }
});
});
</script>
Display the new window (action.php file)
<?
$fname = $_REQUEST["fname"];
$lname = $_REQUEST["lname"];
$fname= utf8_decode ($fname);
$lname= utf8_decode ($lname);
$html = "";
$html .= "<div data-role=page data-add-back-btn=true>";
$html .= "<div data-role=header>";
$html .= "<h1>Window 2</h1>";
$html .= "</div>";
$html .= "<div data-role=content>";
$html .= "<p>Window content 2</p>";
$html .= "<p>First name : $fname</p>";
$html .= "<p>Last name : $lname</p>";
$html .= "</div>";
$html .= "</div>";
echo utf8_encode ($html);
?>
아래 이미지를 보시면 두번째 윈도우에 파라미터가 display 되고 있습니다.
Modify the transition to display the window
지금 까지는 두 윈도우간 이동시 디폴트 transition 만 사용했습니다. jQuery Mobile은 $.mobile.changePage
() call에서 transition
option을 사용해서 특정 transition을 설정할 수 있는 기능을 제공합니다.
이전 예제에 transition
option을 추가 하겠습니다.
Use slideup to transition between the two windows
$.mobile.changePage ("action.php",
{
data : { fname : "Eric", lname : "Sarrion" },
transition : "slideup"
});
두번째 윈도우가 나타날 때 이전과는 다르게 나타날 겁니다.
Create a window and then dynamically display when a click occurs
HTML 안에 이미 만들어진 윈도우를 display 하는 대신에 링크를 클릭하면 $.mobile.changePage
() method로 dynamic 하게 새로운 윈도우를 만들어서 display 하고 싶습니다.
Creating window dynamically
<!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>
var html = "";
html += "<div data-role=page id=win2 data-add-back-btn=true>";
html += "<div data-role=header>";
html += "<h1>Window 2</h1>";
html += "</div>"
html += "<div data-role=content>";
html += "<p> Window content 2 </p>";
html += "</div>";
html += "</div>";
$(html).insertAfter ("#home");
$("#link1").bind ("click", function (event)
{
$.mobile.changePage ($("#win2"));
});
</script>
이럴 경우에 insertAfter
(selector) jQuery method를 사용해서 표현하시면 됩니다. (DOM 안에 첫번째 윈도우에 이어서 만들어진 윈도우가 삽입되겠죠. 그 다음에 링크를 누르면 그 새로운 윈도우가 display 되는 겁니다.)
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| window (화면) 들의 event 들 관리하기 (0) | 2012.10.20 |
|---|---|
| 다른 메소드들과 프로퍼티들 보기 (0) | 2012.10.19 |
| Dialog windows 사용하기 (0) | 2012.10.17 |
| 윈도우 생성 과정 이해하기 (0) | 2012.10.16 |
| $.mobile.loadPage (url, options) method 사용하기 (0) | 2012.10.15 |
| 링크 관련 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 |
| 컴포넌트에 메소드 추가하기 (0) | 2012.10.04 |