Display a dialog window
$.mobile.changePage
() method는 overlapping windows를 display 하기 위해서 사용 될 수도 있습니다. 이 overlay 윈도우는 그 작업을 위해 data-role="dialog" attribute 를 가지고 있어야 합니다.
Use the $.mobile.changePage () to display a layered 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=# id=link1> Goto window 2 </a>
</div>
</div>
<div data-role=dialog id=win2>
<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"), { transition : "pop" });
});
</script>
tistory410_01.html
Close a dialog window
dialog 윈도우를 닫는것은 대개 jQuery Mobile에 의해 추가된 close button 을 클릭해서 닫게 됩니다. 그 외에도 윈도우의 content 안에 버튼을 넣어서 이 closing 메카니즘을 만들어서 사용해도 상관없습니다. 그러려면 button 을 처리하는 어떤 과정이 필요합니다. 윈도우에 연관된 <div>에서 dialog
("close") method를 call 하는 부분을 코딩해야 합니다.
Use a close button in the dialog 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=# id=link1> Goto window 2 </a>
</div>
</div>
<div data-role=dialog id=win2>
<div data-role=header>
<h1>Window 2</h1>
</div>
<div data-role=content>
<p> Window content 2 </p>
<a id=close data-role=button> Close window </a>
</div>
</div>
</body>
</html>
<script>
$("#link1").bind ("click", function (event)
{
$.mobile.changePage ($("#win2"), { transition : "pop" });
});
$("#close").bind ("click", function (event)
{
$("#win2").dialog ("close");
});
</script>
tistory410_02.html
Remove the close button in the dialog window
마지막으로 overlay window의 title bar 안에 jQuery Mobile 에 의해 add 된 close 버튼을 어떻게 remove 하는지에 대해 알아보겠습니다. 이것은 title bar에 있는 <a> element 와 관련이 있습니다. 그리고 selector $(this).find ("div: jqmData (role=header) a")를 통해서 접근될 수 있습니다. (만약 이것이 overlay window 라면요.)
우리는 이 element를 jQUery Mobile에 의해 overlay window 가 transforme 되기 위한 HTML 코드 이후에 접근할 수 있습니다. 이 때 dialogcreate event 와 견결 됩니다. 왜냐하면 overlay window 는 jQuery Mobile standard component dialog에 의해 handle 되기 때문입니다.
So we write:
Remove the close button in the dialog 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=#win2 id=link1> Goto window 2 </a>
</div>
</div>
<div data-role=dialog id=win2>
<div data-role=header>
<h1>Window 2</h1>
</div>
<div data-role=content>
<p> Window content 2 </p>
</div>
</div>
</body>
</html>
<script>
$("#win2").bind ("dialogcreate", function ()
{
$(this).find ("div:jqmData(role=header) a").hide ();
});
</script>
dialog window 도 (다른 윈도우들과 마찬가지로) pagecreate event를 받습니다. 하지만 이 이벤트는 dialogcreate event 이전에 받게 됩니다. jQuery Mobile 에 의해 HTML 이 transform 된것을 inform 하지 않는 거죠. 그래서
dialogcreate event 를 사용해야 되는 겁니다.
이제 dialog 윈도우는 더 이상 close button 이 없습니다.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 다이나믹하게 리스트 생성하기 (0) | 2012.10.22 |
|---|---|
| window를 생성하는 예제들... (0) | 2012.10.21 |
| content 부분 customize 하기 (0) | 2012.10.21 |
| window (화면) 들의 event 들 관리하기 (0) | 2012.10.20 |
| 다른 메소드들과 프로퍼티들 보기 (0) | 2012.10.19 |
| 윈도우 생성 과정 이해하기 (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 내부 flow 알아보기 1 (0) | 2012.10.08 |