Manage events on windows
jQuery Mobile은 windows와 연관된 event system을 셋업합니다. 예를 들어 윈도우 생성(pagecreate) 과 연계된 이벤트를 handle 하는 것 뿐만 아니라 윈도우의 display 나 disappearance (pageshow
and pagehide)와 관련된 이벤트를 처리하는 것도 가능합니다.
Creating the window
윈도우는 display 되어야 할 때 jQuery Mobile 에 의해서 생성됩니다. 윈도우를 create 하려면 initial HTML code를 스크린에 display 될 다른 HTML code로 바꾸어야 합니다. (특히 윈도우의 다른 콤포넌트마다 다른 style을 적용하는 CSS 를 추가하는 경우는 더 그렇죠.). 이 creation process는 오직 한번만 perform 됩니다. 첫번째 window 가 display 될 때죠.
Events
associated with the creation of windows
|
Name
|
Signification
|
|
pagebeforecreate
|
Triggered
in the first display of the window, before the process of creating
the window.
|
|
pagecreate
|
Triggered
at the end of the process of creating the window. The internal
components of the window (radio buttons, check boxes, lists,
etc..) are processed independently of the reception of the
pagecreate event on the window, and thus may have been created or
not (at this time there).
|
|
pageinit
|
Triggered
after the pagecreate event when all components of the window was
created.
|
이 이벤트의 sequence를 이해하시려면 아래 간단한 샘플을 보세요.
Events
associated with the creation of 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>
<input type=range id=slider1 min=1 max=100 />
<label for=check1>checkbox</label>
<input type=checkbox id=check1 />
<a href=#win2 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>
$("#check1").live ("checkboxradiocreate", function (event)
{
alert ("checkbox created");
});
$("#slider1").live ("slidercreate", function (event)
{
alert ("slider created");
});
$("div:jqmData(role=page)").bind ("pagebeforecreate", function (event)
{
alert ("pagebeforecreate id=" + this.id);
});
$("div:jqmData(role=page)").bind ("pagecreate", function (event)
{
alert ("pagecreate id=" + this.id);
});
$("div:jqmData(role=page)").bind ("pageinit", function (event)
{
alert ("pageinit id=" + this.id);
});
</script>
tistory413_01.html
여기에 두개의 window를 정의했습니다. 두번째는 첫번째 화면에서 링크를 클릭하면 display 됩니다. 이 두 윈도우의 creation 시 event를 가로챕니다. 각 이벤트는 id 이름을 화면이 표시되기 전에 alert로 보여줄 겁니다.
만약에 두번째 window 가 external file 이라면 이것과 관련된 pagebeforecreate, pagecreate and pageinit events 들은 window가 display 될 때마다 trigger 됩니다. (첫번째에만 trigger 되는 것이 아니라 매번 display 될 때마다요. 다만 그 윈도우가 data-dom-cache="true"
attribute를 사용하고 있다면 이미 DOM 에 있으니까 저 이벤트들이 trigger 되지는 않겠죠.)
추가로 slidercreate and checkboxradiocreate events는 pageinit event 바로 직전에 trigger 됩니다. 그러니까 window의 모든 컴포넌트들이 생성된 다음이 되겠죠.
Loading of the window by Ajax
그 window가 아직 DOM 에 있지 않으면 jQuery Mobile은 HTML 안의 Ajax를 사용해서 그 화면을 로딩합니다. 그려면 윈도우가 로드되기 전에 pagebeforeload event 가 발생하게 되죠. 그리고 로딩이 성공적으로 이뤄지면 pageload event 가 발생할 겁니다. 실패하면 pageloadfailed
event 가 발생하구요.
이 이벤트들은 event
and data
parameters 들을 전달 받습니다. data
parameter 는 Ajax 에 의해 로드 된 파일의 full URL 이 있는 url
property를 가지고 있습니다.
Events
associated with loading windows by Ajax
|
Name
|
Signification
|
|
pagebeforeload
|
Triggered
before loading the window by Ajax. The window is located in an
external file, which may or may not be loaded successfully.
|
|
pageload
|
Triggered
when loading the file containing the window was successfully
completed. The window was created in the DOM tree (the pagecreate
event is fired before pageload).
|
|
pageloadfailed
|
Triggered
when loading the file containing the window failed. No window was
inserted in the DOM tree.
|
이 이벤트들의 sequence를 이해하기 위해 여러 HTML 파일에 window 들을 생성하겠습니다.
Window
1 is the first window displayed, located in the index.html
file.
Window
2 is located in the original HTML page (index.html) following
Window 1.
Window
3 is located in the existing file index3.html.
Window
4 is located in the existing file index4.html. It has the
data-dom-cache="true"
attribute indicating to keep it in the DOM (instead of the Window
3).
Window
5 is located in the file index5.html nonexistent. A loading
error occurs when it is displayed.
Window 1 은 다른 4개의 window들에 access 할 수 있는 link들을 가지고 있습니다. 그 중 한가지라도 event 가 발생하면 그리고 pagebeforecreate, pagecreate and pageinit
events들이 trigger 되면 메세지를 display 할 겁니다.
Events
for creating windows by Ajax (index.html file)
<!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 (into the DOM) </a>
<br /><br />
<a href=index3.html>
Goto Window 3 in index3.html (data-dom-cache=false) </a>
<br /><br />
<a href=index4.html>
Goto Window 4 in index4.html (data-dom-cache=true) </a>
<br /><br />
<a href=index5.html> Goto Window 5 (index5.html nonexistent) </a>
<br /><br />
</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>
$(document).bind ("pagebeforeload", function (event, data)
{
alert ("pagebeforeload data.url = " + data.url);
});
$(document).bind ("pageload", function (event, data)
{
alert ("pageload data.url = " + data.url);
});
$(document).bind ("pageloadfailed", function (event, data)
{
alert ("pageloadfailed data.url = " + data.url);
});
$("div:jqmData(role=page)").live ("pagebeforecreate", function (event)
{
alert ("pagebeforecreate id=" + this.id);
});
$("div:jqmData(role=page)").live ("pagecreate", function (event)
{
alert ("pagecreate id=" + this.id);
});
$("div:jqmData(role=page)").live ("pageinit", function (event)
{
alert ("pageinit id=" + this.id);
});
</script>
Index3.html
file containing the window 3
<!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=win3 data-add-back-btn=true>
<div data-role=header>
<h1>Window 3</h1>
</div>
<div data-role=content>
<p> Window content 3 </p>
</div>
</div>
</body>
</html>
Index4.html
file containing the window 4
<!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=win4 data-add-back-btn=true data-dom-cache=true>
<div data-role=header>
<h1>Window 4</h1>
</div>
<div data-role=content>
<p> Window content 4 </p>
</div>
</div>
</body>
</html>
tistory413_02d.zip
Index5.html 파일은 없습니다. 그 링크를 클릭하면 로딩시 Ajax 에러를 의도적으로 발생시키기 위해서 입니다.
home window 와 다른 window들을 navigating 하게 되면 이벤트들이 발생합니다. 만약 그 window가 이미 메모리(DOM) 에 로드돼 있다면 이 이벤트들은(pagebeforeload, pageload
and pageloadfailed) 더 이상 trigger 되지 않습니다.
Remove the window in the DOM
메모리에서 window들에 의해 점유되는 공간을 줄이기 위해 jQuery Mobile은 더이상 그 페이지가 visible 되지 않게 되면 Ajax 에 의해 로드 된 그 window들을 자동적으로 remove 하게 됩니다. ( attribute-dom-cache=true 가 설정돼 있는 윈도우는 계속 남아 있게 됩니다.)
메모리에서 그 window를 remove 하기 전에 pageremove event가 trigger 되고 그리고 나서 DOM 에서 remove 될 겁니다 . 이 pageremove event 에 의해 해당 윈도우가 remove 되지 않도록 하려면 event.preventDefault
()를 call 하시면 됩니다. pageremove event 가 진행될 때 이 함수가 call 되지 않으면 그 window는 DOM tree에서 remove 되게 됩니다. 만약 그 페이지가 나중에 반드시 다시 display 되어야 한다면 그 때 jQuery Mobile 에 의해 다른 Ajax call 이 만들어 질 겁니다.
Prohibit
the removal of the windows in memory loaded by Ajax
$("div:jqmData(role=page)").live ("pageremove", function (event)
{
alert ("pageremove id=" + this.id);
event.preventDefault ();
});
Window display
한번 그 window가 create 되면 이제 display 될 준비가 끝난겁니다. 한번만 create 됐지만 그 window는 여러번 display 되고 hidden 되고 할 수 있습니다. (그 window 가 external file 이 아니고 data-dom-cache
attribute 가 "false" 일 경우는 제외하구요.)
Events
associated with the display of windows
|
Nom
|
Signification
|
|
pagebeforeshow
|
Triggered
when the window will be displayed (it is not yet visible).
|
|
pageshow
|
Triggered
when the window is displayed (visible).
|
|
pagebeforehide
|
Triggered
before the window is hidden (it is still visible).
|
|
pagehide
|
Triggered
after the window is hidden (it is no longer visible).
|
이 이벤트들은 그 window의 pagecreate event 이 후에 trigger 됩니다. 이것들은 jQuery class object 로서 bind
() method에 의해 사용되어질 수 있습니다. 이 callback function은 ui가 he prevPage
or nextPage
property 랑 있는 객체 파라미터에서 callback
(event, ui) 이벤트가 진행될 때 call 합니다.
If
the event is of type show (pageshow or pagebeforeshow)
ui.prevPage
corresponds to the jQuery class object defining the window that one
leaves or has left (if any), to display this one it. ui.nextPage
property is not defined in this case.
If
the event is of type hide (pagehide or pagebeforehide)
ui.nextPage
corresponds to the jQuery class object defining the window we are
going to show or that have been displayed by leaving this one.
ui.prevPage
property is not defined in this case.
이제 이전에 다뤘던 예제로 다시 돌아가 봅시다. 우리가 이벤트들을 intercept 했던 그 예제로요.
Display
type events on 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 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>
$("div:jqmData(role=page)").bind ("pagebeforeshow", function (event, ui)
{
var txt = "pagebeforeshow id=" + this.id + "\n";
if (ui.prevPage && ui.prevPage[0])
txt += "ui.prevPage=" + ui.prevPage[0].id + "\n";
if (ui.nextPage && ui.nextPage[0])
txt += "ui.nextPage=" + ui.nextPage[0].id + "\n";
alert (txt);
});
$("div:jqmData(role=page)").bind ("pageshow", function (event, ui)
{
var txt = "pageshow id=" + this.id + "\n";
if (ui.prevPage && ui.prevPage[0])
txt += "ui.prevPage=" + ui.prevPage[0].id + "\n";
if (ui.nextPage && ui.nextPage[0])
txt += "ui.nextPage=" + ui.nextPage[0].id + "\n";
alert (txt);
});
$("div:jqmData(role=page)").bind ("pagebeforehide", function (event, ui)
{
var txt = "pagebeforehide id=" + this.id + "\n";
if (ui.prevPage && ui.prevPage[0])
txt += "ui.prevPage=" + ui.prevPage[0].id + "\n";
if (ui.nextPage && ui.nextPage[0])
txt += "ui.nextPage=" + ui.nextPage[0].id + "\n";
alert (txt);
});
$("div:jqmData(role=page)").bind ("pagehide", function (event, ui)
{
var txt = "pagehide id=" + this.id + "\n";
if (ui.prevPage && ui.prevPage[0])
txt += "ui.prevPage=" + ui.prevPage[0].id + "\n";
if (ui.nextPage && ui.nextPage[0])
txt += "ui.nextPage=" + ui.nextPage[0].id + "\n";
alert (txt);
});
</script>
Events related to the $.mobile.changePage () method
$.mobile.changePage
() method 가 개발자가 직접 이용하던지 내부적으로 jQuery Mobile 에 의해 이용되던지 간에 window 가 change 되는 과정을 인식하거나 어떤 간섭을 하기 위해 jQuery Mobile 은 여러 특정 이벤트들을 발생시킵니다. 이 이벤트들은 document
object에서 trigger 됩니다.
pagebeforechange event는 다른것들에 앞서서 처음 trigger 되는 것인데요. 이 이벤트의 management method는 파라미터로서 data
and event
arguments를 갖습니다. data.toPage
property는 string (display 될 윈도우의 파일 이름. "index2.html") 이거나 jQuery class object (symbolizing 된 윈도우$("#win2")) 입니다.
이 이벤트는 두번 call 될 수 있는데요. 첫번째는 Ajax로 그 파일을 로딩하기 전이구요 (data.toPage is a string) 두번째는 메모리에 로드될 때입니다 (data.toPage is a jQuery object
class). 어떤 상황에서든 최소한 두번째 call 은 이루어 집니다. (왜냐하면 윈도우는 display 되기 전에 반드시 메모리상에 있어야 하기 때문이죠.)
추가로 event.preventDefault
() instruction을 사용해서 윈도우가 display 되는 과정에 interrupt 할 수 있습니다. 정확한 시기는 pagebeforechange event가 진행될 때 입니다. 이 구문은 pagebeforechange event가 만들어지는 두 상황중 한 상황에서 excute 될 수 있습니다. 그러면 display process 는 stop 되게 되죠.
Stop
the window display
$(document).bind ("pagebeforechange", function (event, data)
{
event.preventDefault ();
});
display process 가 pagebeforechange
event안에서 event.preventDefault
() instruction에 의해 stop 되지 않았을 경우에는 document
object에 pagechange or pagechangefailed events 가 trigger 됩니다.
The
pagechange event indicates that the window could be
displayed. This is the last event issued by jQuery Mobile,
indicating that a window is created and displayed. The processing
function of the event uses event
and data
parameters, latter having the data.toPage
property representing the jQuery class object associated with the
active window (that is displayed).
The
pagechangefailed event indicates that the window could not be
displayed. This is due to the failure of the loading window Ajax
call (pageloadfailed event was previously triggered).
Moves in the window
추가로 vclick, vmouseover,
vmousedown, vmousemove, vmouseup, vmouseout
and vmousecancel 같은 전통적인 이벤트들에 대해서 jQuery Mobile은 모바일 context 에 맞도록 새롭게 이벤트를 생성시킵니다.
Events
associated with the moves in windows
|
Name
|
Signification
|
|
tap
|
Triggered
when the mouse (left button), or finger, click the screen. Similar
to traditional one-click.
|
|
taphold
|
Triggered
when the mouse (left button) or the finger is pressed at least one
second.
|
|
swipe
|
Triggered
when the mouse (left button) or the finger moves horizontally
across the screen.
|
|
swipeleft
|
Triggered
when the mouse (left button) or the finger moves horizontally
across the screen from right to left.
|
|
swiperight
|
Triggered
when the mouse (left button) or the finger moves horizontally
across the screen from left to right.
|
예를 들어서 swipe type events 들을 사용할 수 있는데요. 스크린에서 이미지를 오른쪽이나 왼쪽으로 sweeping 할 때 사용될 수 있습니다. jQuery Mobile 은 터치 스크린과 마우스를 사용하는 일반 스크린 모두에서 작동되도록 합니다.
아래 예제는 window 에서 swipe type events (and taphold)를 구현합니다.
Display
swipe and taphold type events in a 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> Events : </p>
<div id=evt></div>
</div>
</div>
</body>
</html>
<script>
$("#home").bind ("taphold", function (event)
{
var txt= "taphold, ";
$("#evt").append (txt);
});
$("#home").bind ("swipe", function (event)
{
var txt= "swipe, ";
$("#evt").append (txt);
});
$("#home").bind ("swipeleft", function (event)
{
var txt= "swipeleft, ";
$("#evt").append (txt);
});
$("#home").bind ("swiperight", function (event)
{
var txt= "swiperight, ";
$("#evt").append (txt);
});
</script>
화면을 몇번 sweeping 하고 나면 아래같은 화면이 될 겁니다.
Swipe
type events 는 horizontal direction 움직임을 감지합니다. jQuery Mobile 은 vertical direction 움직임을 감지하기 위해 scroll type events 를 생성합니다.
Events
associated with vertical movements in the window
|
Name
|
Signification
|
|
scrollstart
|
Triggered
when the mouse (left button) or the finger moves vertically on the
screen up or down.
|
|
scrollstop
|
Triggered
when the mouse (left button) or the finger is removed from the
screen (end of vertical displacement).
|
View
events of scroll type in a 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> Events : </p>
<div id=evt></div>
</div>
</div>
</body>
</html>
<script>
$("#home").bind ("scrollstart", function (event)
{
var txt= "scrollstart, ";
$("#evt").append (txt);
});
$("#home").bind ("scrollstop", function (event)
{
var txt= "scrollstop, ";
$("#evt").append (txt);
});
</script>
Change screen orientation
jQuery Mobile 은 스크린의 orientation 변화를 감지하기 위해 orientationchange event 를 사용합니다. 이 event
parameter 는 callback 함수 안에 있는데요. 화면의 orientation 에 따라 "portrait"
or "landscape" 라는 orientation
property 가 있습니다.
Events
associated with the change in orientation of the screen
|
Name
|
Signification
|
|
orientationchange
|
Triggered
upon a change of screen orientation. The event.orientation
property indicates "portrait" or "landscape"
according to screen orientation.
|
아래 예제는 화면의 orientation 이 바뀔 때마다 warning 을 보여 줍니다.
Display
the change in orientation of a 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 </p>
</div>
</div>
</body>
</html>
<script>
$("#home").bind ("orientationchange", function (event)
{
alert (event.orientation);
});
</script>
화면을 바꾸지 않을 떄에도 현재의 orientation 을 표시할 수 있는데요. $.event.special.orientationchange.orientation
() method 를 사용해서 "portrait"
or "landscape"를 화면에 표시할 수 있습니다.
tistory413_06.html
Retrieve
the current orientation
alert ($.event.special.orientationchange.orientation ());
// "portrait" or "landscape"
action419.php
