Hi Hi

'방향 변경 이벤트'에 해당되는 글 1건

  1. jQuery Mobile - 방향 변경 이벤트

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>
<body>
 <div data-role="page">
  <div data-role="content" style="padding:0px">
   <img id="backImg" src=""/>
  </div>
 </div>
</body>
</html>