jQuery Mobile에서는 두가지 방법으로 다른 페이지들과 연결을 하는데요.
첫번째는 <a> links attributes 를 사용해서 다른 페이지들과 연결을 하는 방법이 있구요.
두번째는 $.mobile object 로 정의된 changePatge() 메소드를 사용하는 방법이 있습니다.
이 두가지 방법과 관련해서 공부해 보겠습니다.
Manage the attributes of links
윈도우(페이지)에서 다른 윈도우로 transition 하는 것은 a link 를 통해서 이루어 집니다. 버튼 같은데에 이 a link를 적용해서 사용하거나 하죠. 이 link의 attributes들은 클릭 했을 때 어떤 동작이 일어나도록 합니다.
Link to an email address or phone number
아주 간단한 예제를 보죠. 우리의 애플리케이션 창에서 email, SMS, 전화걸기 등을 할 수 있도록 하겠습니다. <a>
link의 href
attribute 값을 지정함으로서 이러한 action들이 이루어 지도록 할 수 있습니다.
Links to an email address and telephone number
<!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> Talk to Eric Sarrion : </p>
<a href=mailto:ericsarrion@gmail.com>By mail</a><br /><br />
<a href=tel:0625570924>By phone</a><br /><br />
<a href=sms:0625570924>By SMS</a><br /><br />
</div>
</div>
</body>
convention11.html
Link to a window in the same HTML page
이건 이전부터 많이 사용하던 고전적인 방법이죠. 링크에 href를 넣는 겁니다. 새로운 윈도우에 대해서는 <div> element의 id 를 사용하구요. 아까 그 href에는 "#" character를 넣습니다. (eg href="#win2")
An HTML page containing two windows
<!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=#win2> Goto window 2 located in the same page </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>
convention12.html
Link to a window in another HTML page on the same server
다른 HTML 페이지가 같은 서버의 다른 위치에 있다면 jQuery Mobile 은 내부적으로 Ajax call 을 사용해서 다른 HTML 의 내용을 load 합니다. 두개의 파일은 반드시 같은 서버에 있어야 합니다. 그렇지 않으면 jQuery Mobile에 의한 Ajax call 이 제대로 작동되지 않을 겁니다.
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=index2.html> Goto window 2 located in index2.html </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 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>
(Firefox 브라우저에서 테스트 해 보세요.)
여기서 주의해야 할 점은 Ajax 에 의해 로드되는 페이지의 encoding을 가리키기 위해 <meta>
tag를 사용했다는 겁니다. 별도의 HTML 파일에 페이지가 있게 되면 jQuery Mobile에 의해 내부적으로 만들어지는 Ajax request는 디폴트로 UTF-8을 사용합니다. iso-8859-1
encoding을 사용하면 외국어를 사용할 때 활용될 수 있습니다.
링크를 클릭하면 두번째 HTML 페이지가 나타납니다.
어떻게 jQuery Mobile이 새로운 HTML 페이지를 로딩하는지를 이해하기 위해 firfox에 있는 Firebug를 사용해보도록 하겠습니다.
클릭하기 전의 HTML 은 아래와 같습니다.
클릭하고 난 후의 HTML 은 아래와 같습니다.
두번째 <div>
element (with id win2)가 HTML 페이지의 DOM tree elements의 한 부분이 되는 것을 볼 수 있습니다. 이것은 index2.html
page 안에 포함돼 있는 두번째 윈도우와 연관이있습니다. jQuery Mobile이 사용하는 Ajax technique들에 의해 내부적으로 일어난 일입니다. 그렇기 때문에 첫번째 클릭이 일어나면 내용을 표시하기 위해 약간의 시간이 더 걸리게 되는 겁니다. (서버로부터 새로운 HTML 코드를 새로 retrieve 하고 이것을 현재 표시돼 있는 HTML code에 insert 하기 위한 시간이죠.) 이제 새로운 HTML 코드는 final page로 서 로드 됩니다. 이제 이후에 일어나는 클릭에 대해서는 이러한 시간을 필요로 하지 않습니다. 그러니까 좀 더 빨리 화면이 표시 될 수 있겠죠.
두번째 HTML 페이지 내부에 여러개의 윈도우가 있다면 이 경우에는 첫번째 윈도우만 insert 되게 됩니다.
이제 다시 Back button을 사용해서 이전 페이지로 돌아가 보죠. Firebug에 표시되는 HTML code는 아래와 같습니다.
이제 DOM tree에서 두번째 윈도우가 사라진 걸 볼 수 있습니다. jQuery Mobile은 메모리 공간을 절약하기 위해 그 부분을 메모리로부터 remove 합니다. 만약 이 경우에도 메모리에 계속 저장돼 있게 하려면 <div>
element안에 data-dom-cache=true
attribute 를 넣어주면 됩니다.
Index2.html file containing the second window, which will be stored in memory despite its disappearance of the display
<!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>
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 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 알아보기 2 (0) | 2012.10.09 |
| 두개의 이벤트 하나로 다루기, jQuery Mobile built in Components (0) | 2012.10.04 |
| 컴포넌트에 이벤트 생성하고 사용하기 (0) | 2012.10.04 |
| 컴포넌트에 메소드 추가하기 (0) | 2012.10.04 |
| Ajax 로 컴포넌트 사용하기 (0) | 2012.10.03 |
| 컴포넌트에 파라미터 전달하기 (0) | 2012.10.03 |