Examples of manipulation of windows
Switch between multiple windows thanks to swipe events
우리는 windows 들간에 이동을 하기 위해 swipe type events 를 사용합니다. Swipeleft event가 발생하면 next window 로 가도록 할 것이고 swiperight event 가 발생하면 이전 페이지로 돌아갈 겁니다. (Back button이랑 같죠)
Use the swipe events to switch between three 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>
</div>
</div>
<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>
<div data-role=page id=win3>
<div data-role=header>
<h1>Window 3</h1>
</div>
<div data-role=content>
<p> Window content 3 </p>
</div>
</div>
</body>
</html>
<script>
$("div:jqmData(role=page)").bind ("swipeleft", function (event)
{
var id = this.id;
var next; // id of the next visible window
if (id == "home") next = "win2";
else if (id == "win2") next = "win3";
if (next) $.mobile.changePage ($("#" + next),
{
transition : "slide"
});
});
$("div:jqmData(role=page)").bind ("swiperight", function (event)
{
var id = this.id;
var next; // id of the next visible window
if (id == "win2") next = "home";
else if (id == "win3") next = "win2";
if (next) $.mobile.changePage ($("#" + next),
{
transition : "slide",
reverse : true
});
});
</script>
tistory415_01.htmlCreate a window and display it dynamically
이제 이전 샘플 코드를 좀 더 발전시켜 볼까요. 이전 window에서 click 이 일어났을 때 dynamic 하게 window를 생성하고 display 하는게 이전 예제였다면 이제는 이전 window 에서 click 없이 dynamic 하게 window를 생성하고 display 하도록 하겠습니다.
Directly display a window created 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=#win2 id=link1 data-role=button> 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>";
$("body").append (html);
$("#home").bind ("pagecreate", function (event)
{
$.mobile.changePage ($("#win2"));
});
</script>
두번째 window의 HTML code 는 DOM tree 안에서 application이 시작할 때 insert 됩니다. 그리고나서 첫번째 window의 생성 마지막 단계에서(pagecreate event) 두번째 window 가 display 됩니다. 첫번째 window 의 create 를 기다리지 않는다면 두 윈도우간의 transition 은 발생하지 않을 겁니다.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 리스트에서 아이템 지우기 (0) | 2012.10.25 |
|---|---|
| 리스트에 아이템 insert 하기 (0) | 2012.10.24 |
| Ajax 로 리스트 Retrieve 하기 (0) | 2012.10.23 |
| HTML element 를 jQuery Mobile list 로 바꾸기 (0) | 2012.10.23 |
| 다이나믹하게 리스트 생성하기 (0) | 2012.10.22 |
| 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 |