Construction of the window by the PHP server
이전 글에서 다룬 예제에서 조금 더 나아가서 디스플레이 될 윈도우를 생성하는 소스를 가지고 있는 (같은 서버 내에서) PHP page로 링크럴 걸 경우에 대해 알아보겠습니다.
Index.html file that contains the first window
<!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=action.php> Goto window 2 built with action.php </a>
</div>
</div>
</body>
</html>
action.php file constructing the second window
<?
$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>Window content 2</div>";
$html .= "</div>";
echo utf8_encode ($html);
?>
jQuery Mobile은 action.php file안에 include 된 두번째 윈도우를 retrieve 하기 위해 Ajax를 사용할 겁니다. 이를 위해 우리는 반드시 utf8_encode
()를 사용해야 합니다.
만약 server 코드가 여러개의 윈도우를 return 한다면 오직 첫번째 윈도우만 윈도우들의 stream 안에 놓여지게 될 겁니다.
action2.php
convention14.htmlLink to another HTML page located on another server
링크를 같은 서버가 아니라 다른 서버로 즉 href
attribute 가 external URL이 되는 경우도 있습니다. 이 경우는 full URL 을 사용하겠죠. (http://로 시작하는). 이 경우에는 이전의 페이지 대신에 새로운 페이지가 display 될 겁니다. (jQuery Mobile 의 windows flow 와 맞지 않게 됩니다.)
Link to http://amazon.com
<!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=http://amazon.com> Goto Amazon </a>
</div>
</div>
</body>
</html>
이 링크를 클릭하면 Amazon.com page가 open 될 겁니다.
Disable the loading of an HTML page with Ajax
디폴트로 href
attribute의 value는 jQuery Mobile이 만드는 Ajax call 에서는 같은 서버의 HTML page를 가리킵니다. 이렇게 해서 어플리케이션 윈도우의 flow 안에서 HTML 페이지들을 표시하게 되고 그래서 두번째 페이지에 있는 Back button을 누르면 다시 첫번째 페이지로 돌아갈 수 있게 됩니다.
It is possible, indicating certain attributes in the link, to change this behavior.
이 behavior를 변경하기 위해 링크의 특정 attribute들을 수정 할 수 있습니다.
- data-ajax="false"로 하면 Ajax call 을 만들지 않습니다. 새로운 HTML 페이지는 이전의 페이지들을 모두 lost 하게 되죠.
rel="external" 는 data-ajax="false" 와 비슷합니다.
target="a_value"라고하면 새로운 브라우저를 엽니다.
이런 메카니즘을 이용하는것은 아주 드믑니다. 왜냐하면 여러 페이지들을 Ajax 에 의해서 한 HTML page 처럼 사용하는 디폴트 방법이 훨씬 유용하기 때문입니다.
Dialog windows
여기서는 다른 HTML 페이지에서 layered window 가 정의 될 수 있다는 걸 보여 드리겠습니다.
Index.html file containing the first window
<!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=index2.html data-rel=dialog data-transition=pop>
Goto window 2 located in an another HTML page </a>
</div>
</div>
</body>
</html>
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>
<div data-role=header>
<h1>Window 2</h1>
</div>
<div data-role=content>
<p> Window content 2</p>
</div>
</div>
</body>
</html>
이 dialog window는 첫번째 윈도우에서 링크를 클릭하면 열립니다.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 다른 메소드들과 프로퍼티들 보기 (0) | 2012.10.19 |
|---|---|
| Dialog windows 사용하기 (0) | 2012.10.17 |
| 윈도우 생성 과정 이해하기 (0) | 2012.10.16 |
| $.mobile.loadPage (url, options) method 사용하기 (0) | 2012.10.15 |
| $.mogile.changePage(toPage,options) method 로 페이지 이동하기 (0) | 2012.10.13 |
| 링크 관련 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 |
| Ajax 로 컴포넌트 사용하기 (0) | 2012.10.03 |