jQuery Mobile - 방향 변경 이벤트
모파일 화면은 가로가 긴 방향(Landscape)과 세로가 긴 방향(Portrait)이 있다. jQuery Mobile 은 두 방향이 서로 바뀌면 orientationchange 이벤트가 발생시킨다.
이벤트 핸들러의 매개값인 event 객체에는 방향 정보가 저장되어 있는데, orientation 속성을 읽으면 landscpe 또는 portrait 문자열을 얻을 수 있다. 웹앱이 시작된 후 모바일 기기의 방향이 변경되었을 때만 이벤트가 발생하기 때문에 웹앱이 처음 시작되었을 때 화면 방향은 얻을 수가 없다. 이 때에는 window.orientation 속성을 직접 읽으면 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="euc-kr" />
<mata name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
<title> jQuery Mobile</title>
<link rel="shortcut icon" href="./image/icon.png">
<link rel="apple-touch-icon" href="./image/icon.png">
<link href="./framework/jquery.mobile-1.0.css" rel="stylesheet" type="text/css" />
<script src="./framework/jquery-1.6.4.js"></script>
<script src="./framework/jquery.mobile-1.0.js"></script>
<script type="text/javascript">
$(function(){
//웹앱
if(window.orientation ==0){
$("#backImg").attr("src","./image/portrait.png");
}else{
$("#backImg").attr("src", "/image/landscape.png");
}
$(window).bind("orientationchange", function(event){
if(event.orientation=="portrait"){
$("#backImg").attr("src", "./image/portrait.png");
}else{
$("#backImg").attr("src", "./image/landscape.png");
}
});
});
</script>
</head>
<html>
<head>
<meta charset="euc-kr" />
<mata name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
<title> jQuery Mobile</title>
<link rel="shortcut icon" href="./image/icon.png">
<link rel="apple-touch-icon" href="./image/icon.png">
<link href="./framework/jquery.mobile-1.0.css" rel="stylesheet" type="text/css" />
<script src="./framework/jquery-1.6.4.js"></script>
<script src="./framework/jquery.mobile-1.0.js"></script>
<script type="text/javascript">
$(function(){
//웹앱
if(window.orientation ==0){
$("#backImg").attr("src","./image/portrait.png");
}else{
$("#backImg").attr("src", "/image/landscape.png");
}
$(window).bind("orientationchange", function(event){
if(event.orientation=="portrait"){
$("#backImg").attr("src", "./image/portrait.png");
}else{
$("#backImg").attr("src", "./image/landscape.png");
}
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="content" style="padding:0px">
<img id="backImg" src=""/>
</div>
</div>
</body>
<div data-role="page">
<div data-role="content" style="padding:0px">
<img id="backImg" src=""/>
</div>
</div>
</body>
</html>
'' 카테고리의 다른 글
| jQuery Mobile - 크로스 도메인 통신 (0) | 2012.07.27 |
|---|---|
| jQuery Mobile - AJAX 통신 (0) | 2012.07.26 |
| jQuery Mobile - 방향 변경 이벤트 (0) | 2012.07.25 |
| jQuery Mobile - 터치 이벤트 (0) | 2012.07.24 |
| jQuery Mobile - 페이지 이벤트( 로드, 초기화, 제거, 트랜지션) (0) | 2012.07.23 |
| jQuery Mobile - moblieinit 이벤트 (0) | 2012.07.22 |
댓글을 달아 주세요