728x90
jQTouch 환경에서의 페이지 전환은 일반적인 웹페이지의 링크 개념보다는 뷰의 교체에 가깝다고 했었다
: [jQTouch] 페이지 전환
보통 웹 페이지는 자신이 처음 로드될 때 그리고 페이지를 빠져나갈 때 각각 이벤트를 걸 수 있다
즉 페이지가 처음 표시될 때 load 이벤트, 페이지를 이탈할 때 unload 이벤트가 발생하여 원하는 작업을 처리할 수 있다.
jQTouch 에서 일반적으로 사용하는 페이지 전환은 뷰의 교체 즉 페이지내 div 요소로의 이동이다.
즉 하나의 페이지에 정의된 div의 교체이기 때문에 위와 같은 한 페이지 기반의 로드,언로드 이벤트 처리가 적합하지 않다. 따라서 div 가 교체될 때 그리고 div 를 이탈할 때 발생하는 이벤트가 따로 존재해야 한다
jQTouch 는 이와같은 당연한 논리구조를 알고 있으며 적절한 이벤트를 제공해 주고 있다
바로 pageAnimationStart, pageAnimationEnd 이벤트가 그것이다
페이지 전환 즉 div 의 교체는 slide, slideup 과 같은 에니매이션효과로 전환되며 이 에니매이션 효과에 대해 이벤트를 추가하는 방식이다
페이지 전환, 이탈 두 시점에 pageAnimationStart, pageAnimationEnd 모두 발생하며 각각 전환 에니매이션의 시작과 끝을 알린다. 또한 이벤트 함수로 전달되는 매개변수의 direction 속성을 통해 페이지의 전환, 이탈을 구분할 수 있다. (direction가 in 인 경우: 페이지 전환 , out 인 경우: 페이지 이탈)
아래 화면은 차례대로 페이지를 처음 이동한 것과 뒤로갔다가 다시 돌아왔을대의 결과 화면이다
첫 이동 시 에니매이션 시작과 끝을 알리는 두 이벤트가 모두 발생하였고 Back 했을 때 역시 두 이벤트가 발생하였다. 다만 direction 속성이 in 과 out 으로 페이지의 전환,이탈을 구분하고 있다. 이로써 일반적인 웹페이지 링크 모델에서의 페이지 로딩,언로딩 이벤트 효과를 jQTouch div 교체 모델에서도 적용할 수 있는 것이다.
코드는 jQTouch가 제공하는 데모코드와 동일하며 jQuery 문법이 사용 되었음을 알 수 있다
: [jQTouch] 페이지 전환
보통 웹 페이지는 자신이 처음 로드될 때 그리고 페이지를 빠져나갈 때 각각 이벤트를 걸 수 있다
즉 페이지가 처음 표시될 때 load 이벤트, 페이지를 이탈할 때 unload 이벤트가 발생하여 원하는 작업을 처리할 수 있다.
jQTouch 에서 일반적으로 사용하는 페이지 전환은 뷰의 교체 즉 페이지내 div 요소로의 이동이다.
즉 하나의 페이지에 정의된 div의 교체이기 때문에 위와 같은 한 페이지 기반의 로드,언로드 이벤트 처리가 적합하지 않다. 따라서 div 가 교체될 때 그리고 div 를 이탈할 때 발생하는 이벤트가 따로 존재해야 한다
jQTouch 는 이와같은 당연한 논리구조를 알고 있으며 적절한 이벤트를 제공해 주고 있다
바로 pageAnimationStart, pageAnimationEnd 이벤트가 그것이다
페이지 전환 즉 div 의 교체는 slide, slideup 과 같은 에니매이션효과로 전환되며 이 에니매이션 효과에 대해 이벤트를 추가하는 방식이다
페이지 전환, 이탈 두 시점에 pageAnimationStart, pageAnimationEnd 모두 발생하며 각각 전환 에니매이션의 시작과 끝을 알린다. 또한 이벤트 함수로 전달되는 매개변수의 direction 속성을 통해 페이지의 전환, 이탈을 구분할 수 있다. (direction가 in 인 경우: 페이지 전환 , out 인 경우: 페이지 이탈)
아래 화면은 차례대로 페이지를 처음 이동한 것과 뒤로갔다가 다시 돌아왔을대의 결과 화면이다
첫 이동 시 에니매이션 시작과 끝을 알리는 두 이벤트가 모두 발생하였고 Back 했을 때 역시 두 이벤트가 발생하였다. 다만 direction 속성이 in 과 out 으로 페이지의 전환,이탈을 구분하고 있다. 이로써 일반적인 웹페이지 링크 모델에서의 페이지 로딩,언로딩 이벤트 효과를 jQTouch div 교체 모델에서도 적용할 수 있는 것이다.
코드는 jQTouch가 제공하는 데모코드와 동일하며 jQuery 문법이 사용 되었음을 알 수 있다
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css" media="screen">@import "../../jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "../../themes/jqt/theme.min.css";</style>
<script src="../../jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
addGlossToIcon: false,
startupScreen: 'jqt_startup.png',
statusBar: 'black',
preloadImages: [
'../../themes/jqt/img/back_button.png',
'../../themes/jqt/img/back_button_clicked.png',
'../../themes/jqt/img/button_clicked.png',
'../../themes/jqt/img/grayButton.png',
'../../themes/jqt/img/whiteButton.png',
'../../themes/jqt/img/loading.gif'
]
});
$(function(){
// Page animation callback events
$('#pageevents').
bind('pageAnimationStart', function(e, info){
$(this).find('.info').append('Started animating ' + info.direction + '… ');
}).
bind('pageAnimationEnd', function(e, info){
$(this).find('.info').append(' finished animating ' + info.direction + '.<br /><br />');
});
});
</script>
</head>
<body>
<div id="home">
<div class="toolbar">
<h1>Page Switch Event</h1>
</div>
<ul class="rounded">
<li><a href="#pageevents">Page Switch Event</a></li>
</ul>
</div>
<div id="pageevents">
<div class="toolbar">
<h1>Page Switch Event</h1>
<a class="back" href="#">Back</a>
</div>
<div class="info" style="font-weight: normal;">
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css" media="screen">@import "../../jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "../../themes/jqt/theme.min.css";</style>
<script src="../../jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
addGlossToIcon: false,
startupScreen: 'jqt_startup.png',
statusBar: 'black',
preloadImages: [
'../../themes/jqt/img/back_button.png',
'../../themes/jqt/img/back_button_clicked.png',
'../../themes/jqt/img/button_clicked.png',
'../../themes/jqt/img/grayButton.png',
'../../themes/jqt/img/whiteButton.png',
'../../themes/jqt/img/loading.gif'
]
});
$(function(){
// Page animation callback events
$('#pageevents').
bind('pageAnimationStart', function(e, info){
$(this).find('.info').append('Started animating ' + info.direction + '… ');
}).
bind('pageAnimationEnd', function(e, info){
$(this).find('.info').append(' finished animating ' + info.direction + '.<br /><br />');
});
});
</script>
</head>
<body>
<div id="home">
<div class="toolbar">
<h1>Page Switch Event</h1>
</div>
<ul class="rounded">
<li><a href="#pageevents">Page Switch Event</a></li>
</ul>
</div>
<div id="pageevents">
<div class="toolbar">
<h1>Page Switch Event</h1>
<a class="back" href="#">Back</a>
</div>
<div class="info" style="font-weight: normal;">
</div>
</body>
</html>
'모바일 > Javascript' 카테고리의 다른 글
| [jQTouch] Extensions (확장기능) (10) | 2010.10.28 |
|---|---|
| [jQTouch] GET, POST 전송 (10) | 2010.10.27 |
| [jQTouch] 페이지 전환 효과 (에니메이션 효과) (8) | 2010.10.26 |
| [jQTouch] 페이지 전환 (8) | 2010.10.26 |
| [jQTouch] 목록 스타일 (9) | 2010.10.25 |
